/
kaws
/
ui-kit-ce
Обзор
Документация
Войти
/
kaws
/
ui-kit-ce
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/combo-box/examples/CreatableWithUpdatedOptions.tsx
58 строк
1 KB
Denis Svyatovets
v1.10.0
27 мар 2024, 13:48
27 мар 2024, 13:48
c9029ae
Код
Авторство
О чём код?
import * as React from 'react' import { Creatable } from '@v-uik/base' import { Placeholder } from './assets/Placeholders' type Option = { value: string label: string } const defaultOptions: Option[] = [ { value: 'vanilla', label: 'Vanilla' }, { value: 'chocolate', label: 'Chocolate' }, { value: 'strawberry', label: 'Strawberry' }, { value: 'salted-caramel', label: 'Salted Caramel' }, ] const createOption = (label: string) => ({ label, value: label, __isNew__: true, }) export const CreatableWithUpdatedOptions = (): JSX.Element => { const [isDisabled, setIsDisabled] = React.useState<boolean>(false) const [value, setValue] = React.useState<Option | null>(null) const [options, setOptions] = React.useState(defaultOptions) const onCreateOption = (inputValue: string) => { setIsDisabled(true) setTimeout(() => { const newOption = createOption(inputValue) setIsDisabled(false) setOptions((prev) => [...prev, newOption]) setValue(newOption) }, 1000) } return ( <div style={{ width: 288 }}> <Creatable canClear clearInputOnBlur openOnFocus formatLabel={(v) => `Add "${v}"`} helperText="Helper Text" label="Label" options={options} placeholder={Placeholder.SINGLE_SEARCHABLE} noOptionsText="No options" value={value} disabled={isDisabled} onCreateOption={onCreateOption} onChange={setValue} /> </div> ) }