import { Select } from '@megafon/ui-core';
Код DemoSelectWrapperconst DemoSelectWrapper = props => {const [currentValue, setCurrentValue] = React.useState();const handleSelect = (_e, data) => {if (!data) {setCurrentValue('');return;}setCurrentValue(data.value);};return (<div style={DemoSelectWrapperStyle}>{props.children({onSelect: handleSelect,currentValue: currentValue,})}</div>);};
Демо данныеconst items = [{value: 0,title: 'Авиамоторная',},{value: 1,title: 'Автозаводская',},{value: 2,title: 'Академическая',},{value: 3,title: 'Бабушкинская',},{value: 4,title: 'Багратионовская',},{value: 5,title: 'ВДНХ',},{value: 6,title: 'Варшавская',},{value: 7,title: 'Деловой центр',},{value: 8,title: 'Дмитровская',},{value: 9,title: 'Калужская',},{value: 10,title: 'Кантемировская',view: ({ filterValue }) => {const query = filterValue.replace(/[^A-Z-a-zА-ЯЁа-яё0-9]/g, w => '\\' + w);const stringFragments = 'Кантемировская'.split(RegExp(`(${query})`, 'ig'));return (<>{stringFragments.map((fragment, i) => (<React.Fragment key={i}>{fragment.toLowerCase() === filterValue.toLowerCase() && fragment !== '' ? (<b>{fragment}</b>) : (fragment)}</React.Fragment>))}</>);},},];
<DemoSelectWrapper> {({ onSelect, currentValue }) => ( <Select label="Заголовок" onSelect={onSelect} placeholder="Choose your step" items={items} currentValue={currentValue} /> )} </DemoSelectWrapper>
<DemoSelectWrapper> {({ onSelect, currentValue }) => ( <Select shortList label="Заголовок" onSelect={onSelect} placeholder="Choose your step" items={items} currentValue={currentValue} /> )} </DemoSelectWrapper>
<DemoSelectWrapper> {({ onSelect, canOpen, currentValue }) => ( <Select label="Заголовок" placeholder="Choose your step" items={items.map(item => ({ title: item.title, value: item.value, paddings: 'small', view: ( <> <Metro style={{ width: '24px', minWidth: '24px', height: '24px', marginRight: '16px' }} /> {item.title} </> ), selectedView: ( <> <Metro style={{ width: '24px', minWidth: '24px', height: '24px', marginRight: '16px' }} /> {item.title} </> ), }))} onSelect={onSelect} currentValue={currentValue} /> )} </DemoSelectWrapper>
<DemoSelectWrapper> {({ onSelect, currentValue }) => ( <Select label="Заголовок" disabled onSelect={onSelect} placeholder="You have no choice" items={items} currentValue={currentValue} /> )} </DemoSelectWrapper>
<DemoSelectWrapper> {({ onSelect, currentValue = 3 }) => ( <Select label="Успешное состояние" required verification="valid" noticeText="Success message" onSelect={onSelect} placeholder="Choose your step" items={items} currentValue={currentValue} /> )} </DemoSelectWrapper> <DemoSelectWrapper> {({ onSelect, currentValue }) => ( <Select label="Состояние ошибки" required verification="error" noticeText="Error message" onSelect={onSelect} placeholder="Choose your step" items={items} currentValue={currentValue} /> )} </DemoSelectWrapper>
<DemoSelectWrapper> {({ onSelect, currentValue }) => ( <Select label="Сombobox" type="combobox" onSelect={onSelect} placeholder="Choose or type your step" items={items} currentValue={currentValue} /> )} </DemoSelectWrapper> <DemoSelectWrapper> {({ onSelect, currentValue = 6 }) => ( <Select label="Combobox с выбранным по умолчанию значением" type="combobox" onSelect={onSelect} placeholder="Choose or type your step" items={items} currentValue={currentValue} /> )} </DemoSelectWrapper>
Prop name | Type | Default | Description |
---|---|---|---|
type | SelectTypesType | classic | Тип компонента |
label | string | Заголовок поля | |
labelId | string | HTML идентификатор для заголовка поля | |
currentValue | SelectItemValueType | Текущий выбранный элемент селекта (extends SelectItemValueType) | |
verification | VerificationType | Результат проверки данных | |
noticeText | string | Element | Дополнительный текст под полем. Свойство verification влияет на цвет текста. | |
disabled | boolean | false | Отключение селекта |
required | boolean | false | Делает поле обязательным |
placeholder | string | Текст внутри поля по умолчанию | |
notFoundText | string | Ничего не нашлось | Текст при отсутствии результатов поиска |
items* | ISelectItem<T>[] | Массив элементов селекта | |
shortList | boolean | false | Отображать короткий выпадающий список |
className | string | Дополнительный класс корневого элемента | |
classes | { root?: string; control?: string; title?: string; titleInner?: string; list?: string; listInner?: string; listItem?: string; listItemTitle?: string; } | {} | Дополнительные классы для внутренних элементов |
dataAttrs | { root?: Record<string, string>; label?: Record<string, string>; control?: Record<string, string>; title?: Record<string, string>; titleInner?: Record<string, string>; ... 6 more ...; notFound?: Record<...>; } | Дополнительные data атрибуты к внутренним элементам | |
inputRef | (node: HTMLDivElement) => void | Ref обработчик | |
onSelect | (e: MouseEvent<HTMLDivElement, MouseEvent> | KeyboardEvent<HTMLDivElement>, dataItem?: ISelectItem<T>) => void | Обработчик выбора элемента селекта | |
onOpened | () => void | Обработчик при открытом селекте | |
onClosed | () => void | Обработчик при закрытом селекте |