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

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
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react"),a=require("prop-types"),s=require("@progress/kendo-react-common"),H=require("@progress/kendo-svg-icons"),R=require("@progress/kendo-react-intl"),r=require("./messages/index.js"),x=require("./package-metadata.js");function L(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const m=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(i,o,m.get?m:{enumerable:!0,get:()=>e[o]})}}return i.default=e,Object.freeze(i)}const n=L(q),N=100,v=n.forwardRef((e,i)=>{const o=!s.validatePackage(x.packageMetadata,{component:"ExternalDropZone"}),m=s.getLicenseMessage(x.packageMetadata),b=n.useRef(null),u=n.useRef(null),f=n.useRef(null),g=n.useRef(!1),d=n.useRef(null),{uploadRef:l}=e,D=l.current,[I,p]=n.useState(!1),k=n.useMemo(()=>new R.IntlService("en"),[]),E=R.useLocalization(),y=E.toLanguageString(r.dropZoneHint,r.messages[r.dropZoneHint]),[z,Z]=n.useState(E.toLanguageString(r.dropZoneNote,r.messages[r.dropZoneNote])),S=e.customHint||n.createElement("span",null,y),T=e.customNote||n.createElement("span",null,z),h=n.useCallback(()=>{u.current&&u.current.focus()},[u]);n.useImperativeHandle(b,()=>({element:u.current,focus:h,props:e})),n.useImperativeHandle(i,()=>b.current),n.useEffect(()=>{if(D){const t=D.props.restrictions.allowedExtensions;if(t&&t.length){const c=k.format(E.toLanguageString(r.restrictionsDropZoneNote,r.messages[r.restrictionsDropZoneNote]),[t]);Z(c)}}},[D,E,k]);const O=n.useCallback(t=>new Date().getTime()-(t||new Date).getTime()>N,[]),w=n.useCallback(t=>{t.preventDefault();const c=t.dataTransfer.files;c.length>0&&!e.disabled&&l&&l.current&&(l.current.onAdd&&(t.preventDefault(),l.current.onAdd(c)),e.onDrop&&e.onDrop.call(void 0,t))},[e.disabled,l,e.onDrop]),M=n.useCallback(t=>{if(g){g.current=!0;const c=()=>{O(d.current)&&(p(!1),g.current=!1,clearInterval(f.current),f.current=null,d.current=null)};f.current=setInterval(c,N)}e.onElementDragEnter&&e.onElementDragEnter.call(void 0,t)},[g,f,d,O,e.onElementDragEnter]),C=n.useCallback(t=>{t.preventDefault(),d.current=new Date,p(!0),e.onElementDragOver&&e.onElementDragOver.call(void 0,t)},[d,e.onElementDragOver]);return n.createElement("div",{ref:u,id:e.id,className:s.classNames("k-external-dropzone",{"k-external-dropzone-hover":I,"k-disabled":e.disabled},e.className),tabIndex:s.getTabIndex(e.tabIndex,e.disabled,void 0),onDrop:w,onDragEnter:M,onDragOver:C},n.createElement("div",{style:e.style,className:"k-dropzone-inner"},n.createElement(s.IconWrap,{name:"upload",icon:H.uploadIcon,className:"k-dropzone-icon",size:"xxxlarge"}),n.createElement("span",{className:"k-dropzone-hint"},S),n.createElement("span",{className:"k-dropzone-note"},T)),o&&n.createElement(s.WatermarkOverlay,{message:m}))}),_={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};v.displayName="KendoReactExternalDropZone";v.propTypes=_;exports.ExternalDropZone=v;