react multi select

Múltiple selección

Componente múltiple kenshoo

react-multi-selección de demostración

Multi Select es un componente directo que ayuda a un usuario a seleccionar múltiples elementos de manera clara y filtrable.

Instalación

Instalación con NPM:

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

Instalación con hilo:

 yarn add @kenshooui/react-multi-select

Estilos de importación

Incluya el CSS del componente en su aplicación

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

Cómo usar

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

Propiedades

Nombre	Tipo	Por defecto	Descripción
items	List	[]	lista de elementos.
selectedItems	Array	[]	Lista seleccionada para comenzar con (subgrupo de elementos).
onChange	function	() => {}	devolución de llamada para eventos cambiados.
loading	boolean	FALSO	Alternar para mostrar una indicación de carga.
messages	Object	{}	mensajes personalizados. Consulte a continuación los mensajes de DisponseBale.
showSearch	boolean	verdadero	Alternar para mostrar la opción de búsqueda.
showSelectAll	boolean	verdadero	Alternar para mostrar seleccionar todas las opciones en la lista.
showSelectedItems	boolean	verdadero	Alternar para mostrar los elementos seleccionados Panel derecho.
wrapperClassName	String	''	Nombre de la clase de envoltura: utilizado para personalizar el estilo.
height	number	400	Altura de la lista de artículos disponibles.
itemHeight	number	40	La altura de un elemento en la lista.
selectedItemHeight	number	itemHeight	La altura del elemento seleccionado en la lista.
selectAllHeight	number	itemHeight	La altura del componente SelectAll, de forma predeterminada, utilizará el valor del itemHeight.
maxSelectedItems	number		Define los elementos máximos que se pueden seleccionar, anula ShowSelectall.
filterFunction	function	Basado en la etiqueta	La función utilizada para filtrar elementos según la consulta de búsqueda.
searchRenderer	Component		Componente para reemplazar el componente de búsqueda predeterminado.
selectedItemRenderer	Component		Componente para reemplazar el componente de elemento seleccionado predeterminado en la lista de destino.
loaderRenderer	Component		Componente para reemplazar el componente del cargador predeterminado.
selectAllRenderer	Component		Componente para reemplazar el componente Seleccionar todo el componente predeterminado.
itemRenderer	Component		Componente para reemplazar el componente de elemento predeterminado en la lista de origen.
selectionStatusRenderer	Component		Componente para reemplazar el componente de estado de selección predeterminado.
noItemsRenderer	Component		Componente para reemplazar el componente predeterminado sin elementos.
searchValue	string		El valor del campo de búsqueda.
searchValueChanged	function		Función para manejar el campo de cambio de búsqueda. Acepta el valor como un solo argumento.
responsiveHeight	string	400px	La altura receptiva del componente de envoltura puede enviar porcentaje, por ejemplo: 70%
withGrouping	boolean	FALSO	Sus elementos serán agrupados por los valores de apoyo del grupo: consulte la sección "Agrupación de elementos" a continuación
showSelectedItemsSearch	boolean	FALSO	Alternar para mostrar la opción de búsqueda en la lista de detención.
searchSelectedItemsValue	string		El valor del campo de búsqueda para la lista de destino.
searchSelectedItemsChanged	function		Función para manejar el campo de cambio de búsqueda para la lista de destino. Acepta el valor como un solo argumento.
selectedItemsFilterFunction	function	Basado en la etiqueta	Es lo mismo que FilterFunction de forma predeterminada para filtrar elementos en función de la consulta de búsqueda en la lista de destino.
isLocked	function	item => item.disabled	Función que se utilizará para definir si el elemento está bloqueado o no

Personalización

Renderizadores

Puede reemplazar los renderizadores de los siguientes componentes:

Artículo

Use el itemRenderer para reemplazar el componente predeterminado.

Cada artículo recibe los siguientes accesorios:

item : contiene los datos de su elemento

height : recibe la altura definida por la lista

onClick : el evento para alternar la selección en el componente

checked : indica si el artículo está seleccionado

indeterminate : utilizado por el componente seleccionar todo para mostrar el modo indeterminado

disabled : define si el elemento debe deshabilitarse. El elemento no se puede hacer clic para la selección y se ignorará al hacer clic en "Seleccionar todo".

group - Elemento de grupo - Sin casilla de verificación, no se puede hacer clic, de color negro

Seleccionar todo

Use el selectAllRenderer para reemplazar el componente predeterminado.

El componente SelectAll recibe los siguientes accesorios:

height : recibe la altura definida por el padre

onClick : desencadena el evento seleccionar todo/borrar todo al hacer clic

isAllSelected - indica que todos los elementos están seleccionados

selectAllMessage : define el mensaje para el componente SelectAll

selectedIds : contiene una lista de ID de todos los elementos seleccionados

Artículo seleccionado

Use el selectAllRenderer para reemplazar el componente predeterminado.

El componente SelectedItem recibe los siguientes accesorios:

item : contiene los datos de su elemento

height : recibe la altura definida por la lista

Puede deshabilitar elementos seleccionados específicos pasando item.disabled: true o isLocked que se usará para definir si el elemento está deshabilitado.

Ejemplo (seleccionado y deshabilitado):

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

Buscar

Use el searchRenderer para reemplazar el componente predeterminado.

El componente Search recibe los siguientes accesorios:

searchPlaceholder : define el mensaje para mostrar en el marcador de posición de búsqueda

onChange : desencadena la acción de cambiar el valor de búsqueda

Estado de selección

Use el selectionStatusRenderer para reemplazar el componente predeterminado.

El componente SelectionStatus recibe los siguientes accesorios:

selected : una matriz de todas las ID seleccionadas

clearAll : devolución de llamada para borrar todos los elementos seleccionados

clearAllMessage - texto para mostrar en el texto Borrar todo

noneSelectedMessage : texto para mostrar cuando no se seleccionan elementos

selectedMessage : texto para mostrar cuando hay elementos seleccionados

Cargador

Use el loaderRenderer para reemplazar el componente predeterminado.

No recibe ningún accesorio.

No hay artículos

Use el noItemsRenderer para reemplazar el componente predeterminado.

No recibe ningún accesorio.

Función de búsqueda

Para acomodar filtros de elementos complejos, puede proporcionar su propio método de filtro en el accesorio filterFunction .

Ejemplo (predeterminado):

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

Realiza la búsqueda en el lado del servidor

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

Mensajes

Puedes usar tus propios mensajes. Aquí está el objeto de mensajes predeterminado:

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

Agrupación de artículos

Puede agregar también agrupación a sus elementos: agregue un accesorio de grupo con el nombre del grupo como valor para cada uno de sus elementos y también agregue con accesorio de grupo.

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

Cómo contribuir

Configuración del entorno de desarrollo

1. Bifurca el repositorio y crea su rama desde master .
2. Instale el proyecto: yarn install
3. Ejecutar pruebas: yarn test o yarn test:watch
4. Ejecutar el entorno de desarrollo: yarn storybook y diríjase a https: // localhost: 6006

Emitir un cambio

1. Empuja a Github.
2. Si ha solucionado un error o un código agregado que debe probarse, agregue pruebas.
3. Abra una solicitud de extracción con las siguientes pautas:
   • Establezca el prefijo de título para presentar/errar y suministrar un título de relaciones públicas descriptivas.
   • Agregue la descripción a su solicitud de extracción que describe su cambio.
4. Una vez que se emite su solicitud de extracción, se ejecutarán los procesos de suite de prueba y de construcción y se revisará su cambio.

Compatibilidad

• Reaccionar 16 o más nuevo