react multi select
v1.1.6
Kenshoo Multi Select Component
การสาธิต 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 | - | ชื่อคลาส Wrapper - ใช้สำหรับการปรับแต่งสไตล์ |
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 | เท็จ | รายการของคุณจะถูกจัดกลุ่มตามค่า prop กลุ่ม - ดูส่วน "การจัดกลุ่มรายการ" ด้านล่าง |
showSelectedItemsSearch | boolean | เท็จ | สลับเพื่อแสดงตัวเลือกการค้นหาในรายการ detination |
searchSelectedItemsValue | string | ค่าของฟิลด์ค้นหาสำหรับรายการปลายทาง | |
searchSelectedItemsChanged | function | ฟังก์ชั่นเพื่อจัดการกับการเปลี่ยนแปลงของฟิลด์ค้นหาสำหรับรายการปลายทาง ยอมรับค่าเป็นอาร์กิวเมนต์เดียว | |
selectedItemsFilterFunction | function | ขึ้นอยู่กับฉลาก | เหมือนกับ FilterFunction โดยค่าเริ่มต้นเพื่อกรองรายการตามข้อความค้นหาในรายการปลายทาง |
isLocked | function | item => item.disabled | ฟังก์ชั่นที่จะใช้เพื่อกำหนดว่ารายการถูกล็อคหรือไม่ |
คุณสามารถแทนที่การเรนเดอร์ของส่วนประกอบต่อไปนี้:
รายการ
ใช้ itemRenderer เพื่อแทนที่ส่วนประกอบเริ่มต้น
แต่ละรายการได้รับอุปกรณ์ประกอบฉากต่อไปนี้:
item - เก็บข้อมูลรายการของคุณ
height - ได้รับความสูงที่กำหนดโดยรายการ
onClick - เหตุการณ์ที่จะสลับการเลือกส่วนประกอบ
checked - ระบุว่ารายการถูกเลือกหรือไม่
indeterminate - ใช้โดย SELECT ส่วนประกอบทั้งหมดเพื่อแสดงโหมดไม่แน่นอน
disabled - กำหนดว่าควรปิดการใช้งานรายการหรือไม่ รายการจะไม่สามารถคลิกได้สำหรับการเลือกและจะถูกละเว้นเมื่อคลิก "เลือกทั้งหมด"
group - รายการกลุ่ม - ไม่มีช่องทำเครื่องหมายไม่คลิกได้สีดำสี
เลือกทั้งหมด
ใช้ selectAllRenderer เพื่อแทนที่ส่วนประกอบเริ่มต้น
ส่วนประกอบ SelectAll ได้รับอุปกรณ์ประกอบฉากต่อไปนี้:
height - ได้รับความสูงที่กำหนดโดยผู้ปกครอง
onClick - ทริกเกอร์การเลือกทั้งหมด/ล้างกิจกรรมทั้งหมดเมื่อคลิก
isAllSelected - ระบุว่ารายการทั้งหมดถูกเลือก
selectAllMessage - กำหนดข้อความสำหรับส่วนประกอบ SelectAll
selectedIds - ถือรายการรหัสของรายการที่เลือกทั้งหมด
รายการที่เลือก
ใช้ 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 - อาร์เรย์ของรหัสทั้งหมดที่เลือก
clearAll - การโทรกลับเพื่อล้างรายการที่เลือกทั้งหมด
clearAllMessage - ข้อความที่จะแสดงในข้อความที่ชัดเจนทั้งหมด
noneSelectedMessage - ข้อความที่จะแสดงเมื่อไม่มีรายการถูกเลือก
selectedMessage - ข้อความที่จะแสดงเมื่อมีรายการเลือก
รถตัก
ใช้ loaderRenderer เพื่อแทนที่ส่วนประกอบเริ่มต้น
ไม่ได้รับอุปกรณ์ประกอบฉากใด ๆ
ไม่มีรายการ
ใช้ noItemsRenderer เพื่อแทนที่ส่วนประกอบเริ่มต้น
ไม่ได้รับอุปกรณ์ประกอบฉากใด ๆ
เพื่อรองรับตัวกรองรายการที่ซับซ้อนคุณสามารถจัดเตรียมวิธีการกรองของคุณเองใน Prop 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"
} คุณสามารถเพิ่มการจัดกลุ่มลงในรายการของคุณ - เพิ่มกลุ่ม Prop ด้วยชื่อกลุ่มเป็นค่าสำหรับแต่ละรายการของคุณและเพิ่ม Prop ที่มีการจัดกลุ่มเช่นกัน
< 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 }
/> masteryarn installyarn test หรือ yarn test:watchyarn storybook และมุ่งหน้าไปที่ https: // localhost: 6006 
