63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { BoxSelectTree } from '@zhst/biz';
|
|
import { Button, Select, TreeProps } from 'antd';
|
|
import { FilterOutlined } from '@ant-design/icons';
|
|
import { treeData, boxDataSource } from './mock'
|
|
|
|
const { Option } = Select
|
|
|
|
const demo = () => {
|
|
const [activeKey, setActiveKey] = useState('1')
|
|
const [searchType, setSearchType] = useState('1')
|
|
const [searchVal, setSearchVal] = useState('')
|
|
const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
|
|
|
|
const onTreeCheck: TreeProps['onCheck'] = (keys: any) => {
|
|
setCheckedKeys(keys)
|
|
}
|
|
|
|
return (
|
|
<div style={{ border: '1px solid #ccc', width: '340px', minHeight: '900px' }}>
|
|
<BoxSelectTree
|
|
data={activeKey === '1' ? treeData : boxDataSource}
|
|
boxDataSource={boxDataSource}
|
|
onSearch={e => console.log('搜索', e)}
|
|
onItemCheck={onTreeCheck}
|
|
onItemSelect={e => console.log('onItemSelect', e)}
|
|
onTabChange={val => setActiveKey(val)}
|
|
onBoxDelete={data => console.log('盒子删除', data)}
|
|
showOptions={false}
|
|
tabsProps={{
|
|
activeKey,
|
|
}}
|
|
customImport={<div style={{ color: 'red' }}>自定义区域</div>}
|
|
searchInputProps={{
|
|
addonBefore: (
|
|
<Select
|
|
value={searchType}
|
|
onChange={_type => {
|
|
setSearchType(_type)
|
|
setSearchVal('')
|
|
}}
|
|
style={{ width: '72px' }}
|
|
>
|
|
{[
|
|
{ value: '1', label: '盒子' },
|
|
].map(item => (
|
|
<Option value={item.value}>{item.label}</Option>
|
|
))}
|
|
</Select>
|
|
),
|
|
onChange: e => setSearchVal(e.target.value),
|
|
value: searchVal
|
|
}}
|
|
treeProps={{
|
|
checkedKeys
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default demo;
|