react multi select Download - react multi select Source Code Скачать

react multi select

Сторонние компоненты

v1.1.6

Скачать

Multi Select

Kenshoo Multi Select Component

React-Multi-Select Demo

Multi Select - это простой компонент, который помогает пользователю выбирать несколько элементов четким и отфильтерным образом.

Установка

Установка с использованием NPM:

 npm install @kenshooui/react-multi-select --save

Установка с использованием пряжи:

 yarn add @kenshooui/react-multi-select

Стили импорта

Включите CSS компонента в ваше приложение

 import "@kenshooui/react-multi-select/dist/style.css"

Как использовать

 import React , { Component } from "react" ;
import MultiSelect from "@kenshooui/react-multi-select" ;

class Example extends Component {
  constructor ( props ) {
    super ( props ) ;
    this . handleChange = this . handleChange . bind ( this ) ;
    this . state = {
      items : [
        { id : 0 , label : "item 1" } ,
        { id : 2 , label : "item 2" , disabled : true } ,
        { id : 3 , label : "item 3" , disabled : false } ,
        { id : 4 , label : "item 4" }
      ] ,
      selectedItems : [ ]
    } ;
  }

  handleChange ( selectedItems ) {
    this . setState ( { selectedItems } ) ;
  }
  render ( ) {
    const { items , selectedItems } = this . state ;
    return (
      < MultiSelect
        items = { items }
        selectedItems = { selectedItems }
        onChange = { this . handleChange }
      />
    ) ;
  }
}

Характеристики

Имя	Тип	По умолчанию	Описание
`items`	`List`	[]	Список элементов.
`selectedItems`	`Array`	[]	Выбранный список для начала с (подгруппа элементов).
`onChange`	`function`	() => {}	обратный вызов для изменения события.
`loading`	`boolean`	ЛОЖЬ	Переверните, чтобы показать индикацию загрузки.
`messages`	`Object`	{}	пользовательские сообщения. Пожалуйста, смотрите ниже для получения сообщений.
`showSearch`	`boolean`	истинный	Переверните, чтобы показать опцию поиска.
`showSelectAll`	`boolean`	истинный	Переверните, чтобы показать выберите «Все вариант в списке».
`showSelectedItems`	`boolean`	истинный	Переверните, чтобы показать выбранные элементы правой панель.
`wrapperClassName`	`String`	''	Имя класса обертки - используется для настройки стиля.
`height`	`number`	400	Доступные элементы списка высота.
`itemHeight`	`number`	40	Высота предмета в списке.
`selectedItemHeight`	`number`	`itemHeight`	Высота выбранного элемента в списке.
`selectAllHeight`	`number`	`itemHeight`	Высота компонента Selectall, по умолчанию будет использовать значение ItemeHeight.
`maxSelectedItems`	`number`		Определяет максимальные элементы, которые могут быть выбраны, переопределяет ShowSelectall.
`filterFunction`	`function`	на основе этикетки	Функция, используемая для фильтрации элементов на основе поискового запроса.
`searchRenderer`	`Component`		Компонент для замены компонента поиска по умолчанию.
`selectedItemRenderer`	`Component`		Компонент для замены выбранного компонента элемента по умолчанию в списке назначения.
`loaderRenderer`	`Component`		Компонент для замены компонента загрузчика по умолчанию.
`selectAllRenderer`	`Component`		Компонент для замены по умолчанию выберите все компонент.
`itemRenderer`	`Component`		Компонент для замены компонента элемента по умолчанию в списке исходных источников.
`selectionStatusRenderer`	`Component`		Компонент для замены компонента состояния выбора по умолчанию.
`noItemsRenderer`	`Component`		Компонент для замены компонента по умолчанию.
`searchValue`	`string`		Значение поля поиска.
`searchValueChanged`	`function`		Функция для обработки изменения поля поиска. Принимает ценность как единственный аргумент.
`responsiveHeight`	`string`	400px	Отвечая высота компонента обертывания, может отправить процент, например: `70%`
`withGrouping`	`boolean`	ЛОЖЬ	Ваши элементы будут сгруппированы по значениям Group PROP - см. Раздел «Группа элементов» ниже
`showSelectedItemsSearch`	`boolean`	ЛОЖЬ	Переверните, чтобы показать опцию поиска в списке утилизации.
`searchSelectedItemsValue`	`string`		Значение поля поиска для списка назначения.
`searchSelectedItemsChanged`	`function`		Функция для обработки изменения поля поиска для списка назначения. Принимает ценность как единственный аргумент.
`selectedItemsFilterFunction`	`function`	на основе этикетки	Это то же самое, что и FilterFunction по умолчанию, чтобы фильтровать элементы на основе поискового запроса в списке назначения.
`isLocked`	`function`	`item => item.disabled`	Функция, которая будет использоваться для определения того, заблокирован ли элемент или нет

Настройка

Рендереры

Вы можете заменить визуализаторы следующих компонентов:

Элемент

Используйте itemRenderer , чтобы заменить компонент по умолчанию.

Каждый элемент получает следующие реквизиты:

item - содержит данные вашего элемента

height - получает высоту, определенную списком

onClick - событие, чтобы переключить выбор на компоненте

checked - указывает, выбран ли элемент

indeterminate - используется в Select All Component для отображения неопределенного режима

disabled - определяет, должен ли элемент быть отключен. Элемент не будет кликом для выбора и будет игнорироваться при нажатии «Выберите все».

group - элемент группы - без флажки, не кликабельно, черный цвет

Выберите все

Используйте selectAllRenderer , чтобы заменить компонент по умолчанию.

Компонент SelectAll получает следующие реквизиты:

height - получает высоту, определенную родителем

onClick - запускает выбор All/очистить все событие на щелчке

isAllSelected - указывает, что все элементы выбираются

selectAllMessage - Определяет сообщение для компонента SelectAll

selectedIds - содержит список идентификаторов всех выбранных элементов

Выбранный элемент

Используйте selectAllRenderer , чтобы заменить компонент по умолчанию.

Компонент SelectedItem получает следующие реквизиты:

item - содержит данные вашего элемента

height - получает высоту, определенную списком

Вы можете отключить конкретные выбранные элементы, передавая item.disabled: true или isLocked функцию, которая будет использоваться для определения того, отключен ли элемент.

Пример (выбранный и отключен):

 function Exemple ( ) {
  const items = [ { id : 0 , label : 'item 0' } , { id : 1 , label : 'item 1' } ] ;
  return (
        < MultiSelect
          isLocked = { item => item . label === 'item 0' }
          items = { items }
          selectedItems = { items }
        />
}

Поиск

Используйте searchRenderer , чтобы заменить компонент по умолчанию.

Компонент Search получает следующий реквизит:

searchPlaceholder - определяет сообщение для отображения в Поисковом заполнителе

onChange - запускает действие изменения значения поиска

Статус отбора

Используйте selectionStatusRenderer , чтобы заменить компонент по умолчанию.

Компонент SelectionStatus получает следующие реквизиты:

selected - массив всех выбранных идентификаторов

clearAll - обратный вызов, чтобы очистить все выбранные элементы

clearAllMessage - текст для отображения в прозрачном

noneSelectedMessage - текст для отображения, когда элементы не выбран

selectedMessage - текст для отображения при выбранных элементах

Погрузчик

Используйте loaderRenderer , чтобы заменить компонент по умолчанию.

Не получает никаких реквизитов.

Нет предметов

Используйте noItemsRenderer , чтобы заменить компонент по умолчанию.

Не получает никаких реквизитов.

Функция поиска

Чтобы приспособить сложные фильтры предметов, вы можете предоставить свой собственный метод фильтра в опоре filterFunction .

Пример (по умолчанию):

 value => item =>
  String ( item . label )
    . toLowerCase ( )
    . includes ( value . toLowerCase ( ) )

Выполняет поиск на стороне сервера

 value => {
    callServer ( value ) . then ( items => this . setState ( { items } ) ) ;
    // At the end return the expected method
    return item => true ;
}

Сообщения

Вы можете использовать свои собственные сообщения. Вот объект сообщений по умолчанию:

 messages: {
    searchPlaceholder : "Search..." ,
    noItemsMessage : "No Items..." ,
    noneSelectedMessage : "None Selected" ,
    selectedMessage : "selected" ,
    selectAllMessage : "Select All" ,
    clearAllMessage : "Clear All" ,
    disabledItemsTooltip : "You can only select 1 file"
  }

Группировка предмета

Вы можете добавить также группировку к своим элементам - добавить групповую опору с именем группы в качестве значения для каждого из ваших элементов, а также добавить в группу опору.

 < MultiSelect
    items = { [ { id : 1 , label : "item1" , group : "group1" } ,
            { id : 2 , label : "item2" , group : "group1" }
            { id : 3 , label : "item3" , group : "group2" } ] }
    withGrouping
    selectedItems = { selectedItems }
    onChange = { this . handleChange }
  />

Как внести свой вклад

Создание среды разработки

Разбейте репозиторий и создайте свою ветвь от master .
Установите проект: yarn install
Запустить тесты: yarn test или yarn test:watch
Запустите Dev Environment: yarn storybook и отправляйтесь в https: // localhost: 6006

Выпустив изменения

Толкнуть к GitHub.
Если вы исправили ошибку или добавленный код, который следует тестировать, добавьте тесты.
Откройте запрос на тягу со следующими рекомендациями:
- Установите префикс заголовка для функции/ошибки и предоставьте описательный пиар.
- Добавьте описание в свой запрос на притяжение, описывающее ваше изменение.
После того, как ваш запрос на привлечение будет выпущен, тестовый набор и процессы сборки будут выполнены, и ваши изменения будут рассмотрены.