@evo/dropdown

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}
    ...
/>