ant-design/components/transfer/demo/tree-transfer.tsx
afc163 5c99a5ee49
type: fix type errors of React.Key (#44938)
* 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>
2023-09-20 11:01:49 +08:00

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;