@progress/kendo-react-upload
Version:
React Upload component helps users transfer files from their file systems to dedicated server handlers. KendoReact Upload package
97 lines (96 loc) • 4.03 kB
JavaScript
/**
* @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 H, classNames as L, getTabIndex as A, IconWrap as W, WatermarkOverlay as M } from "@progress/kendo-react-common";
import { uploadIcon as _ } from "@progress/kendo-svg-icons";
import { IntlService as K, useLocalization as P } 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 F } from "./package-metadata.mjs";
const x = 100, k = e.forwardRef((n, R) => {
const O = !H(F, { component: "ExternalDropZone" }), 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, [I, E] = e.useState(!1), g = e.useMemo(() => new K("en"), []), u = P(), N = u.toLanguageString(v, m[v]), [z, h] = e.useState(
u.toLanguageString(p, m[p])
), T = n.customHint || /* @__PURE__ */ e.createElement("span", null, N), y = n.customNote || /* @__PURE__ */ e.createElement("span", null, z), Z = e.useCallback(() => {
l.current && l.current.focus();
}, [l]);
e.useImperativeHandle(f, () => ({
element: l.current,
focus: Z,
props: n
})), e.useImperativeHandle(R, () => f.current), e.useEffect(() => {
if (d) {
const t = d.props.restrictions.allowedExtensions;
if (t && t.length) {
const o = g.format(
u.toLanguageString(b, m[b]),
[t]
);
h(o);
}
}
}, [d, u, g]);
const D = e.useCallback((t) => (/* @__PURE__ */ new Date()).getTime() - (t || /* @__PURE__ */ new Date()).getTime() > x, []), w = 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]
), C = e.useCallback(
(t) => {
if (i) {
i.current = !0;
const o = () => {
D(c.current) && (E(!1), i.current = !1, clearInterval(s.current), s.current = null, c.current = null);
};
s.current = setInterval(o, x);
}
n.onElementDragEnter && n.onElementDragEnter.call(void 0, t);
},
[i, s, c, D, n.onElementDragEnter]
), S = e.useCallback(
(t) => {
t.preventDefault(), c.current = /* @__PURE__ */ new Date(), E(!0), n.onElementDragOver && n.onElementDragOver.call(void 0, t);
},
[c, n.onElementDragOver]
);
return /* @__PURE__ */ e.createElement(
"div",
{
ref: l,
id: n.id,
className: L(
"k-external-dropzone",
{
"k-external-dropzone-hover": I,
"k-disabled": n.disabled
},
n.className
),
tabIndex: A(n.tabIndex, n.disabled, void 0),
onDrop: w,
onDragEnter: C,
onDragOver: S
},
/* @__PURE__ */ e.createElement("div", { style: n.style, className: "k-dropzone-inner" }, /* @__PURE__ */ e.createElement(W, { name: "upload", icon: _, className: "k-dropzone-icon", size: "xxxlarge" }), /* @__PURE__ */ e.createElement("span", { className: "k-dropzone-hint" }, T), /* @__PURE__ */ e.createElement("span", { className: "k-dropzone-note" }, y)),
O && /* @__PURE__ */ e.createElement(M, null)
);
}), G = {
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
};
k.displayName = "KendoReactExternalDropZone";
k.propTypes = G;
export {
k as ExternalDropZone
};