Pular para o conteúdo principal

BulkActions

Base​

Use o Button como children do BulkActions.

Opção de selecionar todos​

A opção de selecionar todos itens é opcional e pode ser ativada através da propriedade showSelectAll. Essa opção será renderizada apenas quando a propriedade total também estiver definida.

Controle de estado com useBulkActions​

Dica!

Você pode criar seu próprio controle de estado, mas recomendamos fortemente o uso do hook useBulkActions.

O hook useBulkActions, disponibilizado pelo Tangram, oferece uma série de informações e funções para tratar o controle de estado do componente BulkActions e sua interação com os dados listados.

const initialItems = useMemo(
  () => [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2', selected: true },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' }
  ],
  []
);

const {
  items,
  selectedIds,
  isEveryItemSelected,
  isEveryVisibleItemSelected,
  isEveryVisibleItemUnselected,
  hasOnlyAFewItemsSelected,
  total,
  totalSelected,
  clear,
  toggle,
  toggleAll,
  toggleAllVisible
} = useBulkActions({ items: initialItems, total: 300 });
Atenção

O hook irá regerar as informações iniciais toda vez os valores de items e total mudarem. Considere o uso do hook useMemo para evitar rerenderizações desnecessárias (ou até loop infinito).

Para mais detalhes sobre os parâmetros e retornos consulte a API do useBulkActions.

Exemplo:

Usando com tabelas​

Para usar o BulkActions junto do Table é necessário renderizá-lo como o primeiro filho do Table.Head.

Cabeçalho fixo​

Informação

Em futuras versões do Tangram, o posicionamento desses componentes será ajustado automaticamente, sem a necessidade de incluir estilos customizados.

Para que o componente BulkActions funcione adequadamente com tabelas de cabeçalho fixo, é preciso definir um estilo personalizado para o componente Table.

Exemplo:

Com opção de selecionar todos​

Caso a propriedade showSelectAll esteja definida, o tamanho do BulkActions passa a ser outro e o estilo personalizado deve mudar:

Internacionalização​

É possível passar valores customizados para os diferentes textos usados pelo componente. São eles:

  • clearLabel: Texto do botão de limpar seleção
  • totalSelectedLabel: Texto do contador de itens selecionados
  • selectAllLabel: Rótulo da opção de selecionar todos os itens
Atenção

Ao mudar o idioma padrão do componente (inglês), deve ser definidos novos valores para todas as propriedades citadas acima.

Para ajudar neste processo, constantes estão disponíveis com valores padrão para estas propriedades em inglês, português e espanhol. Para mais detalhes consulte a API do componente.

Exemplo das constantes em espanhol:

Você pode definir essas propriedades como uma string ou uma função (que deve retornar uma string).

Como string​

Ao definir como string, ela pode conter chaves específicas - que serão substituídas pelo valor final de cada uma delas. As chaves disponíveis são:

  • {total}: total de itens
  • {totalSelected}: total de itens selecionados

Exemplo:

Como função​

Ao definir como função, os mesmos valores estarão disponíveis através de um objeto como argumento.

Exemplo:

Feedback​