@snack-uikit/tree NPM

Tree

Installation

npm i @snack-uikit/tree

Example

selectionMode = 'single'

import { Tree } from '@snack-uikit/tree';

// ...

const [selectedNode, setSelected] = useState<TreeNodeId>();

// ...

<Tree data={data} selectionMode='single' selected={selectedNode} onSelect={setSelected} />

selectionMode = 'multi'

import { Tree } from '@snack-uikit/tree';

// ...

const [selectedNodes, setSelected] = useState<TreeNodeId[]>([]);

// ...

<Tree data={data} selectionMode='multi' selected={selectedNodes} onSelect={setSelected} />

Tree

Props

name	type	default value	description
data*	`TreeNodeProps[]`	-	Данные для отрисовки
selectionMode	"single" \| "multi"	-	Режим выбора элементов: - `Single` - одиночный выбор - `Multi` - множественный выбор
onNodeClick	`OnNodeClick`	-	Обработчик клика по элементу дерева
expandedNodes	`string[]`	-	Состояние для раскрытых элементов
onExpand	`(expandedKeys: string[], nodeId: string) => void`	-	Колбэк при раскрытии/закрытии элементов
onDataLoad	`(node: TreeNodeProps) => Promise<unknown>`	-	Колбэк для асинхронной загрузки данных при раскрытии дерева
parentActions	`(node: TreeNodeProps) => DroplistItemSingleProps[]`	-	Дополнительные действия для элемента-родителя
nodeActions	`(node: TreeNodeProps) => DroplistItemSingleProps[]`	-	Дополнительные действия для элемента-потомка
showLines	`boolean`	true	Флаг отвечающий за отображение линий вложенности
className	`string`	-	CSS-класс
selected	`string \\| string[]`	-	Состояние для выбраных элементов: - При selectionMode=`Multi` - принимает массив строк - При selectionMode=`Single` - принимает строку
onSelect	`((selectedKeys: string[], node: TreeNodeProps) => void) \\| ((selectedKey: string, node: TreeNodeProps) => void)`	-	Колбэк при изменении выбраных элементов: - При selectionMode=`Multi` - возвращает массив строк - При selectionMode=`Single` - возвращает строку