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

modern-kit/react

import { useEventListener } from '../useEventListener/index.mjs';
import { useRef, useState } from 'react';
import '../usePreservedCallback/index.mjs';
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 handleDragOver = (e) => {
    e.preventDefault();
  };
  const handleDragEnter = (e) => {
    e.preventDefault();
    counter.current += 1;
    setIsDragOver(true);
  };
  const handleDragLeave = (e) => {
    e.preventDefault();
    counter.current -= 1;
    if (counter.current === 0) {
      setIsDragOver(false);
    }
  };
  const handleDrop = (e) => {
    e.preventDefault();
    setIsDragOver(false);
    const files = e.dataTransfer?.files;
    onDrop(Array.from(files || []));
  };
  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