@evo/dropdown
v0.6.0
Published
Dropdown component
Downloads
276
Maintainers
Keywords
Readme
Dropdown
Компонент для вывода дропдауна (замена RDropdown и RChosen, по сути это их порт с coffeeScript на jsx).
Usage
Пример:
import Dropdown from '@evo/dropdown'
import ddpStyle from '@evo/dropdown/dist/themeWhite.css'
const Example = () => (
<Dropdown
css={ddpStyle}
options={someOptions}
onSelect={props.onSelect}
/>
);
Dependencies
В проекте, который будет использовать данный компонент, должны быть установлены следующие зависимости:
"peerDependencies": {
"classnames": "^2.2.5",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"prop-types": "^15.6.1",
"react-onclickoutside": "^6.7.1"
}
API
css
isRequred
Используется для стилизирования компонента. Для подключения стандартных тем на проект:
import ddpStyle from '@evo/tooltip/dist/themeWhite.css'
...
<Dropdown
css={ddpStyle}
...
/>
...
Подключение своих стилей такое же простое:
import ddpStyle from 'path_to_your_styles.css'
...
<Dropdown
css={ddpStyle}
...
/>
...
options
isRequred
Массив с элементами дропдауна.
[{value: 0, text: "option 1"}, {value: 33, text: "option 2"}]
onSelect
isRequred
Доступные параметры option - текущий элемент, e - ивент.
placeholder
Текст в дропдауне когда ничего не выбрано.
placeholderView
Кастомный вид плейсхолдера. Есть доступ к выбраному и элементу и его тексту (selectedItem, selectedText). По умолчанию выводится только выбраный текст.
const customPlaceholder = (item, selectedText) => (
<span id={item.value}>
{selectedText}
</span>
);
<Dropdown
css={ddpStyle}
placeholderView={customPlaceholder}
...
/>
fixedSelectedText
Переданый текст будет в дропдауне всегда вне зависимости от того выбран какойто элемент или нет. По умолчанию: false
value
Проставит дефолтное значение при инициализации.
valuePropName
Название ключа со значением в options. По умолчанию value
name
Название для скрытого инпута который сохраняет выбраное значение.
<input type='hidden' name={this.props.name}>
onOpen
onClose
disabled
По умолчанию: false
onDisabledSelect
isOpen
По умолчанию: false
showPlaceholderOnEmptyOptVal
По умолчанию: false
itemView
Кастомный вид элемента в выпадайке. Есть доступ к элементу (item). По умолчанию выводится просто текст.
const customItem = (item) => (
<span id={item.value}>
{item.someAdditionalProperty} - {item.text}
</span>
);
<Dropdown
css={ddpStyle}
customItem={customPlaceholder}
...
/>
showSelectedInList
Показывать ли выбраный пункт в списке дропдауна. По умолчанию: false
AddDataQaid
Добавляет атрибут data-qaid с переданным значением на рутовый элемент дропдауна.
lastItemView
Вид дополнительного последнего элемента в выпадайке. По умолчанию не выводится.
getFilteredOptions({filterValue, options})
Функция для кастомной фильтрации элементов
onInputChange({oldFilterValue, newFilterValue})
Функция для обработки события изменения фильтра
onEmptyInput({oldFilterValue})
Функция для обработки события пустого списка отфильтрованных опций
isSearchable
Добавляет поисковую строку в дропдаун. По сути превращается в RChosen.
immutable
arrowView
Кастомный вид стрелки. Принимает css.arrow. По умолчанию выводится дефолтная стрелочка.
const Arrow = (className) => (
<svg
className={className}
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 129 129'
>
<path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' />
</svg>
);
<Dropdown
css={ddpStyle}
arrow={Arrow}
...
/>