Select

Использование

Обязательным параметром являются: items, value и onChange. Внутри items может быть такой же вложенный массив items. Формат следующий:

type Items = Array<{
        /**
         *  Значение у item
         */
        value: string;
        /**
         * Метка-подпись к item
         */
        label: string;
        /**
         * Список дочерних items.
         */
        items?: Array<ItemOption>;
        /**
         * Item не активен
         */
        disabled?: boolean;
        /**
         * Слот для контента слева
         */
        contentLeft?: ReactNode;
        /**
         * Слот для контента справа
         */
        contentRight?: ReactNode;
        /**
         * Выбранный item.
         * @deprecated
         */
        isActive?: boolean;
        /**
         * Кастомный цвет текста
         * @deprecated
         */
        color?: string;
        /**
         * Айтем не активен
         * @deprecated использовать disabled
         */
        isDisabled?: boolean;
    }>;

Тип выбора селекта - одиночный или множественный зависит от типа value и onChange. В одиночном value - string, в множественном - Array<string>. Select может выглядеть как Button и как Textfield. За это отвечает пропс - target.
Есть возможность прокидывать компонент EmptyState в пропс renderList для изменения содержимого выпадающего окна.
Это нужно в случаях, когда произошла ошибка при загрузке items, либо когда items пустой. Более подробно в примерах.

Примеры

Textfield

В режиме textfield доступны только следующие варианты view: default, warning, positive и negative.

Live Editor

Result

Open in CodeSandbox

Button

В режиме button недоступны следующие пропсы: contentLeft, label, labelPlacement, placeholder и helperText.

Live Editor

Result

Open in CodeSandbox

Predefined

Есть возможность задать значения по дефолту (главное, чтобы они находились в items). Также можно управлять состоянием снаружи селекта.

Live Editor

Result

Open in CodeSandbox

Render value

Пропс renderValue для кастомной настройки value внутри таргета. Принимает коллбэк с двумя параметрами: value и label.

Live Editor

Result

Open in CodeSandbox

Render item

renderTarget - для кастомной настройки таргета в Select. Принимает коллбэк с один параметром: value. Пропс renderItem для кастомной настройки айтема в выпадающем списке. Принимает коллбэк с двумя параметрами: value и label. В примере использован другой наш компонент - Cell.

Live Editor

Result

Open in CodeSandbox

Portal

Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.
Для такой реализации имеется пропс portal, который принимает либо ref либо id html-тега.
Также нужно прокинуть проп listWidth, чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала.

Live Editor

Result

Open in CodeSandbox

Uncontrolled

value и onChange - опциональные параметры. Если вы хотите uncontrolled вариант компонента - их пробрасывать необязательно.

Live Editor

Result

Open in CodeSandbox

Клавиатурная навигация

Данный компонент соответствует требования W3C: Combobox и частично TreeView.

• Tab - закрывает дропдаун. Перемещает фокус на следующий элемент на странице;
• Enter - открывает/закрывает дропдаун. Если на элементе - выбирает его. Если у элемента есть дочерний дропдаун - открывает его, выбор элемента не происходит;
• Space - открывает/закрывает дропдаун. Если на элементе - выбирает его и все дочерние элементы.
• Home - открывает дропдаун и перемещает фокус на первый элемент;
• End - открывает дропдаун и перемещает фокус на последний элемент;
• PageUp - перемещает фокус на 10 элементов выше либо в начало списка;
• PageDown - перемещает фокус на 10 элементов ниже либо в конце списка;
• ArrowUp - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше;
• ArrowDown - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже;
• ArrowRight - если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент; Если фокус на таргете - переходит в режим выбора чипа.
• ArrowLeft - закрывает текущий список и перемещает фокус на предыдущий; Если фокус на таргете - переходит в режим выбора чипа.
• Backspace - только если фокус на чипе - снимает выбор с текущего значения;