rc-select

Компонент выбора для React.

[![Скачиваемости NPM][download-image]][download-url]

Скриншоты

Основные возможности

• поддерживает IE11+, Chrome, Firefox, Safari

Клавиатура

• Открытие выпадающего списка (фокус на поле ввода || фокус и клик)
• Навигация по меню с помощью клавиш вниз/вверх/Enter

Установка

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

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

import Select, { Option } from 'rc-select';
import 'rc-select/assets/index.css';

export default () => (
  <Select>
    <Option value="jack">jack</Option>
    <Option value="lucy">lucy</Option>
    <Option value="yiminghe">yiminghe</Option>
  </Select>
);

API### Выбор свойств| name | description | type | default |

| --- | --- | --- | --- | --- | | id | html id для компонента | String | '' | | className | дополнительный css класс корневого узла | String | '' | | data-* | html data атрибуты для компонента | String | '' | | prefixCls | префикс класса | String | '' | | animation | имя анимации выпадающего списка. Поддерживается только slide-up | String | '' | | transitionName | имя css анимации выпадающего списка | String | '' | | choiceTransitionName | имя css анимации для выбранных элементов в режиме multiple | String | '' | | dropdownMatchSelectWidth | совпадает ли ширина выпадающего списка со шириной select | boolean | true | | dropdownClassName | дополнительный className для выпадающего списка | String | - | | dropdownStyle | дополнительный стиль для выпадающего списка | React.CSSProperties | {} | | dropdownAlign | дополнительное выравнивание для выпадающего списка | AlignType | {} | | dropdownMenuStyle | дополнительный стиль для выпадающего меню | Object | React.CSSProperties | | notFoundContent | контент для отображения, когда нет совпадений | ReactNode | 'Not Found' | | tokenSeparators | разделитель для токенизации в режиме тега/множественного выбора | string[]? | | | open | управление открытием select | boolean | | | defaultOpen | управление стандартным открытием select | boolean | | | placeholder | placeholder для select | React Node | | | showSearch | отображение поля поиска в режиме single | boolean | true | | allowClear | возможность очистки | boolean | { clearIcon? : ReactNode } | false || tags | Когда включен режим тегов, пользователь может выбирать из существующих опций или создавать новый тег. Выбор первого варианта означает, что пользователь ввел значение в поле поиска. | boolean | false | | tagRender | Рендеринг пользовательских тегов | (props: CustomTagProps) => ReactNode | - | | maxTagTextLength | Максимальная длина текста тега для отображения | number | - | | maxTagCount | Максимальное количество тегов для отображения | number | - | | maxTagPlaceholder | Placeholder для пропущенных значений | ReactNode/функция(omittedValues) | - | | combobox | Включение режима combobox (не может быть установлено multiple одновременно) | boolean | false | | multiple | Множественный выбор | boolean | false | | disabled | Отключение select | boolean | false | | filterOption | Фильтрация опций по значению ввода | По умолчанию фильтрация по опции's optionFilterProp свойству's значение | boolean | true/Function(inputValue: string, option: Option) | | optionFilterProp | Свойство опции, значение которого будет использоваться для фильтрации, если optionFilterProp равно true | String | 'value' | | filterSort | Функция сортировки для сортировки поиска опций, см. Array.sort's compareFunction. | Function(optionA: Option, optionB: Option) | - | | optionLabelProp | Отображение значения опции или дочерних элементов опции как содержимого select | String: 'value'/'children' | 'value' | | defaultValue | Начальное выбранное значение опции(ов) | String | String[] | - | | value | Текущее выбранное значение опции(ов) | String | String[] | {key: String, label: React.Node} | {key: String, label: React.Node}[] | - | | labelInValue | включение метки в значение, см. выше тип value. Не поддерживается режим combobox | boolean | false | | backfill | заполнение select опции в поле поиска (работает только в режиме single и combobox) | boolean | false | | onChange | вызывается при выборе опции или изменении значения ввода (combobox) | function(value, option:Option | Option[]) | - | | onSearch | вызывается при изменении значения ввода | function | - | | onBlur | вызывается при потере фокуса | function | - | | onFocus | вызывается при получении фокуса | function | - | | onPopupScroll | вызывается при прокрутке меню | function | - | | onSelect | вызывается при выборе опции. Параметр - значение опции и экземпляр опции | Function(value, option:Option) | - | | onDeselect | вызывается при снятии выбора опции. Параметр - значение опции. Вызывается только для режима multiple или tags | Function(value, option:Option) | - | | onInputKeyDown | вызывается при нажатии клавиши в поле ввода | Function(event) | - | | defaultActiveFirstOption | активация первой опции по умолчанию | boolean | true | | getPopupContainer | контейнер, в который рендерится выпадающее меню select | function(trigger:Node):Node | function(){return document.body;} | | getInputElement | кастомизация элемента ввода | function(): Element | - | | showAction | действия, которые вызывают выпадающее меню | String[]? | - | | autoFocus | фокусировка select после монтирования | boolean | - | | autoClearSearchValue | автоматическое очищение значения поля поиска при выборе/снятии выбора в режиме multiple select | boolean | true | | prefix | указание префикса select (иконка или текст) | ReactNode | - | | suffixIcon | указание иконки стрелки select | ReactNode | - | | clearIcon | иконка очистки | ReactNode | - | | removeIcon | иконка удаления | ReactNode | - | | menuItemSelectedIcon | иконка выделенного элемента | ReactNode | (props: MenuItemProps) => ReactNode | - | | dropdownRender | отрисовка пользовательского выпадающего меню | (menu: React. Node) => ReactNode | - | | loading | показывать иконку загрузки в стрелке | boolean | false | | virtual | отключить виртуальное прокручивание | boolean | true | | direction | направление выпадающего меню | 'ltr' | 'rtl' | 'ltr' | | optionRender | пользовательская отрисовка опций | (oriOption: FlattenOptionData<BaseOptionType>, info: { index: number }) => React. Node | - | | labelRender | пользовательская отрисовка метки | (props: LabelInValueType) => React. Node | - | | maxCount | максимальное количество элементов, которое можно выбрать | number | - |

Методы| имя | описание | параметры | возврат |

| ----- | ------------------------- | ---------- | ------ | | focus | программное фокусирование select | - | - | | blur | программное размытие select | - | - |

Пропсы опции

Пропсы группы опций

Разработка

npm install
npm start

Пример

локальный пример: http://localhost:9001/онлайн пример: http://select.react-component.now.sh/

Тестовый случай

npm test

Покрытие

npm run coverage

Лицензия

rc-select распространяется под лицензией MIT.