/
kaws
/
ui-kit-ce
Обзор
Документация
Войти
/
kaws
/
ui-kit-ce
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/tag/examples/Basic.tsx
49 строк
1 KB
Denis Svyatovets
v1.10.0
27 мар 2024, 13:48
27 мар 2024, 13:48
c9029ae
Код
Авторство
О чём код?
import * as React from 'react' import { Tag } from '@v-uik/base' import { Icon } from './assets/Icon' type TValues = 'first' | 'second' | 'third' export const Basic = (): React.ReactElement => { const [selected, setSelected] = React.useState<Record<TValues, boolean>>({ first: false, second: false, third: true, }) const array: Array<TValues> = ['first', 'second', 'third'] const kinds: { [key in TValues]: 'lite' | 'secondary' | 'primary' } = { first: 'lite', second: 'secondary', third: 'primary', } const handleToggle = (field: TValues) => () => { setSelected({ ...selected, [field]: !selected[field] }) } return ( <div style={{ display: 'flex', gap: 16 }}> {array.map((item) => ( <Tag key={item} kind={kinds[item]} selected={selected[item]} aria-label={ selected[item] ? 'На нажатие Backspace элемент удалаяется' : undefined } onDelete={selected[item] ? handleToggle(item) : undefined} onClick={handleToggle(item)} > <Icon style={{ marginRight: 8 }} /> {selected[item] ? 'Delete me' : 'Click me'} </Tag> ))} </div> ) }