45 lines
1.6 KiB
Markdown
45 lines
1.6 KiB
Markdown
|
# AdvancedSelector
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { AdvancedSelector } from 'asc-web-components';
|
||
|
|
```
|
||
|
|
|
||
|
|
#### Description
|
||
|
|
|
||
|
|
Required to select some advanced data.
|
||
|
|
|
||
|
|
#### Usage
|
||
|
|
|
||
|
|
```js
|
||
|
|
|
||
|
|
let options = [{key: "self", label: "Me"}];
|
||
|
|
|
||
|
|
options = [...options, ...[...Array(100).keys()].map(
|
||
|
|
index => {
|
||
|
|
return { key: `user${index}`, label: `User ${index+1} of ${optionsCount}` };
|
||
|
|
}
|
||
|
|
)];
|
||
|
|
|
||
|
|
<AdvancedSelector
|
||
|
|
placeholder="Search users"
|
||
|
|
onSearchChanged={(e) => console.log(e.target.value)}
|
||
|
|
options={options}
|
||
|
|
isMultiSelect={false}
|
||
|
|
buttonLabel="Add members"
|
||
|
|
onSelect={(selectedOptions) => console.log("onSelect", selectedOptions)}
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
#### Properties
|
||
|
|
|
||
|
|
| Props | Type | Required | Values | Default | Description |
|
||
|
|
| ------------------ | -------- | :------: | ----------------------------------------- | --------- | ----------------------------------------------------- |
|
||
|
|
| `placeholder` | `string` | - | | | |
|
||
|
|
| `options` | `array of objects` | - | | | |
|
||
|
|
| `isMultiSelect` | `bool` | - | - | | |
|
||
|
|
| `buttonLabel` | `string` | - | - | | |
|
||
|
|
| `onSearchChanged` | `func` | - | - | | |
|
||
|
|
| `onSelect` | `func` | - | - | | |
|