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

modern-kit/react

'use strict';

var hooksUseEventListener = require('../useEventListener/index.cjs');
var hooksUsePreservedCallback = require('../usePreservedCallback/index.cjs');
var React = require('react');
require('../useIsomorphicLayoutEffect/index.cjs');
require('@modern-kit/utils');

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

exports.useDropZone = useDropZone;
//# sourceMappingURL=index.cjs.map