@progress/kendo-react-upload
Version:
React Upload component helps users transfer files from their file systems to dedicated server handlers. KendoReact Upload package
89 lines (88 loc) • 3.98 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 n from "react";
import { classNames as a } from "@progress/kendo-react-common";
import { provideLocalizationService as h, registerForLocalization as u } from "@progress/kendo-react-intl";
import { dropFilesHere as l, messages as p } from "./messages/index.mjs";
import D from "./utils/utils.mjs";
import { UploadStatus as g } from "./UploadStatus.mjs";
const r = 100;
class A extends n.Component {
constructor() {
super(...arguments), this._lastDocumentDragOver = null, this._lastElementDragOver = null, this._documentActive = !1, this._elementActive = !1, this.onDocumentDragEnter = () => {
if (!this.documentActive) {
this.documentActive = !0;
const e = () => {
this.isDragOver(this._lastDocumentDragOver) && (this.documentActive = !1, clearInterval(this._documentInterval), this._documentInterval = null, this._lastDocumentDragOver = null);
};
this._documentInterval = setInterval(e, r);
}
}, this.onDocumentDragOver = () => {
this._lastDocumentDragOver = /* @__PURE__ */ new Date();
}, this.onElementDragEnter = () => {
if (!this.elementActive) {
this.elementActive = !0;
const e = () => {
this.isDragOver(this._lastElementDragOver) && (this.elementActive = !1, clearInterval(this._elementInterval), this._elementInterval = null, this._lastElementDragOver = null);
};
this._elementInterval = setInterval(e, r);
}
}, this.onElementDragOver = (e) => {
e.preventDefault(), this._lastElementDragOver = /* @__PURE__ */ new Date();
}, this.onDrop = (e) => {
e.preventDefault();
const t = e.dataTransfer.files;
t.length > 0 && !this.props.disabled && this.props.onAdd && (this.props.multiple || t.length <= 1) && this.props.onAdd.call(void 0, t);
}, this.isDragOver = (e) => (/* @__PURE__ */ new Date()).getTime() - (e || /* @__PURE__ */ new Date()).getTime() > r;
}
get documentActive() {
return this._documentActive;
}
set documentActive(e) {
const t = this.documentActive;
this._documentActive = e, e !== t && this.forceUpdate();
}
get elementActive() {
return this._elementActive;
}
set elementActive(e) {
const t = this._elementActive;
this._elementActive = e, e !== t && this.setState({});
}
componentDidMount() {
document.addEventListener("dragenter", this.onDocumentDragEnter), document.addEventListener("dragover", this.onDocumentDragOver);
}
componentWillUnmount() {
document.removeEventListener("dragenter", this.onDocumentDragEnter), document.removeEventListener("dragover", this.onDocumentDragOver);
}
render() {
const { addButtonComponent: e, fileGroup: t } = this.props, c = h(this).toLanguageString(l, p[l]), m = a(
"k-dropzone k-upload-dropzone",
this.documentActive ? "k-dropzone-active" : "",
this.elementActive ? "k-dropzone-hovered" : ""
), [o, i, s, v] = D.getFileStatus(t), d = a("k-dropzone-hint", {
// Unsure about that, since it hides the "Drop Files Message" when we remove all uploaded components.
// 'k-hidden': this.isDragged && !this.elementActive
});
return /* @__PURE__ */ n.createElement(
"div",
{
className: m,
onDrop: this.onDrop,
onDragEnter: this.onElementDragEnter,
onDragOver: this.onElementDragOver
},
e,
o || i || s || v ? /* @__PURE__ */ n.createElement(g, { isUploading: o, isUploaded: i, isUploadFailed: s }) : /* @__PURE__ */ n.createElement("div", { className: d }, c)
);
}
}
u(A);
export {
A as UploadDropZone
};