48 lines
1.4 KiB
Markdown
48 lines
1.4 KiB
Markdown
# AdvancedSelector
|
|
|
|
## Usage
|
|
|
|
```js
|
|
import AdvancedSelector from "@docspace/common/components/AdvancedSelector";
|
|
```
|
|
|
|
#### 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` | - | - | | |
|