Nietzsche's Preposterous Moustache

    @evo/dropdown

    0.6.0 • Public • Published

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

    Keywords

    none

    Install

    npm i @evo/dropdown

    DownloadsWeekly Downloads

    22

    Version

    0.6.0

    License

    ISC

    Unpacked Size

    55.9 kB

    Total Files

    11

    Last publish

    Collaborators

    • evo-kazymyrov
    • lequan
    • zemlanin
    • alexander
    • seedofjoy
    • 041616
    • docccdev
    • orhideous
    • tailhook
    • hunson.abadeer
    • mark_tven
    • amostovenko
    • sadkovoy
    • himiranov