mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-25 08:43:57 +08:00
5a45276565
* feat: add useMultipleSelect hooks * docs: update README * chore: update size limit * refactor: prevSelectedIndex ref to state、initial value * refactor: useMultipleSelect * refactor: reset last select key after deselect * chore: useMultipleSelect params type * refactor: should params key be in useMultipleSelect hooks * feat: getKey must be required * chore: useless code * refactor: remove useless code * feat: onItemSelect params event must be required * feat: remove params event * chore: remove onItemSelect params event; refactor transfer listBody onClick fnName * revert(modal): revert modal demo dark * refactor: props onItemSelect * refactor: onItemSelect fn name * refactor: transfer children type * refactor: renderList props * test: add test case * chore: args -> arguments * test(transfer): add test case --------- Signed-off-by: kyriewen <64134946+zbw-zbw@users.noreply.github.com> Co-authored-by: zbw01218944 <zbw01218944@alibaba-inc.com>
48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import { useCallback, useState } from 'react';
|
|
|
|
export type PrevSelectedIndex = null | number;
|
|
|
|
/**
|
|
* @title multipleSelect hooks
|
|
* @description multipleSelect by hold down shift key
|
|
*/
|
|
export default function useMultipleSelect<T, K>(getKey: (item: T) => K) {
|
|
const [prevSelectedIndex, setPrevSelectedIndex] = useState<PrevSelectedIndex>(null);
|
|
|
|
const multipleSelect = useCallback(
|
|
(currentSelectedIndex: number, data: T[], selectedKeys: Set<K>) => {
|
|
const configPrevSelectedIndex = prevSelectedIndex ?? currentSelectedIndex;
|
|
|
|
// add/delete the selected range
|
|
const startIndex = Math.min(configPrevSelectedIndex || 0, currentSelectedIndex);
|
|
const endIndex = Math.max(configPrevSelectedIndex || 0, currentSelectedIndex);
|
|
const rangeKeys = data.slice(startIndex, endIndex + 1).map((item) => getKey(item));
|
|
const shouldSelected = rangeKeys.some((rangeKey) => !selectedKeys.has(rangeKey));
|
|
const changedKeys: K[] = [];
|
|
|
|
rangeKeys.forEach((item) => {
|
|
if (shouldSelected) {
|
|
if (!selectedKeys.has(item)) {
|
|
changedKeys.push(item);
|
|
}
|
|
selectedKeys.add(item);
|
|
} else {
|
|
selectedKeys.delete(item);
|
|
changedKeys.push(item);
|
|
}
|
|
});
|
|
|
|
setPrevSelectedIndex(shouldSelected ? endIndex : null);
|
|
|
|
return changedKeys;
|
|
},
|
|
[prevSelectedIndex],
|
|
);
|
|
|
|
const updatePrevSelectedIndex = (val: PrevSelectedIndex) => {
|
|
setPrevSelectedIndex(val);
|
|
};
|
|
|
|
return [multipleSelect, updatePrevSelectedIndex] as const;
|
|
}
|