2023-06-07 22:54:56 +08:00
|
|
|
import * as React from 'react';
|
2024-11-12 15:16:19 +08:00
|
|
|
import { useEvent, useMergedState } from 'rc-util';
|
2024-04-08 14:04:08 +08:00
|
|
|
|
2024-03-14 21:14:21 +08:00
|
|
|
import type { TransferKey } from '../interface';
|
2023-06-07 22:54:56 +08:00
|
|
|
|
2024-03-14 21:14:21 +08:00
|
|
|
const EMPTY_KEYS: TransferKey[] = [];
|
2023-06-07 22:54:56 +08:00
|
|
|
|
2024-03-14 21:14:21 +08:00
|
|
|
function filterKeys(keys: TransferKey[], dataKeys: Set<TransferKey>) {
|
2023-06-07 22:54:56 +08:00
|
|
|
const filteredKeys = keys.filter((key) => dataKeys.has(key));
|
|
|
|
return keys.length === filteredKeys.length ? keys : filteredKeys;
|
|
|
|
}
|
|
|
|
|
2024-03-14 21:14:21 +08:00
|
|
|
function flattenKeys(keys: Set<TransferKey>) {
|
2023-06-20 13:41:35 +08:00
|
|
|
return Array.from(keys).join(';');
|
|
|
|
}
|
|
|
|
|
2024-03-14 21:14:21 +08:00
|
|
|
export default function useSelection<T extends { key: TransferKey }>(
|
2023-06-07 22:54:56 +08:00
|
|
|
leftDataSource: T[],
|
|
|
|
rightDataSource: T[],
|
2024-11-12 15:16:19 +08:00
|
|
|
selectedKeys?: TransferKey[],
|
2023-06-07 22:54:56 +08:00
|
|
|
): [
|
2024-03-14 21:14:21 +08:00
|
|
|
sourceSelectedKeys: TransferKey[],
|
|
|
|
targetSelectedKeys: TransferKey[],
|
2024-11-12 15:16:19 +08:00
|
|
|
setSourceSelectedKeys: (srcKeys: TransferKey[]) => void,
|
|
|
|
setTargetSelectedKeys: (srcKeys: TransferKey[]) => void,
|
2023-06-07 22:54:56 +08:00
|
|
|
] {
|
|
|
|
// Prepare `dataSource` keys
|
|
|
|
const [leftKeys, rightKeys] = React.useMemo(
|
|
|
|
() => [
|
|
|
|
new Set(leftDataSource.map((src) => src.key)),
|
|
|
|
new Set(rightDataSource.map((src) => src.key)),
|
|
|
|
],
|
|
|
|
[leftDataSource, rightDataSource],
|
|
|
|
);
|
|
|
|
|
|
|
|
// Selected Keys
|
2024-11-12 15:16:19 +08:00
|
|
|
const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(EMPTY_KEYS, {
|
|
|
|
value: selectedKeys,
|
|
|
|
});
|
|
|
|
|
|
|
|
const sourceSelectedKeys = React.useMemo(
|
|
|
|
() => filterKeys(mergedSelectedKeys, leftKeys),
|
|
|
|
[mergedSelectedKeys, leftKeys],
|
2023-06-07 22:54:56 +08:00
|
|
|
);
|
2024-11-12 15:16:19 +08:00
|
|
|
const targetSelectedKeys = React.useMemo(
|
|
|
|
() => filterKeys(mergedSelectedKeys, rightKeys),
|
|
|
|
[mergedSelectedKeys, rightKeys],
|
2023-06-07 22:54:56 +08:00
|
|
|
);
|
|
|
|
|
2024-11-12 15:16:19 +08:00
|
|
|
// // Reset when data changed
|
2023-06-07 22:54:56 +08:00
|
|
|
React.useEffect(() => {
|
2024-11-12 15:16:19 +08:00
|
|
|
setMergedSelectedKeys([
|
|
|
|
...filterKeys(mergedSelectedKeys, leftKeys),
|
|
|
|
...filterKeys(mergedSelectedKeys, rightKeys),
|
|
|
|
]);
|
2023-06-20 13:41:35 +08:00
|
|
|
}, [flattenKeys(leftKeys), flattenKeys(rightKeys)]);
|
2023-06-07 22:54:56 +08:00
|
|
|
|
2024-11-12 15:16:19 +08:00
|
|
|
// Update keys
|
|
|
|
const setSourceSelectedKeys = useEvent((nextSrcKeys: TransferKey[]) => {
|
|
|
|
setMergedSelectedKeys([...nextSrcKeys, ...targetSelectedKeys]);
|
|
|
|
});
|
|
|
|
const setTargetSelectedKeys = useEvent((nextTargetKeys: TransferKey[]) => {
|
|
|
|
setMergedSelectedKeys([...sourceSelectedKeys, ...nextTargetKeys]);
|
|
|
|
});
|
|
|
|
|
2023-06-07 22:54:56 +08:00
|
|
|
return [
|
|
|
|
// Keys
|
|
|
|
sourceSelectedKeys,
|
|
|
|
targetSelectedKeys,
|
|
|
|
// Updater
|
|
|
|
setSourceSelectedKeys,
|
|
|
|
setTargetSelectedKeys,
|
|
|
|
];
|
|
|
|
}
|