mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 21:48:19 +08:00
120 lines
3.2 KiB
TypeScript
120 lines
3.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { CarryOutOutlined, CheckOutlined, FormOutlined } from '@ant-design/icons';
|
|
import { Select, Switch, Tree } from 'antd';
|
|
import type { TreeDataNode } from 'antd';
|
|
|
|
const treeData: TreeDataNode[] = [
|
|
{
|
|
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<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;
|