react multi select
v1.1.6
Kenshoo 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 구성 요소의 높이는 기본적으로 항목 값의 값을 사용합니다. |
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 클릭에서 ALL SELECT/ALL 이벤트를 지우는 트리거
isAllSelected 모든 항목이 선택되었음을 나타냅니다
selectAllMessage SelectAll 구성 요소의 메시지를 정의합니다
selectedIds 선택한 모든 항목의 ID 목록을 보유합니다.
선택된 항목
selectAllRenderer 사용하여 기본 구성 요소를 교체하십시오.
SelectedItem 구성 요소는 다음과 같은 소품을 수신합니다.
item - 항목 데이터를 보유합니다
height - 목록에 정의 된 높이를 수신합니다
item.disabled: true 또는 Pass 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 Message- 항목이 없을 때 표시 할 텍스트
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 installyarn test 또는 yarn test:watchyarn storybook 및 https : // localhost : 6006으로 향하십시오 
