react multi select
v1.1.6
Kenshoo Multi Select Component
Demo React-Multi-Select
Multi Select adalah komponen lurus ke depan yang membantu pengguna memilih beberapa item dengan cara yang jelas dan dapat difilter.
Instalasi Menggunakan NPM:
npm install @kenshooui/react-multi-select --save
Instalasi menggunakan benang:
yarn add @kenshooui/react-multi-select
Sertakan CSS komponen di aplikasi Anda
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 }
/>
) ;
}
} | Nama | Jenis | Bawaan | Keterangan |
|---|---|---|---|
items | List | [] | daftar item. |
selectedItems | Array | [] | Daftar yang dipilih untuk memulai dengan (subkelompok item). |
onChange | function | () => {} | Callback untuk acara yang diubah. |
loading | boolean | PALSU | beralih untuk menunjukkan indikasi pemuatan. |
messages | Object | {} | pesan khusus. Silakan lihat di bawah untuk pesan AVAYABALE. |
showSearch | boolean | BENAR | Toggle untuk menampilkan opsi pencarian. |
showSelectAll | boolean | BENAR | Toggle untuk menampilkan Pilih semua opsi dalam daftar. |
showSelectedItems | boolean | BENAR | Toggle untuk menampilkan item yang dipilih panel kanan. |
wrapperClassName | String | '' | Nama kelas pembungkus - Digunakan untuk menyesuaikan gaya. |
height | number | 400 | Tinggi daftar item yang tersedia. |
itemHeight | number | 40 | ketinggian item dalam daftar. |
selectedItemHeight | number | itemHeight | Ketinggian item yang dipilih dalam daftar. |
selectAllHeight | number | itemHeight | Ketinggian komponen SelectAll, secara default akan menggunakan nilai itemHeight. |
maxSelectedItems | number | Menentukan item maksimum yang dapat dipilih, menimpa ShowSelectAll. | |
filterFunction | function | berdasarkan label | Fungsi yang digunakan untuk memfilter item berdasarkan kueri pencarian. |
searchRenderer | Component | Komponen untuk mengganti komponen pencarian default. | |
selectedItemRenderer | Component | Komponen untuk mengganti komponen item yang dipilih default dalam daftar tujuan. | |
loaderRenderer | Component | Komponen untuk mengganti komponen loader default. | |
selectAllRenderer | Component | Komponen untuk mengganti default pilih semua komponen. | |
itemRenderer | Component | Komponen untuk mengganti komponen item default dalam daftar sumber. | |
selectionStatusRenderer | Component | Komponen untuk mengganti komponen status pemilihan default. | |
noItemsRenderer | Component | Komponen untuk menggantikan komponen item tidak ada default. | |
searchValue | string | Nilai bidang pencarian. | |
searchValueChanged | function | Fungsi untuk menangani perubahan bidang pencarian. Menerima nilai sebagai argumen tunggal. | |
responsiveHeight | string | 400px | Tinggi responsif komponen pembungkus, dapat mengirim persen misalnya: 70% |
withGrouping | boolean | PALSU | Item Anda akan dikelompokkan berdasarkan nilai prop grup - lihat bagian "Pengelompokan Item" di bawah ini |
showSelectedItemsSearch | boolean | PALSU | Toggle untuk menampilkan opsi pencarian dalam daftar detination. |
searchSelectedItemsValue | string | Nilai bidang pencarian untuk daftar tujuan. | |
searchSelectedItemsChanged | function | Fungsi untuk menangani perubahan bidang pencarian untuk daftar tujuan. Menerima nilai sebagai argumen tunggal. | |
selectedItemsFilterFunction | function | berdasarkan label | Sama dengan fungsi filter secara default untuk memfilter item berdasarkan kueri pencarian dalam daftar tujuan. |
isLocked | function | item => item.disabled | Fungsi untuk digunakan untuk menentukan apakah item terkunci atau tidak |
Anda dapat mengganti rendering komponen berikut:
Barang
Gunakan itemRenderer untuk mengganti komponen default.
Setiap item menerima alat peraga berikut:
item - Menahan data item Anda
height - menerima tinggi yang ditentukan oleh daftar
onClick - acara untuk beralih pilihan pada komponen
checked - Menunjukkan apakah item tersebut dipilih
indeterminate - Digunakan oleh Select All Component untuk menampilkan mode tak tentu
disabled - Menentukan apakah item harus dinonaktifkan. Item tidak akan dapat diklik untuk dipilih dan akan diabaikan saat mengklik "Pilih Semua".
group - Item Grup - Tidak ada kotak centang, tidak dapat diklik, berwarna hitam
Pilih semua
Gunakan selectAllRenderer untuk mengganti komponen default.
Komponen SelectAll menerima alat peraga berikut:
height - menerima tinggi yang ditentukan oleh induk
onClick - Memicu Event Select All/Clear All On Click
isAllSelected - menunjukkan bahwa semua item dipilih
selectAllMessage - Tentukan pesan untuk komponen SelectAll
selectedIds - memegang daftar ID dari semua item yang dipilih
Item yang dipilih
Gunakan selectAllRenderer untuk mengganti komponen default.
Komponen SelectedItem menerima alat peraga berikut:
item - Menahan data item Anda
height - menerima tinggi yang ditentukan oleh daftar
Anda dapat isLocked item tertentu yang dipilih dengan memberikan item.disabled: true .
Contoh (dipilih & dinonaktifkan):
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 }
/>
}Mencari
Gunakan searchRenderer untuk mengganti komponen default.
Komponen Search menerima alat peraga berikut:
searchPlaceholder - Menentukan pesan yang akan ditampilkan di placeholder pencarian
onChange - memicu tindakan mengubah nilai pencarian
Status seleksi
Gunakan selectionStatusRenderer untuk mengganti komponen default.
Komponen SelectionStatus menerima alat peraga berikut:
selected - Array dari semua ID yang dipilih
clearAll - Callback untuk menghapus semua item yang dipilih
clearAllMessage - Teks untuk ditampilkan di Teks Bersihkan Semua
noneSelectedMessage - teks yang akan ditampilkan saat tidak ada item yang dipilih
selectedMessage - teks yang akan ditampilkan saat ada item yang dipilih
Pemuat
Gunakan loaderRenderer untuk mengganti komponen default.
Tidak menerima alat peraga apapun.
Tidak ada item
Gunakan noItemsRenderer untuk mengganti komponen default.
Tidak menerima alat peraga apapun.
Untuk mengakomodasi filter item yang kompleks, Anda dapat memberikan metode filter Anda sendiri dalam penyangga filterFunction .
Contoh (default):
value => item =>
String ( item . label )
. toLowerCase ( )
. includes ( value . toLowerCase ( ) )Melakukan pencarian di sisi server
value => {
callServer ( value ) . then ( items => this . setState ( { items } ) ) ;
// At the end return the expected method
return item => true ;
} Anda dapat menggunakan pesan Anda sendiri. Berikut adalah objek pesan default:
messages: {
searchPlaceholder : "Search..." ,
noItemsMessage : "No Items..." ,
noneSelectedMessage : "None Selected" ,
selectedMessage : "selected" ,
selectAllMessage : "Select All" ,
clearAllMessage : "Clear All" ,
disabledItemsTooltip : "You can only select 1 file"
} Anda dapat menambahkan juga pengelompokan ke item Anda - tambahkan prop grup dengan nama grup sebagai nilai untuk masing -masing item Anda dan tambahkan prop withgrouping juga.
< 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 atau yarn test:watchyarn storybook dan pergilah ke https: // localhost: 6006 
