136 lines
3.7 KiB
TypeScript
136 lines
3.7 KiB
TypeScript
import React, { useState, useRef } from 'react';
|
|
import { TreePanel } from '@zhst/biz';
|
|
import { Badge, Checkbox } from '@zhst/meta'
|
|
import { treeData, boxDataSource } from './mock'
|
|
import { ImportOutlined, FolderAddOutlined, CloseCircleOutlined, FilterOutlined } from '@ant-design/icons';
|
|
|
|
const demo = () => {
|
|
const [checkedTags, setCheckedTags] = useState<string[]>([]);
|
|
const [tagExpandAll, setTagExpandAll] = useState(false);
|
|
const [showTagPanel, setShowTagPanel] = useState(true);
|
|
|
|
|
|
return (
|
|
<div style={{ padding: '12px', width: '240px', border: '1px solid #09f' }}>
|
|
<TreePanel
|
|
data={boxDataSource}
|
|
showTagPanel={showTagPanel}
|
|
tagExpandAll={tagExpandAll}
|
|
showSelectBar
|
|
onTagCheck={(value) => setCheckedTags(pre => {
|
|
if (pre.includes(value)) {
|
|
return pre.filter(item => item !== value)
|
|
} else {
|
|
return [...pre, value]
|
|
}
|
|
})}
|
|
onResetTags={() => setCheckedTags([])}
|
|
checkedTags={checkedTags}
|
|
filterList={[
|
|
{
|
|
label: '过滤',
|
|
key: 'multi',
|
|
icon: <FilterOutlined />,
|
|
type: 'dropdown',
|
|
showTooltip: false,
|
|
dropdownConfig: {
|
|
menu: {
|
|
// 自定义返回项
|
|
_internalRenderMenuItem: (originNode, menuItemProps, stateProps) => {
|
|
return (
|
|
<div>
|
|
{originNode}
|
|
</div>
|
|
)
|
|
},
|
|
selectable: true,
|
|
items: [
|
|
{
|
|
label: <p style={{ margin: '0', textAlign: 'center' }} >全部</p>,
|
|
key: 'all',
|
|
onClick: () => console.log('多选1')
|
|
},
|
|
{
|
|
icon: <Badge status="success" />,
|
|
label: '多选1',
|
|
key: 'multi1',
|
|
onClick: () => console.log('多选1')
|
|
},
|
|
{
|
|
label: '多选2',
|
|
icon: <Badge status='error' />,
|
|
key: 'multi2',
|
|
},
|
|
],
|
|
}
|
|
}
|
|
},
|
|
]}
|
|
extra={(
|
|
<div>
|
|
<span><Checkbox>全选</Checkbox></span>
|
|
<a style={{ float: 'right', color: '#09f' }} >批量操作</a>
|
|
</div>
|
|
)}
|
|
optionList={[
|
|
{
|
|
label: '导入盒子',
|
|
key: 'import',
|
|
icon: <ImportOutlined />,
|
|
},
|
|
{
|
|
label: '新建组',
|
|
key: 'add',
|
|
icon: <FolderAddOutlined />,
|
|
},
|
|
{
|
|
label: '删除',
|
|
key: 'del',
|
|
icon: <CloseCircleOutlined />,
|
|
props: {
|
|
danger: true
|
|
}
|
|
},
|
|
]}
|
|
tagList={[
|
|
{
|
|
label: '标签组1',
|
|
value: '1',
|
|
children: [
|
|
{
|
|
label: '标签1-1',
|
|
value: '1-1',
|
|
},
|
|
{
|
|
label: '标签1-2',
|
|
value: '1-2',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '标签组2',
|
|
value: '2',
|
|
children: [
|
|
{
|
|
label: '标签2-1',
|
|
value: '2-1',
|
|
},
|
|
{
|
|
label: '标签2-2',
|
|
value: '2-2',
|
|
}
|
|
]
|
|
},
|
|
]
|
|
}
|
|
onTagExpand={() => {
|
|
setTagExpandAll(pre => !pre)
|
|
setCheckedTags([])
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default demo;
|