packages/drive-store/components/FileBrowser/hooks/useFileBrowserCheckbox.ts

   1 import type { ChangeEvent, MouseEvent } from 'react';
   2 import { useCallback } from 'react';
   3
   4 import { useSelection } from '../state/useSelection';
   5
   6 export const useFileBrowserCheckbox = (id: string) => {
   7     const selectionControls = useSelection();
   8     const isSelected = Boolean(selectionControls?.isSelected(id));
   9
  10     const handleCheckboxChange = useCallback((e: ChangeEvent<HTMLElement>) => {
  11         const el = document.activeElement ?? e.currentTarget;
  12         if (isSelected && 'blur' in el) {
  13             (el as any).blur();
  14         }
  15     }, []);
  16
  17     const handleCheckboxClick = useCallback(
  18         (e: MouseEvent<HTMLElement>) => {
  19             if (!e.shiftKey) {
  20                 selectionControls?.toggleSelectItem(id);
  21             }
  22         },
  23         [selectionControls?.toggleSelectItem]
  24     );
  25
  26     const handleCheckboxWrapperClick = useCallback(
  27         (e: MouseEvent<HTMLElement>) => {
  28             e.stopPropagation();
  29             // Wrapper handles shift key, because FF has issues: https://bugzilla.mozilla.org/show_bug.cgi?id=559506
  30             if (e.shiftKey) {
  31                 selectionControls?.toggleRange?.(id);
  32             }
  33         },
  34         [selectionControls?.toggleRange]
  35     );
  36
  37     return {
  38         handleCheckboxChange,
  39         handleCheckboxClick,
  40         handleCheckboxWrapperClick,
  41     };
  42 };