2019-07-18 08:00:54 +00:00
|
|
|
# ComboBox
|
|
|
|
|
|
|
|
#### Description
|
|
|
|
|
|
|
|
Custom combo box input
|
|
|
|
|
2019-08-30 13:44:04 +00:00
|
|
|
Options have options:
|
|
|
|
|
|
|
|
- key - Item key, may be a string or a number
|
|
|
|
- label - Display text
|
|
|
|
- icon - Optional name of icon that will be displayed before label
|
|
|
|
- disabled - Make option disabled
|
|
|
|
- onClick - On click function
|
|
|
|
|
|
|
|
ComboBox perceives all property`s for positioning from DropDown!
|
|
|
|
|
|
|
|
If you need to display a custom list of options, you must use advancedOptions property. Like this:
|
|
|
|
|
|
|
|
```js
|
|
|
|
const advancedOptions = (
|
|
|
|
<>
|
|
|
|
<DropDownItem>
|
|
|
|
<RadioButton value="asc" name="first" label="A-Z" isChecked={true} />
|
|
|
|
</DropDownItem>
|
|
|
|
<DropDownItem>
|
|
|
|
<RadioButton value="desc" name="first" label="Z-A" />
|
|
|
|
</DropDownItem>
|
|
|
|
<DropDownItem isSeparator />
|
|
|
|
<DropDownItem>
|
|
|
|
<RadioButton value="first" name="second" label="First name" />
|
|
|
|
</DropDownItem>
|
|
|
|
<DropDownItem>
|
|
|
|
<RadioButton
|
|
|
|
value="last"
|
|
|
|
name="second"
|
|
|
|
label="Last name"
|
|
|
|
isChecked={true}
|
|
|
|
/>
|
|
|
|
</DropDownItem>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
|
|
|
<ComboBox
|
|
|
|
options={[]} // An empty array will enable advancedOptions
|
|
|
|
advancedOptions={advancedOptions}
|
|
|
|
onSelect={option => action("Selected option")(option)}
|
|
|
|
selectedOption={{
|
|
|
|
key: 0,
|
|
|
|
label: "Select"
|
|
|
|
}}
|
|
|
|
isDisabled={false}
|
|
|
|
scaled={false}
|
|
|
|
size="content"
|
|
|
|
directionX="right"
|
|
|
|
>
|
|
|
|
<Icons.NavLogoIcon size="medium" key="comboIcon" />
|
|
|
|
</ComboBox>;
|
|
|
|
```
|
2019-08-08 11:14:25 +00:00
|
|
|
|
2019-07-18 08:00:54 +00:00
|
|
|
#### Usage
|
|
|
|
|
|
|
|
```js
|
|
|
|
import { ComboBox } from 'asc-web-components';
|
|
|
|
|
2019-07-31 18:42:23 +00:00
|
|
|
const options = [
|
|
|
|
{
|
2019-08-08 11:14:25 +00:00
|
|
|
key: 1,
|
2019-08-30 13:44:04 +00:00
|
|
|
icon: 'CatalogEmployeeIcon', // optional item
|
|
|
|
label: 'Option 1',
|
|
|
|
disabled: false, // optional item
|
|
|
|
onClick: clickFunction // optional item
|
2019-08-08 11:14:25 +00:00
|
|
|
},
|
2019-08-30 13:44:04 +00:00
|
|
|
...
|
2019-07-31 18:42:23 +00:00
|
|
|
];
|
|
|
|
|
2019-08-30 13:44:04 +00:00
|
|
|
<ComboBox
|
|
|
|
options={options}
|
|
|
|
isDisabled={false}
|
2019-08-14 12:53:05 +00:00
|
|
|
selectedOption={{
|
|
|
|
key: 0,
|
|
|
|
label: 'Select'
|
|
|
|
}}
|
2019-08-20 13:04:23 +00:00
|
|
|
dropDownMaxHeight={200}
|
2019-08-14 12:53:05 +00:00
|
|
|
noBorder={false}
|
2019-08-30 13:44:04 +00:00
|
|
|
scale={true}
|
|
|
|
size='content'
|
2019-08-12 08:19:52 +00:00
|
|
|
onSelect={option => console.log('selected', option)}
|
|
|
|
/>
|
2019-07-18 08:00:54 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
#### Properties
|
|
|
|
|
2019-08-30 13:44:04 +00:00
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
| ------------------- | --------- | :------: | ------------------------------------------ | ------- | --------------------------------------------------------- |
|
|
|
|
| `options` | `array` | ✅ | - | - | Combo box options |
|
|
|
|
| `isDisabled` | `bool` | - | - | `false` | Indicates that component is disabled |
|
|
|
|
| `noBorder` | `bool` | - | - | `false` | Indicates that component is displayed without borders |
|
|
|
|
| `selectedOption` | `object` | ✅ | - | - | Selected option |
|
|
|
|
| `onSelect` | `func` | - | - | - | Will be triggered whenever an ComboBox is selected option |
|
|
|
|
| `dropDownMaxHeight` | `number` | - | - | - | Height of Dropdown |
|
|
|
|
| `scaled` | `bool` | - | - | `true` | Indicates that component is scaled by parent |
|
|
|
|
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge`, `content` | `base` | Select component width, one of default |
|
|
|
|
| `advancedOptions` | `element` | - | - | - | If you need display options not basic options |
|