@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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
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 && target && containerElm.contains(target);
};
const UploadDropZone = /*#__PURE__*/(0, _react.forwardRef)(({
  className,
  id,
  children,
  onDragOverClassName,
  dropHandler,
  htmlDirContentParams,
  shouldRemoveDragOver,
  shouldHandleDrag,
  enableOnContains = true,
  noContainCheckForDrag = false,
  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)();
  (0, _react.useLayoutEffect)(() => {
    uploadOptionsRef.current = uploadOptions;
  }, [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) || noContainCheckForDrag;
    if (isHandling) {
      dragLeaveTrackerRef.current = true;
      if (containerRef.current && onDragOverClassName) {
        containerRef.current.classList.add(onDragOverClassName);
      }
    }
  }, [onDragOverClassName, containerRef, shouldHandleDrag, enableOnContains, noContainCheckForDrag]);
  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;