mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
5c99a5ee49
* type: fix .dumi typing error * type: fix React.Key type error * type: fix React.Key type error * type: fix React.Key type error * type: fix React.Key type error * Apply suggestions from code review Signed-off-by: afc163 <afc163@gmail.com> * fix: test case * fix: test case * chore: use @types/react latest version * Apply suggestions from code review Signed-off-by: afc163 <afc163@gmail.com> * chore: update form def * chore: more ts * chore: revert demo ts * chore: bump ver * chore: fix more * chore: fix demo * chore: back of ci * chore: fix ts * chore: fix ts * chore: part of it * chore: fix ts * chore: bump ver * chore: fix lint * chore: fix * test: update test --------- Signed-off-by: afc163 <afc163@gmail.com> Co-authored-by: 二货机器人 <smith3816@gmail.com>
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: React.Key[], eventKey: React.Key) =>
|
|
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;
|