react multi select

Multi Select

Componente de seleção de múltiplas empresas Kenshoo

Demonstração de React-Multi-Select

O Multi Select é um componente direto que ajuda um usuário a selecionar vários itens de maneira clara e filtrável.

Instalação

Instalação usando NPM:

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

Instalação usando o fio:

 yarn add @kenshooui/react-multi-select

Estilos de importação

Inclua o CSS do componente em seu aplicativo

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

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

Propriedades

Nome	Tipo	Padrão	Descrição
items	List	[]	Lista de itens.
selectedItems	Array	[]	Lista selecionada para começar com (subgrupo de itens).
onChange	function	() => {}	retorno de chamada para evento alterado.
loading	boolean	falso	Alterne para mostrar a indicação de carregamento.
messages	Object	{}	mensagens personalizadas. Por favor, veja abaixo as mensagens disponíveis.
showSearch	boolean	verdadeiro	Alterne para mostrar a opção de pesquisa.
showSelectAll	boolean	verdadeiro	Alterne para mostrar selecionar todas as opções na lista.
showSelectedItems	boolean	verdadeiro	Alterne para mostrar os itens selecionados do painel direito.
wrapperClassName	String	''	Nome da classe Wrapper - usado para personalizar o estilo.
height	number	400	itens disponíveis listam a altura.
itemHeight	number	40	A altura de um item na lista.
selectedItemHeight	number	itemHeight	A altura do item selecionado na lista.
selectAllHeight	number	itemHeight	A altura do componente selecionall, por padrão, usará o valor do ItemHeight.
maxSelectedItems	number		Define os itens máximos que podem ser selecionados, substitui o ShowSelectall.
filterFunction	function	com base no rótulo	A função usada para filtrar itens com base na consulta de pesquisa.
searchRenderer	Component		Componente para substituir o componente de pesquisa padrão.
selectedItemRenderer	Component		Componente para substituir o componente de item selecionado padrão na lista de destino.
loaderRenderer	Component		Componente para substituir o componente carregador padrão.
selectAllRenderer	Component		Componente para substituir o padrão Selecione todos os componentes.
itemRenderer	Component		Componente para substituir o componente do item padrão na lista de origem.
selectionStatusRenderer	Component		Componente para substituir o componente de status de seleção padrão.
noItemsRenderer	Component		Componente para substituir o componente padrão sem itens.
searchValue	string		O valor do campo de pesquisa.
searchValueChanged	function		Função para lidar com a mudança do campo de pesquisa. Aceita valor como um único argumento.
responsiveHeight	string	400px	Altura responsiva do componente de embalagem, pode enviar porcentagem por exemplo: 70%
withGrouping	boolean	falso	Seus itens serão agrupados pelos valores de suporte do grupo - consulte a seção "Agrupamento de itens" abaixo
showSelectedItemsSearch	boolean	falso	Alterne para mostrar a opção de pesquisa na lista de detenção.
searchSelectedItemsValue	string		O valor do campo de pesquisa para a lista de destino.
searchSelectedItemsChanged	function		Função para lidar com a mudança do campo de pesquisa para a lista de destino. Aceita valor como um único argumento.
selectedItemsFilterFunction	function	com base no rótulo	É o mesmo que a função de filtro por padrão para filtrar itens com base na consulta de pesquisa na lista de destino.
isLocked	function	item => item.disabled	Função a ser usada para definir se o item está bloqueado ou não

Personalização

Renderizadores

Você pode substituir os renderizadores dos seguintes componentes:

Item

Use o itemRenderer para substituir o componente padrão.

Cada item recebe os seguintes adereços:

item - segura os dados do seu item

height - recebe a altura definida pela lista

onClick - o evento para alternar a seleção no componente

checked - indica se o item está selecionado

indeterminate - usado pelo componente Selecionar todos os componentes para exibir o modo indeterminado

disabled - define se o item deve ser desativado. O item não será clicável para seleção e será ignorado ao clicar em "Selecionar tudo".

group - Item do Grupo - Sem Caixa de seleção, não clicável, preto colorido

Selecione tudo

Use o selectAllRenderer para substituir o componente padrão.

O componente SelectAll recebe os seguintes adereços:

height - recebe a altura definida pelo pai

onClick - desencadeia o evento Selecionar todos/limpar todo o clique

isAllSelected - indica que todos os itens são selecionados

selectAllMessage - Define a mensagem para o componente SelectAll

selectedIds - mantém uma lista de IDs de todos os itens selecionados

Item selecionado

Use o selectAllRenderer para substituir o componente padrão.

O componente SelectedItem recebe os seguintes adereços:

item - segura os dados do seu item

height - recebe a altura definida pela lista

Você pode desativar itens selecionados específicos, passando item.disabled: true ou Passe isLocked Função que será usada para definir se o item está desativado.

Exemplo (selecionado e desativado):

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

Procurar

Use o searchRenderer para substituir o componente padrão.

O componente Search recebe os seguintes adereços:

searchPlaceholder - Define a mensagem a ser exibida no espaço reservado de pesquisa

onChange - desencadeia a ação de alterar o valor da pesquisa

Status de seleção

Use o selectionStatusRenderer para substituir o componente padrão.

O componente SelectionStatus recebe os seguintes adereços:

selected - uma matriz de todos os IDs selecionados

clearAll - retorno de chamada para limpar todos os itens selecionados

clearAllMessage - texto para exibir no texto limpo

noneSelectedMessage - texto a ser exibido quando nenhum item é selecionado

selectedMessage - texto a ser exibido quando houver itens selecionados

Carregador

Use o loaderRenderer para substituir o componente padrão.

Não recebe nenhum adereço.

Sem itens

Use o noItemsRenderer para substituir o componente padrão.

Não recebe nenhum adereço.

Função de pesquisa

Para acomodar filtros de itens complexos, você pode fornecer seu próprio método de filtro no suporte filterFunction .

Exemplo (padrão):

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

Executa a pesquisa no lado do servidor

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

Mensagens

Você pode usar suas próprias mensagens. Aqui está o objeto de mensagens padrão:

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

Agrupamento de itens

Você pode adicionar também agrupamento aos seus itens - adicione um suporte de grupo com o nome do grupo como um valor a cada um de seus itens e adicione o suporte de agrupar também.

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

Como contribuir

Configuração do ambiente de desenvolvimento

1. Fifra o repositório e crie seu ramo a partir master .
2. Instale o projeto: yarn install
3. Executar testes: yarn test ou yarn test:watch
4. Run Dev Ambiente: yarn storybook e vá para https: // localhost: 6006

Emitir uma mudança

1. Empurre para o github.
2. Se você corrigiu um bug ou código adicionado que deve ser testado, adicione testes.
3. Abra uma solicitação de tração com as seguintes diretrizes:
   • Defina o prefixo do título para apresentar/bug e fornecer um título descritivo de relações públicas.
   • Adicione a descrição à sua solicitação de tração descrevendo sua alteração.
4. Depois que sua solicitação de tração for emitida, o conjunto de testes e os processos de construção serão executados e sua alteração será revisada.

Compatibilidade

• Reaja 16 ou mais recente