mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 23:59:12 +08:00
95 lines
2.8 KiB
TypeScript
95 lines
2.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { theme, Transfer, Tree } from 'antd';
|
|
import type { TransferDirection, TransferItem } from 'antd/es/transfer';
|
|
import type { DataNode } from 'antd/es/tree';
|
|
|
|
interface TreeTransferProps {
|
|
dataSource: DataNode[];
|
|
targetKeys: string[];
|
|
onChange: (targetKeys: string[], direction: TransferDirection, moveKeys: string[]) => void;
|
|
}
|
|
|
|
// Customize Table Transfer
|
|
const isChecked = (selectedKeys: (string | number)[], eventKey: string | number) =>
|
|
selectedKeys.includes(eventKey);
|
|
|
|
const generateTree = (treeNodes: DataNode[] = [], checkedKeys: string[] = []): DataNode[] =>
|
|
treeNodes.map(({ children, ...props }) => ({
|
|
...props,
|
|
disabled: checkedKeys.includes(props.key as string),
|
|
children: generateTree(children, checkedKeys),
|
|
}));
|
|
|
|
const TreeTransfer: React.FC<TreeTransferProps> = ({ dataSource, targetKeys, ...restProps }) => {
|
|
const { token } = theme.useToken();
|
|
|
|
const transferDataSource: TransferItem[] = [];
|
|
function flatten(list: DataNode[] = []) {
|
|
list.forEach((item) => {
|
|
transferDataSource.push(item as TransferItem);
|
|
flatten(item.children);
|
|
});
|
|
}
|
|
flatten(dataSource);
|
|
|
|
return (
|
|
<Transfer
|
|
{...restProps}
|
|
targetKeys={targetKeys}
|
|
dataSource={transferDataSource}
|
|
className="tree-transfer"
|
|
render={(item) => item.title!}
|
|
showSelectAll={false}
|
|
>
|
|
{({ direction, onItemSelect, selectedKeys }) => {
|
|
if (direction === 'left') {
|
|
const checkedKeys = [...selectedKeys, ...targetKeys];
|
|
return (
|
|
<div style={{ padding: token.paddingXS }}>
|
|
<Tree
|
|
blockNode
|
|
checkable
|
|
checkStrictly
|
|
defaultExpandAll
|
|
checkedKeys={checkedKeys}
|
|
treeData={generateTree(dataSource, targetKeys)}
|
|
onCheck={(_, { node: { key } }) => {
|
|
onItemSelect(key as string, !isChecked(checkedKeys, key));
|
|
}}
|
|
onSelect={(_, { node: { key } }) => {
|
|
onItemSelect(key as string, !isChecked(checkedKeys, key));
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}}
|
|
</Transfer>
|
|
);
|
|
};
|
|
|
|
const treeData: DataNode[] = [
|
|
{ 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-2' },
|
|
{ key: '0-3', title: '0-3' },
|
|
{ key: '0-4', title: '0-4' },
|
|
];
|
|
|
|
const App: React.FC = () => {
|
|
const [targetKeys, setTargetKeys] = useState<string[]>([]);
|
|
const onChange = (keys: string[]) => {
|
|
setTargetKeys(keys);
|
|
};
|
|
return <TreeTransfer dataSource={treeData} targetKeys={targetKeys} onChange={onChange} />;
|
|
};
|
|
|
|
export default App;
|