@rpldy/upload-drop-zone/lib/cjs/UploadDropZone.js

drop zone (container) component to initiate file and folder content uploads

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _htmlDirContent = require("html-dir-content");
var _shared = require("@rpldy/shared");
var _sharedUi = require("@rpldy/shared-ui");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const getShouldHandleDrag = (e, shouldHandle) => (0, _shared.isEmpty)(shouldHandle) || shouldHandle === true || (0, _shared.isFunction)(shouldHandle) && shouldHandle(e);
const isOnTarget = (e, containerElm, allowContains) => {
  const target = e.type === "dragleave" ? e.relatedTarget : e.target;
  return target === containerElm || allowContains && containerElm?.contains(target);
};
const UploadDropZone = /*#__PURE__*/(0, _react.forwardRef)(({
  className,
  id,
  children,
  onDragOverClassName,
  dropHandler,
  htmlDirContentParams,
  shouldRemoveDragOver,
  shouldHandleDrag,
  enableOnContains = true,
  extraProps,
  ...uploadOptions
}, ref) => {
  const {
    upload
  } = (0, _sharedUi.useUploadyContext)();
  const containerRef = (0, _react.useRef)(null);
  const dragLeaveTrackerRef = (0, _react.useRef)(false);
  (0, _react.useImperativeHandle)(ref, () => containerRef.current, []);
  const uploadOptionsRef = (0, _react.useRef)();
  uploadOptionsRef.current = uploadOptions;
  const handleEnd = (0, _react.useCallback)(() => {
    dragLeaveTrackerRef.current = false;
    if (containerRef.current && onDragOverClassName) {
      containerRef.current.classList.remove(onDragOverClassName);
    }
  }, [onDragOverClassName, containerRef]);
  const dropFileHandler = (0, _react.useCallback)(e => {
    const getFiles = () => (0, _htmlDirContent.getFilesFromDragEvent)(e, htmlDirContentParams || {});
    return dropHandler ? Promise.resolve(dropHandler(e, getFiles)) : getFiles();
  }, [dropHandler, htmlDirContentParams]);
  const handleDropUpload = (0, _react.useCallback)(e => {
    dropFileHandler(e).then(files => {
      upload(files, uploadOptionsRef.current);
    });
  }, [upload, dropFileHandler, uploadOptionsRef]);
  const onDragEnter = (0, _react.useCallback)(e => {
    const isHandling = getShouldHandleDrag(e, shouldHandleDrag) && isOnTarget(e, containerRef.current, enableOnContains);
    if (isHandling) {
      dragLeaveTrackerRef.current = true;
      if (containerRef.current && onDragOverClassName) {
        containerRef.current.classList.add(onDragOverClassName);
      }
    }
  }, [onDragOverClassName, containerRef, shouldHandleDrag, enableOnContains]);
  const onDragOver = (0, _react.useCallback)(e => {
    if (dragLeaveTrackerRef.current) {
      e.preventDefault();
    }
  }, []);
  const onDrop = (0, _react.useCallback)(e => {
    if (dragLeaveTrackerRef.current) {
      e.preventDefault();
      e.persist();
      handleEnd();
      handleDropUpload(e);
    }
  }, [handleEnd, handleDropUpload]);
  const onDragLeave = (0, _react.useCallback)(e => {
    if (dragLeaveTrackerRef.current && !isOnTarget(e, containerRef.current, enableOnContains) || shouldRemoveDragOver?.(e)) {
      handleEnd();
    }
  }, [handleEnd, containerRef, shouldRemoveDragOver, enableOnContains]);
  const onDragEnd = (0, _react.useCallback)(e => {
    if (dragLeaveTrackerRef.current) {
      e.preventDefault();
      e.stopPropagation();
      handleEnd();
    }
  }, [handleEnd]);
  return /*#__PURE__*/_react.default.createElement("div", _extends({
    id: id,
    className: className,
    ref: containerRef,
    onDragOver: onDragOver,
    onDragEnter: onDragEnter,
    onDrop: onDrop,
    onDragLeave: onDragLeave,
    onDragEnd: onDragEnd
  }, extraProps), children);
});
(0, _sharedUi.markAsUploadOptionsComponent)(UploadDropZone);
var _default = exports.default = UploadDropZone;