import React, { useState } from 'react';
import { Transfer, Tree } from 'antd';
// Customize Table Transfer
const isChecked = (selectedKeys:any, eventKey:any) => selectedKeys.indexOf(eventKey) !== -1;
interface TreenodeInter {
key:any;
title:any;
children:any;
}
const generateTree = (treeNodes:any = [], checkedKeys:any = []):any =>
treeNodes.map(({children, ...props}:any) => ({
...props,
disabled: checkedKeys.includes(props.key),
children: generateTree(children, checkedKeys),
}));
interface transferChild {
dataSource:any;
targetKeys:any;
onChange:any;
}
const TreeTransfer: React.FC<transferChild> = ({ dataSource, targetKeys, ...restProps }) => {
const transferDataSource:any = [];
function flatten(list = []) {
list.forEach((item:any) => {
transferDataSource.push(item);
flatten(item.children);
});
}
flatten(dataSource);
return (
<Transfer
{...restProps}
targetKeys={targetKeys}
dataSource={transferDataSource}
className="tree-transfer"
render={(item:any) => item.title}
showSelectAll={false}
>
{({ direction, onItemSelect, selectedKeys }) => {
if (direction === 'left') {
const checkedKeys = [...selectedKeys, ...targetKeys];
return (
<Tree
blockNode
checkable
checkStrictly
defaultExpandAll
checkedKeys={checkedKeys}
treeData={generateTree(dataSource, targetKeys)}
onCheck={(_, { node: { key } }:any) => {
onItemSelect(key, !isChecked(checkedKeys, key));
}}
onSelect={(_, { node: { key } }:any) => {
onItemSelect(key, !isChecked(checkedKeys, key));
}}
/>
);
}
}}
</Transfer>
);
};
const treeData = [
{ key: '0-0', title: '0-0' },
{
key: '0-1',
title: '0-1',
children: [
{ key: '0-1-0', title: '0-1-0' },
{ key: '0-1-1', title: '0-1-1' },
],
},
{ key: '0-2', title: '0-3' },
];
const TreeTransferApp = () => {
const [targetKeys, setTargetKeys] = useState([]);
const onChange:any = (keys:any) => {
setTargetKeys(keys);
};
return <TreeTransfer dataSource={treeData} targetKeys={targetKeys} onChange={onChange} />;
};
export default TreeTransferApp
antd/transfer+TS
猜你喜欢
转载自blog.csdn.net/diaojw090/article/details/106674462
今日推荐
周排行