@progress/kendo-react-upload/ExternalDropZone.mjs

React Upload component helps users transfer files from their file systems to dedicated server handlers. KendoReact Upload package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import * as e from "react";
import a from "prop-types";
import { validatePackage as M, getLicenseMessage as A, classNames as W, getTabIndex as _, IconWrap as K, WatermarkOverlay as P } from "@progress/kendo-react-common";
import { uploadIcon as F } from "@progress/kendo-svg-icons";
import { IntlService as G, useLocalization as U } from "@progress/kendo-react-intl";
import { dropZoneHint as v, messages as m, dropZoneNote as p, restrictionsDropZoneNote as b } from "./messages/index.mjs";
import { packageMetadata as x } from "./package-metadata.mjs";
const k = 100, R = e.forwardRef((n, O) => {
  const I = !M(x, { component: "ExternalDropZone" }), N = A(x), f = e.useRef(null), l = e.useRef(null), s = e.useRef(null), i = e.useRef(!1), c = e.useRef(null), { uploadRef: r } = n, d = r.current, [z, g] = e.useState(!1), E = e.useMemo(() => new G("en"), []), u = U(), h = u.toLanguageString(v, m[v]), [T, y] = e.useState(
    u.toLanguageString(p, m[p])
  ), Z = n.customHint || /* @__PURE__ */ e.createElement("span", null, h), w = n.customNote || /* @__PURE__ */ e.createElement("span", null, T), C = e.useCallback(() => {
    l.current && l.current.focus();
  }, [l]);
  e.useImperativeHandle(f, () => ({
    element: l.current,
    focus: C,
    props: n
  })), e.useImperativeHandle(O, () => f.current), e.useEffect(() => {
    if (d) {
      const t = d.props.restrictions.allowedExtensions;
      if (t && t.length) {
        const o = E.format(
          u.toLanguageString(b, m[b]),
          [t]
        );
        y(o);
      }
    }
  }, [d, u, E]);
  const D = e.useCallback((t) => (/* @__PURE__ */ new Date()).getTime() - (t || /* @__PURE__ */ new Date()).getTime() > k, []), L = e.useCallback(
    (t) => {
      t.preventDefault();
      const o = t.dataTransfer.files;
      o.length > 0 && !n.disabled && r && r.current && (r.current.onAdd && (t.preventDefault(), r.current.onAdd(o)), n.onDrop && n.onDrop.call(void 0, t));
    },
    [n.disabled, r, n.onDrop]
  ), S = e.useCallback(
    (t) => {
      if (i) {
        i.current = !0;
        const o = () => {
          D(c.current) && (g(!1), i.current = !1, clearInterval(s.current), s.current = null, c.current = null);
        };
        s.current = setInterval(o, k);
      }
      n.onElementDragEnter && n.onElementDragEnter.call(void 0, t);
    },
    [i, s, c, D, n.onElementDragEnter]
  ), H = e.useCallback(
    (t) => {
      t.preventDefault(), c.current = /* @__PURE__ */ new Date(), g(!0), n.onElementDragOver && n.onElementDragOver.call(void 0, t);
    },
    [c, n.onElementDragOver]
  );
  return /* @__PURE__ */ e.createElement(
    "div",
    {
      ref: l,
      id: n.id,
      className: W(
        "k-external-dropzone",
        {
          "k-external-dropzone-hover": z,
          "k-disabled": n.disabled
        },
        n.className
      ),
      tabIndex: _(n.tabIndex, n.disabled, void 0),
      onDrop: L,
      onDragEnter: S,
      onDragOver: H
    },
    /* @__PURE__ */ e.createElement("div", { style: n.style, className: "k-dropzone-inner" }, /* @__PURE__ */ e.createElement(K, { name: "upload", icon: F, className: "k-dropzone-icon", size: "xxxlarge" }), /* @__PURE__ */ e.createElement("span", { className: "k-dropzone-hint" }, Z), /* @__PURE__ */ e.createElement("span", { className: "k-dropzone-note" }, w)),
    I && /* @__PURE__ */ e.createElement(P, { message: N })
  );
}), j = {
  id: a.string,
  tabIndex: a.number,
  editorRef: a.oneOfType([a.func, a.shape({ current: a.any })]),
  disabled: a.bool,
  onDrop: a.func,
  onElementDragEnter: a.func,
  onElementDragOver: a.func
};
R.displayName = "KendoReactExternalDropZone";
R.propTypes = j;
export {
  R as ExternalDropZone
};