CmTreeView
Use para hierarquias administrativas como menus, categorias, permissões e organogramas simples.
Import
import { CmTreeView } from "cosmemilton-ui/client";Categorias pesquisáveis
Modo de leitura: busca, navegação por breadcrumb e os controles nativos (expandir/recolher + Modo Solitário). Sem CRUD nem arraste.
CRUD completo com limite de níveis
Estado controlado com adicionar/editar/excluir por item, arraste para reordenar (onReorder) e maxDepth={3} — o botão de subitem some no nível mais profundo.
Seleção de permissões
selectionMode mostra checkboxes nas folhas — ideal para escolher permissões. O switch Modo Solitário foi ocultado via showSolitaryToggle={false}.
1 permissão selecionada
Ícones personalizados
Troque os ícones padrão com branchIcon/branchOpenIcon/leafIcon, ou dê a cada item o seu via node.icon (que tem precedência). Tudo opcional — sem nada disso, mantém pasta/arquivo.
Ação customizada por nó (clonar)
nodeActions(node) adiciona botões extras entre editar e remover — aqui, "Clonar" duplica o nó (e seus filhos) como próximo irmão. Funciona mesmo sem onEdit/onAdd.
API rápida
Props principais de cada peça exportada.
CmTreeView
Notas
Controlado: data é a fonte da verdade. Atualize-a nos callbacks (onReorder devolve a árvore já reordenada; onAdd/onEdit/onDelete recebem o nó/pai) para que arrastar e o CRUD persistam.
Os botões nativos de expandir/recolher ficam ao lado do switch "Modo Solitário". Oculte-os com showExpandCollapse={false} / showSolitaryToggle={false}, ou injete os seus em controlsSlot.
maxDepth limita a profundidade: ao atingir o último nível permitido, o botão de adicionar subitem some automaticamente.
No Modo Solitário fica aberto apenas um ramo por nível — ligá-lo já recolhe os demais imediatamente.
Ícones são opcionais: por padrão usa pasta/pasta-aberta/arquivo. Troque os padrões com branchIcon/branchOpenIcon/leafIcon, ou defina node.icon (qualquer ReactNode) para um ícone por item — node.icon tem precedência.
nodeActions(node) retorna ações extras por item (ex.: "clonar"), renderizadas entre editar e remover — pode variar por nó (retornar [] para ocultar em alguns) e funciona mesmo sem onEdit/onDelete.