react multi select download - react multi select le code source téléchargement

react multi select

Composants tiers

v1.1.6

Télécharger

Multiples sélection

Composant Kenshoo Multi Select

Démo React-Multi-Select

Multi Select est un composant simple qui aide un utilisateur à sélectionner plusieurs éléments de manière claire et filtrable.

Installation

Installation à l'aide de NPM:

 npm install @kenshooui/react-multi-select --save

Installation à l'aide du fil:

 yarn add @kenshooui/react-multi-select

Styles d'importation

Incluez le CSS du composant sur votre application

 import "@kenshooui/react-multi-select/dist/style.css"

Comment utiliser

 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 }
      />
    ) ;
  }
}

Propriétés

Nom	Taper	Défaut	Description
`items`	`List`	[]	liste des éléments.
`selectedItems`	`Array`	[]	Liste sélectionnée pour commencer (sous-groupe d'éléments).
`onChange`	`function`	() => {}	rappel pour l'événement modifié.
`loading`	`boolean`	FAUX	Bascule pour montrer l'indication de chargement.
`messages`	`Object`	{}	messages personnalisés. Veuillez consulter ci-dessous pour les messages disponibles.
`showSearch`	`boolean`	vrai	Basculez pour afficher l'option de recherche.
`showSelectAll`	`boolean`	vrai	Basculez pour afficher Sélectionner toute l'option dans la liste.
`showSelectedItems`	`boolean`	vrai	Basculez pour afficher le volet à droite des éléments sélectionnés.
`wrapperClassName`	`String`	''	Nom de la classe Wrapper - Utilisé pour personnaliser le style.
`height`	`number`	400	Hauteur de liste des articles disponibles.
`itemHeight`	`number`	40	la hauteur d'un élément dans la liste.
`selectedItemHeight`	`number`	`itemHeight`	la hauteur de l'élément sélectionné dans la liste.
`selectAllHeight`	`number`	`itemHeight`	La hauteur du composant SelectAll, par défaut, utilisera la valeur de l'élément.
`maxSelectedItems`	`number`		Définit les éléments maximaux qui peuvent être sélectionnés, remplace ShowSelectall.
`filterFunction`	`function`	Basé sur l'étiquette	La fonction utilisée pour filtrer les éléments en fonction de la requête de recherche.
`searchRenderer`	`Component`		Composant pour remplacer le composant de recherche par défaut.
`selectedItemRenderer`	`Component`		Composant pour remplacer le composant d'élément sélectionné par défaut dans la liste de destination.
`loaderRenderer`	`Component`		Composant pour remplacer le composant de chargeur par défaut.
`selectAllRenderer`	`Component`		Composant Pour remplacer le composant par défaut Sélectionnez tous les composants.
`itemRenderer`	`Component`		Composant pour remplacer le composant d'élément par défaut dans la liste source.
`selectionStatusRenderer`	`Component`		Composant pour remplacer le composant d'état de sélection par défaut.
`noItemsRenderer`	`Component`		Composant Pour remplacer le composant par défaut sans éléments.
`searchValue`	`string`		La valeur du champ de recherche.
`searchValueChanged`	`function`		Fonction pour gérer le champ de changement de recherche. Accepte la valeur comme un seul argument.
`responsiveHeight`	`string`	400px	Hauteur réactive du composant d'emballage, peut envoyer pourcentage par exemple: `70%`
`withGrouping`	`boolean`	FAUX	Vos éléments seront regroupés par les valeurs du groupe de groupe - voir la section "groupement d'articles" ci-dessous
`showSelectedItemsSearch`	`boolean`	FAUX	Basculez pour afficher l'option de recherche dans la liste de détection.
`searchSelectedItemsValue`	`string`		La valeur du champ de recherche pour la liste de destination.
`searchSelectedItemsChanged`	`function`		Fonction pour gérer le champ de changement de recherche pour la liste de destination. Accepte la valeur comme un seul argument.
`selectedItemsFilterFunction`	`function`	Basé sur l'étiquette	Est le même que FilterFunction par défaut pour filtrer les éléments en fonction de la requête de recherche dans la liste de destination.
`isLocked`	`function`	`item => item.disabled`	Fonction à utiliser pour définir si l'élément est verrouillé ou non

Personnalisation

Rendements

Vous pouvez remplacer les rendus des composants suivants:

Article

Utilisez le itemRenderer pour remplacer le composant par défaut.

Chaque élément reçoit les accessoires suivants:

item - Contient les données de votre élément

height - reçoit la hauteur définie par la liste

onClick - L'événement à basculer la sélection sur le composant

checked - indique si l'élément est sélectionné

indeterminate - utilisé par le composant Sélectionnez All pour afficher le mode indéterminé

disabled - Définit si l'élément doit être désactivé. L'article ne sera pas cliquable pour la sélection et sera ignoré lors de la clic "Sélectionnez tout".

group - Élément de groupe - Pas de case, non cliquable, couleur noire

Sélectionnez tout

Utilisez le selectAllRenderer pour remplacer le composant par défaut.

Le composant SelectAll reçoit les accessoires suivants:

height - reçoit la hauteur définie par le parent

onClick - déclenche l'événement SELECT ALL / Effacer tout le clic

isAllSelected - indique que tous les éléments sont sélectionnés

selectAllMessage - Définit le message du composant SelectAll

selectedIds - détient une liste d'identifices de tous les éléments sélectionnés

Article sélectionné

Utilisez le selectAllRenderer pour remplacer le composant par défaut.

Le composant SelectedItem reçoit les accessoires suivants:

item - Contient les données de votre élément

height - reçoit la hauteur définie par la liste

Vous pouvez désactiver des éléments sélectionnés spécifiques en passant isLocked item.disabled: true .

Exemple (sélectionné et désactivé):

 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 }
        />
}

Recherche

Utilisez le searchRenderer pour remplacer le composant par défaut.

Le composant Search reçoit les accessoires suivants:

searchPlaceholder - définit le message à afficher dans l'espace réservé de recherche

onChange - déclenche l'action de modifier la valeur de recherche

Statut de sélection

Utilisez le selectionStatusRenderer pour remplacer le composant par défaut.

Le composant SelectionStatus reçoit les accessoires suivants:

selected - un tableau de tous les ID sélectionnés

clearAll - rappel pour effacer tous les éléments sélectionnés

clearAllMessage - Texte à afficher dans le texte effacer tout le texte

noneSelectedMessage - Texte à afficher lorsqu'aucun élément n'est sélectionné

selectedMessage - Texte à afficher lorsqu'il y a des éléments sélectionnés

Chargeur

Utilisez le loaderRenderer pour remplacer le composant par défaut.

Ne reçoit aucun accessoire.

Pas d'articles

Utilisez le noItemsRenderer pour remplacer le composant par défaut.

Ne reçoit aucun accessoire.

Fonction de recherche

Afin d'accueillir des filtres d'articles complexes, vous pouvez fournir votre propre méthode de filtre dans l'hélice filterFunction .

Exemple (par défaut):

 value => item =>
  String ( item . label )
    . toLowerCase ( )
    . includes ( value . toLowerCase ( ) )

Effectue la recherche côté serveur

 value => {
    callServer ( value ) . then ( items => this . setState ( { items } ) ) ;
    // At the end return the expected method
    return item => true ;
}

Messages

Vous pouvez utiliser vos propres messages. Voici l'objet des messages par défaut:

 messages: {
    searchPlaceholder : "Search..." ,
    noItemsMessage : "No Items..." ,
    noneSelectedMessage : "None Selected" ,
    selectedMessage : "selected" ,
    selectAllMessage : "Select All" ,
    clearAllMessage : "Clear All" ,
    disabledItemsTooltip : "You can only select 1 file"
  }

Groupement d'articles

Vous pouvez également ajouter un regroupement à vos éléments - ajouter un accessoire de groupe avec le nom de groupe en valeur à chacun de vos éléments et ajouter également un accessoire avec un groupe de groupe.

 < 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 }
  />

Comment contribuer

Configuration de l'environnement de développement

Fourk le référentiel et créez votre branche à partir de master .
Installer le projet: yarn install
Exécuter des tests: yarn test ou yarn test:watch
Exécutez Dev Environment: yarn storybook et dirigez-vous vers https: // localhost: 6006

Émettre un changement

Push to github.
Si vous avez corrigé un bogue ou un code ajouté qui doit être testé, ajoutez des tests.
Ouvrez une demande de traction avec les directives suivantes:
- Définissez le préfixe du titre sur la fonctionnalité / bogue et fournissez un titre de RP descriptif.
- Ajoutez une description à votre demande de traction décrivant votre modification.
Une fois votre demande de traction émise, la suite de tests et les processus de construction s'exécuteront et votre modification sera examinée.