ant-design/components/transfer/hooks/useSelection.ts
lijianan f7d9e337c5
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
lint: reopen no-new-array rules (#52826)
2025-02-17 10:20:05 +08:00

77 lines
2.2 KiB
TypeScript

import * as React from 'react';
import { useEvent, useMergedState } from 'rc-util';
import type { TransferKey } from '../interface';
const EMPTY_KEYS: TransferKey[] = [];
function filterKeys(keys: TransferKey[], dataKeys: Set<TransferKey>) {
const filteredKeys = keys.filter((key) => dataKeys.has(key));
return keys.length === filteredKeys.length ? keys : filteredKeys;
}
function flattenKeys(keys: Set<TransferKey>) {
return Array.from(keys).join(';');
}
function useSelection<T extends { key: TransferKey }>(
leftDataSource: T[],
rightDataSource: T[],
selectedKeys?: TransferKey[],
): [
sourceSelectedKeys: TransferKey[],
targetSelectedKeys: TransferKey[],
setSourceSelectedKeys: (srcKeys: TransferKey[]) => void,
setTargetSelectedKeys: (srcKeys: TransferKey[]) => void,
] {
// Prepare `dataSource` keys
const [leftKeys, rightKeys] = React.useMemo(
() => [
new Set(leftDataSource.map<React.Key>((src) => src?.key)),
new Set(rightDataSource.map<React.Key>((src) => src?.key)),
],
[leftDataSource, rightDataSource],
);
// Selected Keys
const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState<React.Key[]>(EMPTY_KEYS, {
value: selectedKeys,
});
const sourceSelectedKeys = React.useMemo(
() => filterKeys(mergedSelectedKeys, leftKeys),
[mergedSelectedKeys, leftKeys],
);
const targetSelectedKeys = React.useMemo(
() => filterKeys(mergedSelectedKeys, rightKeys),
[mergedSelectedKeys, rightKeys],
);
// // Reset when data changed
React.useEffect(() => {
setMergedSelectedKeys([
...filterKeys(mergedSelectedKeys, leftKeys),
...filterKeys(mergedSelectedKeys, rightKeys),
]);
}, [flattenKeys(leftKeys), flattenKeys(rightKeys)]);
// Update keys
const setSourceSelectedKeys = useEvent((nextSrcKeys: TransferKey[]) => {
setMergedSelectedKeys([...nextSrcKeys, ...targetSelectedKeys]);
});
const setTargetSelectedKeys = useEvent((nextTargetKeys: TransferKey[]) => {
setMergedSelectedKeys([...sourceSelectedKeys, ...nextTargetKeys]);
});
return [
// Keys
sourceSelectedKeys,
targetSelectedKeys,
// Updater
setSourceSelectedKeys,
setTargetSelectedKeys,
];
}
export default useSelection;