useMultipleSelect.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334
  1. import { useCallback, useState } from 'react';
  2. /**
  3. * @title multipleSelect hooks
  4. * @description multipleSelect by hold down shift key
  5. */
  6. export default function useMultipleSelect(getKey) {
  7. const [prevSelectedIndex, setPrevSelectedIndex] = useState(null);
  8. const multipleSelect = useCallback((currentSelectedIndex, data, selectedKeys) => {
  9. const configPrevSelectedIndex = prevSelectedIndex !== null && prevSelectedIndex !== void 0 ? prevSelectedIndex : currentSelectedIndex;
  10. // add/delete the selected range
  11. const startIndex = Math.min(configPrevSelectedIndex || 0, currentSelectedIndex);
  12. const endIndex = Math.max(configPrevSelectedIndex || 0, currentSelectedIndex);
  13. const rangeKeys = data.slice(startIndex, endIndex + 1).map(item => getKey(item));
  14. const shouldSelected = rangeKeys.some(rangeKey => !selectedKeys.has(rangeKey));
  15. const changedKeys = [];
  16. rangeKeys.forEach(item => {
  17. if (shouldSelected) {
  18. if (!selectedKeys.has(item)) {
  19. changedKeys.push(item);
  20. }
  21. selectedKeys.add(item);
  22. } else {
  23. selectedKeys.delete(item);
  24. changedKeys.push(item);
  25. }
  26. });
  27. setPrevSelectedIndex(shouldSelected ? endIndex : null);
  28. return changedKeys;
  29. }, [prevSelectedIndex]);
  30. const updatePrevSelectedIndex = val => {
  31. setPrevSelectedIndex(val);
  32. };
  33. return [multipleSelect, updatePrevSelectedIndex];
  34. }