/
kaws
/
ui-kit-ce
Обзор
Документация
Войти
/
kaws
/
ui-kit-ce
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/combo-box/examples/OptionFormat.tsx
65 строк
1 KB
Denis Svyatovets
feat(combo-box): добавлен параметр option в formatOptionLabel
31 мар 2025, 13:48
31 мар 2025, 13:48
271a7cd
Код
Авторство
О чём код?
import React from 'react' import { ComboBox, Avatar, Text } from '@v-uik/base' import { Placeholder } from './assets/Placeholders' type Option = { value: string label: string jobTitle?: string } const options = [ { value: '1', label: 'Lorem 1', jobTitle: 'Разработчик' }, { value: '2', label: 'Lorem 2' }, { value: '3', label: 'Lorem 3', jobTitle: 'Дизайнер' }, { value: '4', label: 'Lorem 4' }, ] const formatLabel = (label: string, _inputValue?: string, option?: Option) => { if (!option) { return label } return ( <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}> <Avatar size="xs" alt={option.label} /> <div> <div> <b>{option.label}</b> </div> <div> <Text kind="uiTextSm">{option.jobTitle}</Text> </div> </div> </div> ) } export const OptionFormat = (): JSX.Element => { return ( <div style={{ width: 288 }}> <ComboBox canClear limitByWidth openOnFocus isSearchable label="Signle" placeholder={Placeholder.SINGLE_SEARCHABLE} options={options} formatOptionLabel={formatLabel} /> <ComboBox canClear disableCloseOnSelect limitByWidth multiple openOnFocus withTags label="Multiple" placeholder={Placeholder.MULTIPLE} options={options} formatOptionLabel={formatLabel} /> </div> ) }