/
dedaMazai
/
TestServer
Обзор
Документация
Войти
/
dedaMazai
/
TestServer
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
src/shared/ui/Select/Select.tsx
57 строк
1 KB
Andrey Chipizubov
fix
23 апр 2023, 17:32
23 апр 2023, 17:32
cc424e9
Код
Авторство
О чём код?
import { ChangeEvent, useMemo } from 'react'; import { classNames, Mods } from '@/shared/lib/classNames/classNames'; import cls from './Select.module.scss'; export interface SelectOption<T extends string> { value: T; content: string; } interface SelectProps<T extends string> { className?: string; label?: string; options?: SelectOption<T>[]; value?: T; onChange?: (value: T) => void; readonly?: boolean; } export const Select = <T extends string>(props: SelectProps<T>) => { const { className, label, options, onChange, value, readonly } = props; const onChangeHandler = (e: ChangeEvent<HTMLSelectElement>) => { if (onChange) { onChange(e.target.value as T); } }; const optionsList = useMemo( () => options?.map((opt) => ( <option className={cls.option} value={opt.value} key={opt.value} > {opt.content} </option> )), [options], ); const mods: Mods = {}; return ( <div className={classNames(cls.Wrapper, mods, [className])}> {label && <span className={cls.label}>{`${label}>`}</span>} <select disabled={readonly} className={cls.select} value={value} onChange={onChangeHandler} > {optionsList} </select> </div> ); };