packages/components/hooks/useDragMove.ts

   1 import type { DragEvent, ReactNode } from 'react';
   2 import { useEffect, useMemo, useRef } from 'react';
   3 import { createPortal } from 'react-dom';
   4
   5 interface DragMoveContentProps<T> {
   6     data?: T;
   7     dragging?: boolean;
   8     children: ReactNode;
   9 }
  10
  11 interface UseDragMoveParams {
  12     dragging: boolean;
  13     setDragging: (value: boolean) => void;
  14     format?: string;
  15     formatter?: (value: any) => string;
  16 }
  17
  18 function useDragMove({ dragging, setDragging, format = 'text/plain', formatter = (str) => str }: UseDragMoveParams) {
  19     const container = useRef<HTMLDivElement>();
  20     const transferData = useRef<any>();
  21
  22     const handleDragStart = (event: DragEvent<HTMLTableRowElement>) => {
  23         if (!container.current) {
  24             container.current = document.createElement('div');
  25             container.current.className = 'absolute';
  26         }
  27         document.body.appendChild(container.current);
  28         event.dataTransfer.setDragImage(container.current, 0, 0);
  29         event.dataTransfer.setData(format, formatter(transferData.current));
  30         setDragging(true);
  31     };
  32
  33     const handleDragEnd = () => {
  34         if (container.current) {
  35             document.body.removeChild(container.current);
  36         }
  37
  38         setDragging(false);
  39     };
  40
  41     const DragMoveContent = useMemo(
  42         () =>
  43             function Component<T>({ children, data, dragging }: DragMoveContentProps<T>) {
  44                 transferData.current = data;
  45
  46                 useEffect(() => {
  47                     return () => {
  48                         transferData.current = undefined;
  49                     };
  50                 }, []);
  51
  52                 if (dragging && container.current) {
  53                     return createPortal(children, container.current);
  54                 }
  55                 return null;
  56             },
  57         []
  58     );
  59
  60     return { dragging, handleDragEnd, handleDragStart, DragMoveContent };
  61 }
  62
  63 export default useDragMove;