react multi selectダウンロード-ReactMulti react multi selectソースコードのダウンロード

react multi select

サードパーティ製コンポーネント

v1.1.6

ダウンロード

マルチセレクト

Kenshoo Multi Selectコンポーネント

React-Multi-Selectデモ

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`	{}	カスタムメッセージ。 availabaleメッセージについては、以下をご覧ください。
`showSearch`	`boolean`	真実	トグル検索オプションを表示します。
`showSelectAll`	`boolean`	真実	[リスト内のすべてのオプションを選択する]を表示するトグル。
`showSelectedItems`	`boolean`	真実	選択したアイテムに右ペインを表示するにはトグル。
`wrapperClassName`	`String`	''	ラッパークラス名 - スタイルのカスタマイズに使用されます。
`height`	`number`	400	利用可能なアイテムリストの高さ。
`itemHeight`	`number`	40	リスト内のアイテムの高さ。
`selectedItemHeight`	`number`	`itemHeight`	リスト内の選択されたアイテムの高さ。
`selectAllHeight`	`number`	`itemHeight`	SelectAllコンポーネントの高さは、デフォルトではItemHeightの値を使用します。
`maxSelectedItems`	`number`		選択できる最大アイテムを定義します。
`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またはPass isLocked関数を渡すことにより、特定の選択されたアイテムを無効にすることができます。これは、アイテムが無効になっているかどうかを定義するために使用されます。

例（Selected＆Disabled）：

 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 Propで独自のフィルターメソッドを提供できます。

例（デフォルト）：

 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環境を実行： yarn storybookとhttps：// localhost：6006に向かいます

変更の発行

Githubにプッシュします。
テストする必要があるバグまたは追加されたコードを修正した場合は、テストを追加します。
次のガイドラインでプルリクエストを開きます。
- 機能/バグにタイトルプレフィックスを設定し、説明的なPRタイトルを提供します。
- あなたの変更を説明するあなたのプル要求に説明を追加します。
プルリクエストが発行されると、テストスイートとビルドプロセスが実行され、変更が確認されます。