mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 22:26:44 +08:00
55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import type { TreeSelectProps } from 'antd';
|
|
import { TreeSelect } from 'antd';
|
|
import type { DefaultOptionType } from 'antd/es/select';
|
|
|
|
const App: React.FC = () => {
|
|
const [value, setValue] = useState<string>();
|
|
const [treeData, setTreeData] = useState<Omit<DefaultOptionType, 'label'>[]>([
|
|
{ id: 1, pId: 0, value: '1', title: 'Expand to load' },
|
|
{ id: 2, pId: 0, value: '2', title: 'Expand to load' },
|
|
{ id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
|
|
]);
|
|
|
|
const genTreeNode = (parentId: number, isLeaf = false) => {
|
|
const random = Math.random().toString(36).substring(2, 6);
|
|
return {
|
|
id: random,
|
|
pId: parentId,
|
|
value: random,
|
|
title: isLeaf ? 'Tree Node' : 'Expand to load',
|
|
isLeaf,
|
|
};
|
|
};
|
|
|
|
const onLoadData: TreeSelectProps['loadData'] = ({ id }) =>
|
|
new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
setTreeData(
|
|
treeData.concat([genTreeNode(id, false), genTreeNode(id, true), genTreeNode(id, true)]),
|
|
);
|
|
resolve(undefined);
|
|
}, 300);
|
|
});
|
|
|
|
const onChange = (newValue: string) => {
|
|
console.log(newValue);
|
|
setValue(newValue);
|
|
};
|
|
|
|
return (
|
|
<TreeSelect
|
|
treeDataSimpleMode
|
|
style={{ width: '100%' }}
|
|
value={value}
|
|
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
|
placeholder="Please select"
|
|
onChange={onChange}
|
|
loadData={onLoadData}
|
|
treeData={treeData}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default App;
|