You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
3.2 KiB
120 lines
3.2 KiB
2 years ago
|
import React, { useState } from 'react';
|
||
|
import { CarryOutOutlined, CheckOutlined, FormOutlined } from '@ant-design/icons';
|
||
|
import { Select, Switch, Tree } from 'antd';
|
||
|
import type { DataNode } from 'antd/es/tree';
|
||
|
|
||
|
const treeData: DataNode[] = [
|
||
|
{
|
||
|
title: 'parent 1',
|
||
|
key: '0-0',
|
||
|
icon: <CarryOutOutlined />,
|
||
|
children: [
|
||
|
{
|
||
|
title: 'parent 1-0',
|
||
|
key: '0-0-0',
|
||
|
icon: <CarryOutOutlined />,
|
||
|
children: [
|
||
|
{ title: 'leaf', key: '0-0-0-0', icon: <CarryOutOutlined /> },
|
||
|
{
|
||
|
title: (
|
||
|
<>
|
||
|
<div>multiple line title</div>
|
||
|
<div>multiple line title</div>
|
||
|
</>
|
||
|
),
|
||
|
key: '0-0-0-1',
|
||
|
icon: <CarryOutOutlined />,
|
||
|
},
|
||
|
{ title: 'leaf', key: '0-0-0-2', icon: <CarryOutOutlined /> },
|
||
|
],
|
||
|
},
|
||
|
{
|
||
|
title: 'parent 1-1',
|
||
|
key: '0-0-1',
|
||
|
icon: <CarryOutOutlined />,
|
||
|
children: [{ title: 'leaf', key: '0-0-1-0', icon: <CarryOutOutlined /> }],
|
||
|
},
|
||
|
{
|
||
|
title: 'parent 1-2',
|
||
|
key: '0-0-2',
|
||
|
icon: <CarryOutOutlined />,
|
||
|
children: [
|
||
|
{ title: 'leaf', key: '0-0-2-0', icon: <CarryOutOutlined /> },
|
||
|
{
|
||
|
title: 'leaf',
|
||
|
key: '0-0-2-1',
|
||
|
icon: <CarryOutOutlined />,
|
||
|
switcherIcon: <FormOutlined />,
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
{
|
||
|
title: 'parent 2',
|
||
|
key: '0-1',
|
||
|
icon: <CarryOutOutlined />,
|
||
|
children: [
|
||
|
{
|
||
|
title: 'parent 2-0',
|
||
|
key: '0-1-0',
|
||
|
icon: <CarryOutOutlined />,
|
||
|
children: [
|
||
|
{ title: 'leaf', key: '0-1-0-0', icon: <CarryOutOutlined /> },
|
||
|
{ title: 'leaf', key: '0-1-0-1', icon: <CarryOutOutlined /> },
|
||
|
],
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
];
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const [showLine, setShowLine] = useState<boolean>(true);
|
||
|
const [showIcon, setShowIcon] = useState<boolean>(false);
|
||
|
const [showLeafIcon, setShowLeafIcon] = useState<boolean | React.ReactNode>(true);
|
||
|
|
||
|
const onSelect = (selectedKeys: React.Key[], info: any) => {
|
||
|
console.log('selected', selectedKeys, info);
|
||
|
};
|
||
|
|
||
|
const handleLeafIconChange = (value: 'true' | 'false' | 'custom') => {
|
||
|
if (value === 'custom') {
|
||
|
return setShowLeafIcon(<CheckOutlined />);
|
||
|
}
|
||
|
|
||
|
if (value === 'true') {
|
||
|
return setShowLeafIcon(true);
|
||
|
}
|
||
|
|
||
|
return setShowLeafIcon(false);
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<div>
|
||
|
<div style={{ marginBottom: 16 }}>
|
||
|
showLine: <Switch checked={!!showLine} onChange={setShowLine} />
|
||
|
<br />
|
||
|
<br />
|
||
|
showIcon: <Switch checked={showIcon} onChange={setShowIcon} />
|
||
|
<br />
|
||
|
<br />
|
||
|
showLeafIcon:{' '}
|
||
|
<Select defaultValue="true" onChange={handleLeafIconChange}>
|
||
|
<Select.Option value="true">True</Select.Option>
|
||
|
<Select.Option value="false">False</Select.Option>
|
||
|
<Select.Option value="custom">Custom icon</Select.Option>
|
||
|
</Select>
|
||
|
</div>
|
||
|
<Tree
|
||
|
showLine={showLine ? { showLeafIcon } : false}
|
||
|
showIcon={showIcon}
|
||
|
defaultExpandedKeys={['0-0-0']}
|
||
|
onSelect={onSelect}
|
||
|
treeData={treeData}
|
||
|
/>
|
||
|
</div>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default App;
|