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