@progress/kendo-react-upload/UploadNavigation.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 m=require("react"),n=require("@progress/kendo-react-common"),x=require("./UploadUI.js");function y(h){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const e in h)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(h,e);Object.defineProperty(o,e,i.get?i:{enumerable:!0,get:()=>h[e]})}}return o.default=h,Object.freeze(o)}const I=y(m),d=-2,r=-1;class b extends I.Component{constructor(o){super(o),this._uploadUI=null,this.focus=()=>{this._uploadUI&&this._uploadUI.focus()},this.onKeyDown=(e,i)=>{const t=this.navIndex,p=Object.keys(this.props.groupedFiles),c=p.length-1,f=this.props.autoUpload||p.length===0?c:c+1,u=c+1,v=u+1,l=t===d?r:t;let s=t;switch(e.keyCode){case n.Keys.up:t>-1&&(s=l-1);break;case n.Keys.down:t<f&&(s=l+1);break;case n.Keys.left:i?t===u&&(s=l+1):t===v&&(s=l-1);break;case n.Keys.right:i?t===v&&(s=l-1):t===u&&(s=l+1);break;case n.Keys.enter:if(t===r||t===d){const a=n.getActiveElement(document);this.actionElement&&n.canUseDOM&&(a==null?void 0:a.className.indexOf("k-upload-button"))===-1&&(a==null?void 0:a.className.indexOf("k-upload-selected"))===-1&&(a==null?void 0:a.className.indexOf("k-clear-selected"))===-1&&this.actionElement.click()}t>=0&&t<=c&&this.onRetry(p[t]);break;case n.Keys.space:(t===r||t===d)&&this.actionElement&&this.actionElement.click(),e.preventDefault();break;case n.Keys.tab:s=d;break;case n.Keys.delete:t>=0&&t<=c&&(s=l-1,this.onRemove(p[t]));break;case n.Keys.esc:t>=0&&t<=c&&(s=l-1,this.onCancel(p[t]));break}this.navIndex=s},this.onCancel=e=>{this.props.onCancel&&this.props.onCancel.call(void 0,e)},this.onClear=()=>{this.navIndex=r,this.props.onClear&&this.props.onClear.call(void 0)},this.onUpload=()=>{this.navIndex=r,this.props.onUpload&&this.props.onUpload.call(void 0)},this.onRetry=e=>{this.props.onRetry&&this.props.onRetry.call(void 0,e)},this.onRemove=e=>{this.navIndex=this.navIndex>r?this.navIndex-1:r,this.props.onRemove&&this.props.onRemove.call(void 0,e)},this.onAdd=e=>{this.navIndex=r,this.props.onAdd&&this.props.onAdd.call(void 0,e)},this.onClick=e=>{this.navIndex=e},this.onFocus=()=>{this._blurTimeout&&(clearTimeout(this._blurTimeout),this._blurTimeout=void 0)},this.onBlurTimeout=()=>{this.navIndex=d,this._blurTimeout=void 0},this.onBlur=()=>{clearTimeout(this._blurTimeout),this._blurTimeout=window.setTimeout(this.onBlurTimeout)},this._navIndex=d}get navIndex(){return this._navIndex}set navIndex(o){const e=this.navIndex;this._navIndex=o,o!==e&&this.forceUpdate()}get actionElement(){if(this._uploadUI)return this._uploadUI.actionElement}componentDidUpdate(o){const e=Object.keys(o.groupedFiles).length,i=Object.keys(this.props.groupedFiles).length;e>i&&this.navIndex>r&&(this.navIndex=this.navIndex-(e-i))}render(){const{onClear:o,onRemove:e,onRetry:i,onCancel:t,onUpload:p,onAdd:c,...f}=this.props;return I.createElement(x.UploadUI,{ref:u=>{this._uploadUI=u},className:this.props.className,onKeyDown:this.onKeyDown,navigationIndex:this.navIndex,notFocusedIndex:d,onAdd:this.onAdd,onClear:this.onClear,onUpload:this.onUpload,onRemove:this.onRemove,onRetry:this.onRetry,onCancel:this.onCancel,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur,...f})}}exports.UploadNavigation=b;