@progress/kendo-react-upload
Version:
React Upload component helps users transfer files from their file systems to dedicated server handlers. KendoReact Upload package
119 lines (118 loc) • 4.53 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 v from "react";
import { Keys as s, getActiveElement as I, canUseDOM as m } from "@progress/kendo-react-common";
import { UploadUI as x } from "./UploadUI.mjs";
const r = -2, i = -1;
class C extends v.Component {
constructor(l) {
super(l), this._uploadUI = null, this.focus = () => {
this._uploadUI && this._uploadUI.focus();
}, this.onKeyDown = (o, d) => {
const e = this.navIndex, c = Object.keys(this.props.groupedFiles), h = c.length - 1, u = this.props.autoUpload || c.length === 0 ? h : h + 1, p = h + 1, f = p + 1, a = e === r ? i : e;
let n = e;
switch (o.keyCode) {
case s.up:
e > -1 && (n = a - 1);
break;
case s.down:
e < u && (n = a + 1);
break;
case s.left:
d ? e === p && (n = a + 1) : e === f && (n = a - 1);
break;
case s.right:
d ? e === f && (n = a - 1) : e === p && (n = a + 1);
break;
case s.enter:
if (e === i || e === r) {
const t = I(document);
this.actionElement && m && (t == null ? void 0 : t.className.indexOf("k-upload-button")) === -1 && (t == null ? void 0 : t.className.indexOf("k-upload-selected")) === -1 && (t == null ? void 0 : t.className.indexOf("k-clear-selected")) === -1 && this.actionElement.click();
}
e >= 0 && e <= h && this.onRetry(c[e]);
break;
case s.space:
(e === i || e === r) && this.actionElement && this.actionElement.click(), o.preventDefault();
break;
case s.tab:
n = r;
break;
case s.delete:
e >= 0 && e <= h && (n = a - 1, this.onRemove(c[e]));
break;
case s.esc:
e >= 0 && e <= h && (n = a - 1, this.onCancel(c[e]));
break;
}
this.navIndex = n;
}, this.onCancel = (o) => {
this.props.onCancel && this.props.onCancel.call(void 0, o);
}, this.onClear = () => {
this.navIndex = i, this.props.onClear && this.props.onClear.call(void 0);
}, this.onUpload = () => {
this.navIndex = i, this.props.onUpload && this.props.onUpload.call(void 0);
}, this.onRetry = (o) => {
this.props.onRetry && this.props.onRetry.call(void 0, o);
}, this.onRemove = (o) => {
this.navIndex = this.navIndex > i ? this.navIndex - 1 : i, this.props.onRemove && this.props.onRemove.call(void 0, o);
}, this.onAdd = (o) => {
this.navIndex = i, this.props.onAdd && this.props.onAdd.call(void 0, o);
}, this.onClick = (o) => {
this.navIndex = o;
}, this.onFocus = () => {
this._blurTimeout && (clearTimeout(this._blurTimeout), this._blurTimeout = void 0);
}, this.onBlurTimeout = () => {
this.navIndex = r, this._blurTimeout = void 0;
}, this.onBlur = () => {
clearTimeout(this._blurTimeout), this._blurTimeout = window.setTimeout(this.onBlurTimeout);
}, this._navIndex = r;
}
get navIndex() {
return this._navIndex;
}
set navIndex(l) {
const o = this.navIndex;
this._navIndex = l, l !== o && this.forceUpdate();
}
get actionElement() {
if (this._uploadUI)
return this._uploadUI.actionElement;
}
componentDidUpdate(l) {
const o = Object.keys(l.groupedFiles).length, d = Object.keys(this.props.groupedFiles).length;
o > d && this.navIndex > i && (this.navIndex = this.navIndex - (o - d));
}
render() {
const { onClear: l, onRemove: o, onRetry: d, onCancel: e, onUpload: c, onAdd: h, ...u } = this.props;
return /* @__PURE__ */ v.createElement(
x,
{
ref: (p) => {
this._uploadUI = p;
},
className: this.props.className,
onKeyDown: this.onKeyDown,
navigationIndex: this.navIndex,
notFocusedIndex: r,
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,
...u
}
);
}
}
export {
C as UploadNavigation
};