mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-06 02:15:35 +08:00
60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
import { Tree } from 'antd';
|
||
|
|
||
|
interface DataNode {
|
||
|
title: string;
|
||
|
key: string;
|
||
|
isLeaf?: boolean;
|
||
|
children?: DataNode[];
|
||
|
}
|
||
|
|
||
|
const initTreeData: DataNode[] = [
|
||
|
{ title: 'Expand to load', key: '0' },
|
||
|
{ title: 'Expand to load', key: '1' },
|
||
|
{ title: 'Tree Node', key: '2', isLeaf: true },
|
||
|
];
|
||
|
|
||
|
// It's just a simple demo. You can use tree map to optimize update perf.
|
||
|
const updateTreeData = (list: DataNode[], key: React.Key, children: DataNode[]): DataNode[] =>
|
||
|
list.map(node => {
|
||
|
if (node.key === key) {
|
||
|
return {
|
||
|
...node,
|
||
|
children,
|
||
|
};
|
||
|
}
|
||
|
if (node.children) {
|
||
|
return {
|
||
|
...node,
|
||
|
children: updateTreeData(node.children, key, children),
|
||
|
};
|
||
|
}
|
||
|
return node;
|
||
|
});
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const [treeData, setTreeData] = useState(initTreeData);
|
||
|
|
||
|
const onLoadData = ({ key, children }: any) =>
|
||
|
new Promise<void>(resolve => {
|
||
|
if (children) {
|
||
|
resolve();
|
||
|
return;
|
||
|
}
|
||
|
setTimeout(() => {
|
||
|
setTreeData(origin =>
|
||
|
updateTreeData(origin, key, [
|
||
|
{ title: 'Child Node', key: `${key}-0` },
|
||
|
{ title: 'Child Node', key: `${key}-1` },
|
||
|
]),
|
||
|
);
|
||
|
|
||
|
resolve();
|
||
|
}, 1000);
|
||
|
});
|
||
|
|
||
|
return <Tree loadData={onLoadData} treeData={treeData} />;
|
||
|
};
|
||
|
|
||
|
export default App;
|