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