ant-design/components/_util/hooks/useMultipleSelect.ts
kyriewen 5a45276565
feat: Add useMultipleSelect hooks, transfer supports multiple select by holding down the shift key. (#45285)
* 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>
2023-10-26 11:46:22 +08:00

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;
}