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

modern-kit/react

'use strict';

var hooksUseEventListener = require('../useEventListener/index.cjs');
var React = require('react');
require('../usePreservedCallback/index.cjs');
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 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 || []));
  };
  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