react multi select
v1.1.6
Kenshoo Multi -Select -Komponente
React-Multi-Select-Demo
Multi -Select ist eine einfache Komponente, mit der ein Benutzer mehrere Elemente auf klare und filterbare Weise auswählen kann.
Installation mit NPM:
npm install @kenshooui/react-multi-select --save
Installation mit Garn:
yarn add @kenshooui/react-multi-select
Fügen Sie die CSS der Komponente in Ihre App ein
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 }
/>
) ;
}
} | Name | Typ | Standard | Beschreibung |
|---|---|---|---|
items | List | [] | Liste der Elemente. |
selectedItems | Array | [] | Ausgewählte Liste zu Beginn mit (Untergruppe von Elementen). |
onChange | function | () => {} | Rückruf für geändertes Ereignis. |
loading | boolean | FALSCH | Umschalten, um Ladeanzeige zu zeigen. |
messages | Object | {} | Benutzerdefinierte Nachrichten. Die Verfügbarkeitsnachrichten finden Sie unten. |
showSearch | boolean | WAHR | Umschalten, um die Suchoption anzuzeigen. |
showSelectAll | boolean | WAHR | Umschalten, um zu zeigen, wählen Sie alle Optionen in der Liste. |
showSelectedItems | boolean | WAHR | Schalten Sie um, um ausgewählte Elemente rechts zu sehen. |
wrapperClassName | String | '' ' | Name der Wrapper -Klasse - Wird zum Anpassen des Stils verwendet. |
height | number | 400 | Verfügbare Elemente Listenhöhe. |
itemHeight | number | 40 | die Höhe eines Elements in der Liste. |
selectedItemHeight | number | itemHeight | Die Höhe des ausgewählten Elements in der Liste. |
selectAllHeight | number | itemHeight | Die Höhe der Selectall -Komponente verwendet standardmäßig den Wert des ElementHeight. |
maxSelectedItems | number | Definiert die maximalen Elemente, die ausgewählt werden können, und Overrides showSelectall. | |
filterFunction | function | basierend auf Etikett | Die Funktion, mit der Elemente basierend auf der Suchabfrage filterten. |
searchRenderer | Component | Komponente zum Ersetzen der Standard -Suchkomponente. | |
selectedItemRenderer | Component | Komponente zum Ersetzen der Standardkomponente für ausgewählte Elemente in der Zielliste. | |
loaderRenderer | Component | Komponente zum Ersetzen der Standardladerkomponente. | |
selectAllRenderer | Component | Komponente zum Ersetzen der Standardkomponente. | |
itemRenderer | Component | Komponente zum Ersetzen der Standardelementkomponente in der Quellliste. | |
selectionStatusRenderer | Component | Komponente zum Ersetzen der Standardauswahlstatuskomponente. | |
noItemsRenderer | Component | Komponente zum Ersetzen der Standardkomponente ohne Elemente. | |
searchValue | string | Der Wert des Suchfeldes. | |
searchValueChanged | function | Funktion zum Umgang mit der Änderung des Suchfeldes. Akzeptiert Wert als einzelnes Argument. | |
responsiveHeight | string | 400px | Reaktionshöhe der Verpackungskomponente kann beispielsweise Prozent senden: 70% |
withGrouping | boolean | FALSCH | Ihre Elemente werden nach den Abschnitt "Gruppenpropiten" siehe Abschnitt "Elementgruppierung" unten gruppiert |
showSelectedItemsSearch | boolean | FALSCH | Umschalten, um die Suchoption in der Einfassungsliste anzuzeigen. |
searchSelectedItemsValue | string | Der Wert des Suchfelds für die Zielliste. | |
searchSelectedItemsChanged | function | Funktion zum Umgang mit der Änderung des Suchfelds für die Zielliste. Akzeptiert Wert als einzelnes Argument. | |
selectedItemsFilterFunction | function | basierend auf Etikett | Ist die gleiche wie Filterfunktion standardmäßig, um Elemente basierend auf der Suchabfrage in der Zielliste zu filtern. |
isLocked | function | item => item.disabled | Funktionen, um zu definieren, ob das Element gesperrt ist oder nicht |
Sie können die Renderer der folgenden Komponenten ersetzen:
Artikel
Verwenden Sie den itemRenderer , um die Standardkomponente zu ersetzen.
Jeder Artikel erhält die folgenden Requisiten:
item - Hält Ihre Artikeldaten
height - erhält die von der Liste definierte Höhe
onClick - Das Ereignis zur Umschaltung der Auswahl der Komponente
checked - Gibt an, ob das Element ausgewählt ist
indeterminate - verwendet von der gesamten Komponente, um den unbestimmten Modus anzuzeigen
disabled - definiert, ob das Element deaktiviert werden sollte. Das Element wird nicht für die Auswahl anklickt und wird beim Klicken auf "Alle auswählen" ignoriert.
group - Gruppenartikel - kein Kontrollkästchen, nicht anklickbar, schwarzfarben
Wählen Sie alle aus
Verwenden Sie den selectAllRenderer , um die Standardkomponente zu ersetzen.
Die SelectAll -Komponente empfängt die folgenden Requisiten:
height - erhält die vom Elternteil definierte Höhe
onClick - Löst das gesamte Ereignis auf Klick aus/löschen Sie alle Ereignisse
isAllSelected - zeigt an, dass alle Elemente ausgewählt sind
selectAllMessage - Definiert die Meldung für die SelectAll -Komponente
selectedIds - enthält eine Liste von IDs aller ausgewählten Elemente
Ausgewählter Artikel
Verwenden Sie den selectAllRenderer , um die Standardkomponente zu ersetzen.
Die SelectedItem Komponente empfängt die folgenden Requisiten:
item - Hält Ihre Artikeldaten
height - erhält die von der Liste definierte Höhe
Sie können spezifische ausgewählte Elemente deaktivieren, indem Sie item.disabled: true oder isLocked -Funktion übergeben, mit denen definiert wird, ob das Element deaktiviert ist.
Beispiel (ausgewählt und deaktiviert):
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 }
/>
}Suchen
Verwenden Sie den searchRenderer , um die Standardkomponente zu ersetzen.
Die Search empfängt die folgenden Requisiten:
searchPlaceholder - Definiert die zum Suchgerichtshalle angezeigte Nachricht
onChange - löst die Aktion des Änderns des Suchwerts aus
Auswahlstatus
Verwenden Sie den selectionStatusRenderer , um die Standardkomponente zu ersetzen.
Die SelectionStatus -Komponente empfängt die folgenden Requisiten:
selected - ein Array aller ausgewählten IDs
clearAll - Rückruf zum Löschen aller ausgewählten Elemente
clearAllMessage - Text zum Anzeigen im gesamten Text löschen
noneSelectedMessage - Text zum Anzeigen, wenn keine Elemente ausgewählt werden
selectedMessage - Text zum Anzeigen, wenn Elemente ausgewählt sind
Lader
Verwenden Sie den loaderRenderer , um die Standardkomponente zu ersetzen.
Erhält keine Requisiten.
Keine Gegenstände
Verwenden Sie den noItemsRenderer , um die Standardkomponente zu ersetzen.
Erhält keine Requisiten.
Um komplexe Elementfilter aufzunehmen, können Sie Ihre eigene Filtermethode in der filterFunction -Prob bereitstellen.
Beispiel (Standard):
value => item =>
String ( item . label )
. toLowerCase ( )
. includes ( value . toLowerCase ( ) )Führen Sie die Suche auf der Serverseite durch
value => {
callServer ( value ) . then ( items => this . setState ( { items } ) ) ;
// At the end return the expected method
return item => true ;
} Sie können Ihre eigenen Nachrichten verwenden. Hier ist das Standardmeldungsobjekt:
messages: {
searchPlaceholder : "Search..." ,
noItemsMessage : "No Items..." ,
noneSelectedMessage : "None Selected" ,
selectedMessage : "selected" ,
selectAllMessage : "Select All" ,
clearAllMessage : "Clear All" ,
disabledItemsTooltip : "You can only select 1 file"
} Sie können Ihren Elementen auch gruppieren. Fügen Sie jeder Ihrer Elemente eine Gruppen -Requisitin mit dem Gruppennamen als Wert hinzu und fügen Sie auch mit der Gruppenpropie hinzu.
< 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 oder yarn test:watchyarn storybook und unter https: // localhost: 6006 
