/
kaws
/
ui-kit-ce
Обзор
Документация
Войти
/
kaws
/
ui-kit-ce
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/tree/examples/TreeLoading.tsx
70 строк
2 KB
Pavel Uryadyshev
fix(tree): оптимизирована работа компонента Tree
11 окт 2024, 11:54
11 окт 2024, 11:54
8afbdcb
Код
Авторство
О чём код?
import * as React from 'react' import { Tree, TreeItem, TreeNodeItem } from '@v-uik/tree' const dataSource: TreeItem[] = [ { key: 'node-0', label: 'node-0', loadable: true }, { key: 'node-1', label: 'node-1', children: [ { key: 'node-1-0', label: 'node-1-0' }, { key: 'node-1-1', label: 'node-1-1', loadable: true }, ], }, ] const updateTreeData = ( existingNodes: TreeItem[], key: React.Key, newChildren: TreeItem[] ): TreeItem[] => existingNodes.map((node) => { if (node.key === key) { return { ...node, children: newChildren, } } if (node.children) { return { ...node, children: updateTreeData(node.children, key, newChildren), } } return node }) const delay = (time: number): Promise<void> => { return new Promise((resolve) => setTimeout(resolve, time)) } export const TreeLoading: React.FC = () => { const [dataSourceForLoading, setDataSourceForLoading] = React.useState(dataSource) const handleLoadData = async (item: TreeNodeItem<TreeItem>) => { await delay(1000) const newTree = updateTreeData(dataSourceForLoading, item.key, [ { key: `${item.key}-0`, label: `${item.key}-0`, }, { key: `${item.key}-1`, label: `${item.key}-1`, loadable: true, children: [ { key: `${item.key}-1-0`, label: `${item.key}-1-0`, }, ], }, ]) setDataSourceForLoading(newTree) } return <Tree dataSource={dataSourceForLoading} onLoadData={handleLoadData} /> }