react multi select下载 - react multi select源代码下载

react multi select

三方组件

v1.1.6

下载

多选择

Kenshoo Multi Select组件

React-Multi选择演示

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组件的高度将使用ItemHeight的值。
`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`	错误的	您的项目将由组提案值分组 - 请参见下面的“项目分组”部分
`showSelectedItemsSearch`	`boolean`	错误的	切换以在捕获列表中显示搜索选项。
`searchSelectedItemsValue`	`string`		目标列表的搜索字段的值。
`searchSelectedItemsChanged`	`function`		函数以处理目标列表的搜索字段的更改。接受价值作为一个参数。
`selectedItemsFilterFunction`	`function`	基于标签	默认情况下，基于目标列表中的搜索查询过滤项目的默认情况与过滤项目相同。
`isLocked`	`function`	`item => item.disabled`	用于定义项目是否已锁定的功能

定制

渲染器

您可以替换以下组件的渲染器：

物品

使用itemRenderer替换默认组件。

每个项目都会收到以下道具：

item - 持有您的项目数据

height - 收到列表定义的高度

onClick要在组件上切换选择的事件

checked - 指示是否选择了项目

indeterminate - 选择所有组件以显示不确定模式

disabled - 定义是否应该禁用项目。单击“选择全部”时，项目将无法单击以进行选择，并且将被忽略。

group - 组项目 - 无复选框，不单击，黑色

选择全部

使用selectAllRenderer替换默认组件。

SelectAll组件接收以下道具：

height - 收到父母定义的高度

onClick触发选择全部/清除所有事件时，请单击

isAllSelected指示选择所有项目

selectAllMessage定义SelectAll组件的消息

selectedIds - 保留所有选定项目的ID列表

选定项目

使用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 - 所有选定ID的数组

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