@modern-kit/react/dist/hooks/useDropZone/index.mjs

modern-kit/react

import { useEventListener } from '../useEventListener/index.mjs';
import { usePreservedCallback } from '../usePreservedCallback/index.mjs';
import { useRef, useState, useCallback } from 'react';
import '../useIsomorphicLayoutEffect/index.mjs';
import '@modern-kit/utils';

const useDropZone = (onDrop) => {
  const ref = useRef(null);
  const counter = useRef(0);
  const [isDragOver, setIsDragOver] = useState(false);
  const preservedDropCallback = usePreservedCallback(onDrop);
  const handleDragOver = useCallback((e) => {
    e.preventDefault();
  }, []);
  const handleDragEnter = useCallback((e) => {
    e.preventDefault();
    counter.current += 1;
    setIsDragOver(true);
  }, []);
  const handleDragLeave = useCallback((e) => {
    e.preventDefault();
    counter.current -= 1;
    if (counter.current === 0) {
      setIsDragOver(false);
    }
  }, []);
  const handleDrop = useCallback(
    (e) => {
      e.preventDefault();
      setIsDragOver(false);
      const files = e.dataTransfer?.files;
      preservedDropCallback(Array.from(files || []));
    },
    [preservedDropCallback]
  );
  useEventListener(ref, "dragover", handleDragOver);
  useEventListener(ref, "dragenter", handleDragEnter);
  useEventListener(ref, "dragleave", handleDragLeave);
  useEventListener(ref, "drop", handleDrop);
  return { ref, isDragOver };
};

export { useDropZone };
//# sourceMappingURL=index.mjs.map