Skip to content

Commit cbf0f3e

Browse files
jonnybelkodiakhq[bot]
jonnybel
authored and
kodiakhq[bot]
committed
feat(select): add isReadOnly prop to select inputs and fields (#1192)
1 parent ab54b57 commit cbf0f3e

34 files changed

+191
-21
lines changed

‎src/components/fields/async-creatable-select-field/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import { AsyncCreatableSelectField } from '@commercetools-frontend/ui-kit';
4040
| `containerId` | `string` | - | - | - | The id to set on the SelectContainer component |
4141
| `isClearable` | `bool` | - | - | - | Is the select value clearable |
4242
| `isDisabled` | `bool` | - | - | - | Is the select disabled |
43+
| `isReadOnly` | `bool` | - | - | - | Is the select read-only |
4344
| `isOptionDisabled` | `func` | - | - | - | Override the built-in logic to detect whether an option is disabled |
4445
| `isMulti` | `bool` | - | - | - | Support multiple selected options |
4546
| `isSearchable` | `bool` | - | - | - | Whether to enable search functionality |

‎src/components/fields/async-creatable-select-field/async-creatable-select-field.js

+2
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export default class SelectField extends React.Component {
4242
containerId: PropTypes.string,
4343
isClearable: PropTypes.bool,
4444
isDisabled: PropTypes.bool,
45+
isReadOnly: PropTypes.bool,
4546
isOptionDisabled: PropTypes.func,
4647
isMulti: PropTypes.bool,
4748
isSearchable: PropTypes.bool,
@@ -155,6 +156,7 @@ export default class SelectField extends React.Component {
155156
containerId={this.props.containerId}
156157
isClearable={this.props.isClearable}
157158
isDisabled={this.props.isDisabled}
159+
isReadOnly={this.props.isReadOnly}
158160
isOptionDisabled={this.props.isOptionDisabled}
159161
isMulti={this.props.isMulti}
160162
isSearchable={this.props.isSearchable}

‎src/components/fields/async-creatable-select-field/async-creatable-select-field.story.js

+1
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@ storiesOf('Components|Fields', module)
139139
onInputChange={action('onInputChange')}
140140
isAutofocussed={boolean('isAutofocussed', false)}
141141
isDisabled={boolean('isDisabled', false)}
142+
isReadOnly={boolean('isReadOnly', false)}
142143
isMulti={isMulti}
143144
placeholder={text('placeholder', 'Select...')}
144145
title={text('title', 'Favourite animal')}

‎src/components/fields/async-creatable-select-field/async-creatable-select-field.visualroute.js

+11
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,17 @@ const DefaultRoute = () => (
6767
hint="Select a state"
6868
/>
6969
</Spec>
70+
<Spec label="when read-only">
71+
<AsyncCreatableSelectField
72+
title="State"
73+
name="form-field-name"
74+
value={value}
75+
onChange={() => {}}
76+
loadOptions={loadOptions}
77+
horizontalConstraint="m"
78+
isReadOnly={true}
79+
/>
80+
</Spec>
7081
</Suite>
7182
);
7283

‎src/components/fields/async-select-field/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import { AsyncSelectField } from '@commercetools-frontend/ui-kit';
3636
| `containerId` | `string` | - | - | - | The id to set on the SelectContainer component |
3737
| `isClearable` | `bool` | - | - | - | Is the select value clearable |
3838
| `isDisabled` | `bool` | - | - | - | Is the select disabled |
39+
| `isReadOnly` | `bool` | - | - | - | Is the select read-only |
3940
| `isOptionDisabled` | `func` | - | - | - | Override the built-in logic to detect whether an option is disabled |
4041
| `isMulti` | `bool` | - | - | - | Support multiple selected options |
4142
| `isSearchable` | `bool` | - | - | - | Whether to enable search functionality |

‎src/components/fields/async-select-field/async-select-field.js

+2
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export default class AsyncSelectField extends React.Component {
4242
containerId: PropTypes.string,
4343
isClearable: PropTypes.bool,
4444
isDisabled: PropTypes.bool,
45+
isReadOnly: PropTypes.bool,
4546
isOptionDisabled: PropTypes.func,
4647
isMulti: PropTypes.bool,
4748
isSearchable: PropTypes.bool,
@@ -136,6 +137,7 @@ export default class AsyncSelectField extends React.Component {
136137
containerId={this.props.containerId}
137138
isClearable={this.props.isClearable}
138139
isDisabled={this.props.isDisabled}
140+
isReadOnly={this.props.isReadOnly}
139141
isOptionDisabled={this.props.isOptionDisabled}
140142
isMulti={this.props.isMulti}
141143
isSearchable={this.props.isSearchable}

‎src/components/fields/async-select-field/async-select-field.story.js

+1
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@ storiesOf('Components|Fields', module)
139139
onInputChange={action('onInputChange')}
140140
isAutofocussed={boolean('isAutofocussed', false)}
141141
isDisabled={boolean('isDisabled', false)}
142+
isReadOnly={boolean('isReadOnly', false)}
142143
isMulti={isMulti}
143144
placeholder={text('placeholder', 'Select...')}
144145
title={text('title', 'Favourite animal')}

‎src/components/fields/async-select-field/async-select-field.visualroute.js

+11
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,17 @@ const DefaultRoute = () => (
6767
hint="Select a state"
6868
/>
6969
</Spec>
70+
<Spec label="when read-only">
71+
<AsyncSelectField
72+
title="State"
73+
name="form-field-name"
74+
value={value}
75+
onChange={() => {}}
76+
loadOptions={loadOptions}
77+
horizontalConstraint="m"
78+
isReadOnly={true}
79+
/>
80+
</Spec>
7081
</Suite>
7182
);
7283

‎src/components/fields/creatable-select-field/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { CreatableSelectField } from '@commercetools-frontend/ui-kit';
3939
| `containerId` | `string` | - | - | - | The id to set on the SelectContainer component |
4040
| `isClearable` | `bool` | - | - | - | Is the select value clearable |
4141
| `isDisabled` | `bool` | - | - | - | Is the select disabled |
42+
| `isReadOnly` | `bool` | - | - | - | Is the select read-only |
4243
| `isOptionDisabled` | `func` | - | - | - | Override the built-in logic to detect whether an option is disabled |
4344
| `isMulti` | `bool` | - | - | - | Support multiple selected options |
4445
| `isSearchable` | `bool` | - | - | - | Whether to enable search functionality |

‎src/components/fields/creatable-select-field/creatable-select-field.js

+1
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export default class SelectField extends React.Component {
4242
containerId: PropTypes.string,
4343
isClearable: PropTypes.bool,
4444
isDisabled: PropTypes.bool,
45+
isReadOnly: PropTypes.bool,
4546
isOptionDisabled: PropTypes.func,
4647
isMulti: PropTypes.bool,
4748
isSearchable: PropTypes.bool,

‎src/components/fields/creatable-select-field/creatable-select-field.story.js

+1
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ storiesOf('Components|Fields', module)
125125
onInputChange={action('onInputChange')}
126126
isAutofocussed={boolean('isAutofocussed', false)}
127127
isDisabled={boolean('isDisabled', false)}
128+
isReadOnly={boolean('isReadOnly', false)}
128129
isMulti={isMulti}
129130
placeholder={text('placeholder', 'Select...')}
130131
title={text('title', 'Favourite animal')}

‎src/components/fields/creatable-select-field/creatable-select-field.visualroute.js

+11
Original file line numberDiff line numberDiff line change
@@ -65,5 +65,16 @@ export const component = () => (
6565
hint="Select a state"
6666
/>
6767
</Spec>
68+
<Spec label="when read-only">
69+
<CreatableSelectField
70+
title="State"
71+
name="form-field-name"
72+
value={value}
73+
onChange={() => {}}
74+
options={options}
75+
horizontalConstraint="m"
76+
isReadOnly={true}
77+
/>
78+
</Spec>
6879
</Suite>
6980
);

‎src/components/fields/select-field/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { SelectField } from '@commercetools-frontend/ui-kit';
3939
| `containerId` | `string` | - | - | - | The id to set on the SelectContainer component |
4040
| `isClearable` | `bool` | - | - | - | Is the select value clearable |
4141
| `isDisabled` | `bool` | - | - | - | Is the select disabled |
42+
| `isReadOnly` | `bool` | - | - | - | Is the select read-only |
4243
| `isOptionDisabled` | `func` | - | - | - | Override the built-in logic to detect whether an option is disabled |
4344
| `isMulti` | `bool` | - | - | - | Support multiple selected options |
4445
| `isSearchable` | `bool` | - | - | - | Whether to enable search functionality |

‎src/components/fields/select-field/select-field.js

+2
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export default class SelectField extends React.Component {
4242
containerId: PropTypes.string,
4343
isClearable: PropTypes.bool,
4444
isDisabled: PropTypes.bool,
45+
isReadOnly: PropTypes.bool,
4546
isOptionDisabled: PropTypes.func,
4647
isMulti: PropTypes.bool,
4748
isSearchable: PropTypes.bool,
@@ -129,6 +130,7 @@ export default class SelectField extends React.Component {
129130
containerId={this.props.containerId}
130131
isClearable={this.props.isClearable}
131132
isDisabled={this.props.isDisabled}
133+
isReadOnly={this.props.isReadOnly}
132134
isOptionDisabled={this.props.isOptionDisabled}
133135
isMulti={this.props.isMulti}
134136
isSearchable={this.props.isSearchable}

‎src/components/fields/select-field/select-field.story.js

+1
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ storiesOf('Components|Fields', module)
125125
onInputChange={action('onInputChange')}
126126
isAutofocussed={boolean('isAutofocussed', false)}
127127
isDisabled={boolean('isDisabled', false)}
128+
isReadOnly={boolean('isReadOnly', false)}
128129
isMulti={isMulti}
129130
placeholder={text('placeholder', 'Select...')}
130131
title={text('title', 'Favourite animal')}

‎src/components/fields/select-field/select-field.visualroute.js

+11
Original file line numberDiff line numberDiff line change
@@ -65,5 +65,16 @@ export const component = () => (
6565
hint="Select a state"
6666
/>
6767
</Spec>
68+
<Spec label="when read-only">
69+
<SelectField
70+
title="State"
71+
name="form-field-name"
72+
value={value}
73+
onChange={() => {}}
74+
options={options}
75+
horizontalConstraint="m"
76+
isReadOnly={true}
77+
/>
78+
</Spec>
6879
</Suite>
6980
);

‎src/components/inputs/async-creatable-select-input/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ Any parent component using `AsyncCreatableSelectInput` has to pass in a value, w
6666
| `containerId` | `string` | - | - | - | The id to set on the SelectContainer component |
6767
| `isClearable` | `bool` | - | - | - | Is the select value clearable |
6868
| `isDisabled` | `bool` | - | - | - | Is the select disabled |
69+
| `isReadOnly` | `bool` | - | - | - | Is the select read-only |
6970
| `isOptionDisabled` | `func` | - | - | - | Override the built-in logic to detect whether an option is disabled |
7071
| `isMulti` | `bool` | - | - | - | Support multiple selected options |
7172
| `isSearchable` | `bool` | - | - | `true` | Whether to enable search functionality |

0 commit comments

Comments
 (0)