Combobox
Использование
Обязательным параметром является только items. Внутри items может быть такой же вложенный массив items. Формат следующий:
type Items = Array<{
/**
* Значение у item.
*/
value: string;
/**
* Метка-подпись к item.
*/
label: string;
/**
* Сторона открытия вложенного дропдауна относительно текущего элемента.
* @default bottom-start
*/
placement?: Placement;
/**
* Список дочерних items.
*/
items?: Array<ItemOption>;
/**
* Item не активен.
*/
disabled?: boolean;
/**
* Слот для контента слева.
*/
contentLeft?: ReactNode;
/**
* Слот для контента справа.
*/
contentRight?: ReactNode;
/**
* Classname для item.
*/
className?: string;
/**
* Максимальная высота дочернего выпадающего списка.
*/
listMaxHeight?: CSSProperties['height'];
}>;
Тип выбора задается свойством multiple. В одиночном режиме value и defaultValue имеют тип string, в множественном - string[].
В одиночном режиме можно использовать mode="radio", если нужно запретить снятие выбора повторным кликом. В множественном режиме доступны selectAllOptions, isTargetAmount, targetAmount, renderValue и chipClickArea.
Примеры
- Single
- Multiple
- Predefined
- Portal
- Uncontrolled
- Always opened
- Virtual
- Infinite Loading
- Выбрать всё
- Add item
- Render icon
Есть возможность задать значения по дефолту. Также можно управлять состоянием снаружи компонента.
Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.
Для такой реализации имеется пропс portal, который принимает либо ref либо id html-тега.
Также нужно прокинуть проп listWidth, чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала.
value и onChange - опциональные параметры. Если вы хотите uncontrolled вариант компонента - их пробрасывать необязательно.
Свойство alwaysOpened позволяет отображать Combobox всегда открытым. При этом closeAfterSelect игнорируется.
Свойство virtual позволяет виртуализировать выпадающий список. Для настройки высоты списка можно использовать свойство listMaxHeight.
Работает только в одноуровневых списках.
Пример с бесконечной загрузкой элементов в списке.
Работа с кнопкой "Выбрать всё" осуществляется через свойство selectAllOptions только в режиме multiple:
type SelectAllProps = {
checked?: boolean;
indeterminate?: boolean;
label?: string;
onClick?: () => void;
sticky?: boolean;
};
Вся логика выбора элементов и взаимодействия с компонентом лежит на стороне пользователя.
Пример с добавлением нового элемента в список.
renderSelectionIcon - свойство для кастомной настройки иконки выбора элемента. Принимает коллбэк с одним параметром: selected.
Взаимодействие с disabled-элементами
Изнутри компонента взаимодействие с disabled-элементами невозможно. Ниже представлены примеры с selected и unselected disabled-элементом.
TreeView и подсветка найденных элементов
Данный пример показывает реализацию подсветки (highlighting) символов в найденных элементах в режиме treeView.
Использование с React Hook Form и нативной формой
nameИспользуйте свойство name только когда это необходимо. Если value не передан, компонент работает в native-режиме и onChange получает native-like event. В controlled-режиме name не меняет контракт onChange: он вызывается как (value, item).
- Default
- Controller
- Native Form
Работа с react-hook-form через register.
Работа с react-hook-form через controller.
Работа с нативной формой.
Клавиатурная навигация
Данный компонент соответствует требования W3C: Combobox и частично TreeView.