2022-11-09 12:28:04 +08:00
|
|
|
import React, { useState } from 'react';
|
2023-07-28 16:17:43 +08:00
|
|
|
import difference from 'lodash/difference';
|
2023-01-03 10:08:42 +08:00
|
|
|
import { Space, Switch, Table, Tag, Transfer } from 'antd';
|
2022-11-09 12:28:04 +08:00
|
|
|
import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface';
|
|
|
|
import type { TransferItem, TransferProps } from 'antd/es/transfer';
|
|
|
|
|
|
|
|
interface RecordType {
|
|
|
|
key: string;
|
|
|
|
title: string;
|
|
|
|
description: string;
|
|
|
|
disabled: boolean;
|
|
|
|
tag: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface DataType {
|
|
|
|
key: string;
|
|
|
|
title: string;
|
|
|
|
description: string;
|
|
|
|
disabled: boolean;
|
|
|
|
tag: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface TableTransferProps extends TransferProps<TransferItem> {
|
|
|
|
dataSource: DataType[];
|
|
|
|
leftColumns: ColumnsType<DataType>;
|
|
|
|
rightColumns: ColumnsType<DataType>;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Customize Table Transfer
|
|
|
|
const TableTransfer = ({ leftColumns, rightColumns, ...restProps }: TableTransferProps) => (
|
|
|
|
<Transfer {...restProps}>
|
|
|
|
{({
|
|
|
|
direction,
|
|
|
|
filteredItems,
|
|
|
|
onItemSelectAll,
|
|
|
|
onItemSelect,
|
|
|
|
selectedKeys: listSelectedKeys,
|
|
|
|
disabled: listDisabled,
|
|
|
|
}) => {
|
|
|
|
const columns = direction === 'left' ? leftColumns : rightColumns;
|
|
|
|
|
|
|
|
const rowSelection: TableRowSelection<TransferItem> = {
|
2022-11-19 13:47:33 +08:00
|
|
|
getCheckboxProps: (item) => ({ disabled: listDisabled || item.disabled }),
|
2022-11-09 12:28:04 +08:00
|
|
|
onSelectAll(selected, selectedRows) {
|
|
|
|
const treeSelectedKeys = selectedRows
|
2022-11-19 13:47:33 +08:00
|
|
|
.filter((item) => !item.disabled)
|
2022-11-09 12:28:04 +08:00
|
|
|
.map(({ key }) => key);
|
|
|
|
const diffKeys = selected
|
|
|
|
? difference(treeSelectedKeys, listSelectedKeys)
|
|
|
|
: difference(listSelectedKeys, treeSelectedKeys);
|
|
|
|
onItemSelectAll(diffKeys as string[], selected);
|
|
|
|
},
|
|
|
|
onSelect({ key }, selected) {
|
|
|
|
onItemSelect(key as string, selected);
|
|
|
|
},
|
|
|
|
selectedRowKeys: listSelectedKeys,
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Table
|
|
|
|
rowSelection={rowSelection}
|
|
|
|
columns={columns}
|
|
|
|
dataSource={filteredItems}
|
|
|
|
size="small"
|
|
|
|
style={{ pointerEvents: listDisabled ? 'none' : undefined }}
|
|
|
|
onRow={({ key, disabled: itemDisabled }) => ({
|
|
|
|
onClick: () => {
|
|
|
|
if (itemDisabled || listDisabled) return;
|
|
|
|
onItemSelect(key as string, !listSelectedKeys.includes(key as string));
|
|
|
|
},
|
|
|
|
})}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
</Transfer>
|
|
|
|
);
|
|
|
|
|
|
|
|
const mockTags = ['cat', 'dog', 'bird'];
|
|
|
|
|
|
|
|
const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({
|
|
|
|
key: i.toString(),
|
|
|
|
title: `content${i + 1}`,
|
|
|
|
description: `description of content${i + 1}`,
|
|
|
|
disabled: i % 4 === 0,
|
|
|
|
tag: mockTags[i % 3],
|
|
|
|
}));
|
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const originTargetKeys = mockData
|
|
|
|
.filter((item) => Number(item.key) % 3 > 1)
|
|
|
|
.map((item) => item.key);
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
|
|
const leftTableColumns: ColumnsType<DataType> = [
|
|
|
|
{
|
|
|
|
dataIndex: 'title',
|
|
|
|
title: 'Name',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
dataIndex: 'tag',
|
|
|
|
title: 'Tag',
|
2022-11-19 13:47:33 +08:00
|
|
|
render: (tag) => <Tag>{tag}</Tag>,
|
2022-11-09 12:28:04 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
dataIndex: 'description',
|
|
|
|
title: 'Description',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
const rightTableColumns: ColumnsType<Pick<DataType, 'title'>> = [
|
|
|
|
{
|
|
|
|
dataIndex: 'title',
|
|
|
|
title: 'Name',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
const App: React.FC = () => {
|
|
|
|
const [targetKeys, setTargetKeys] = useState<string[]>(originTargetKeys);
|
|
|
|
const [disabled, setDisabled] = useState(false);
|
|
|
|
const [showSearch, setShowSearch] = useState(false);
|
|
|
|
|
|
|
|
const onChange = (nextTargetKeys: string[]) => {
|
|
|
|
setTargetKeys(nextTargetKeys);
|
|
|
|
};
|
|
|
|
|
|
|
|
const triggerDisable = (checked: boolean) => {
|
|
|
|
setDisabled(checked);
|
|
|
|
};
|
|
|
|
|
|
|
|
const triggerShowSearch = (checked: boolean) => {
|
|
|
|
setShowSearch(checked);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<TableTransfer
|
|
|
|
dataSource={mockData}
|
|
|
|
targetKeys={targetKeys}
|
|
|
|
disabled={disabled}
|
|
|
|
showSearch={showSearch}
|
|
|
|
onChange={onChange}
|
|
|
|
filterOption={(inputValue, item) =>
|
|
|
|
item.title!.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1
|
|
|
|
}
|
|
|
|
leftColumns={leftTableColumns}
|
|
|
|
rightColumns={rightTableColumns}
|
|
|
|
/>
|
2023-01-03 10:08:42 +08:00
|
|
|
<Space style={{ marginTop: 16 }}>
|
|
|
|
<Switch
|
|
|
|
unCheckedChildren="disabled"
|
|
|
|
checkedChildren="disabled"
|
|
|
|
checked={disabled}
|
|
|
|
onChange={triggerDisable}
|
|
|
|
/>
|
|
|
|
<Switch
|
|
|
|
unCheckedChildren="showSearch"
|
|
|
|
checkedChildren="showSearch"
|
|
|
|
checked={showSearch}
|
|
|
|
onChange={triggerShowSearch}
|
|
|
|
/>
|
|
|
|
</Space>
|
2022-11-09 12:28:04 +08:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default App;
|