@progress/kendo-react-upload/UploadUI.mjs

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
 *-------------------------------------------------------------------------------------------
 */
import * as s from "react";
import { classNames as x, withIdHOC as A } from "@progress/kendo-react-common";
import { UploadList as k } from "./UploadList.mjs";
import { UploadAddButton as U } from "./UploadAddButton.mjs";
import { UploadActionButtons as R } from "./UploadActionButtons.mjs";
import { UploadDropZone as F } from "./UploadDropZone.mjs";
const _ = -1, f = class f extends s.Component {
  constructor() {
    super(...arguments), this._container = null, this._uploadAddButton = null, this.focus = () => {
      if (this._uploadAddButton)
        return this._uploadAddButton.focus();
    }, this.onAdd = (t) => {
      this.props.onAdd && this.props.onAdd.call(void 0, t);
    }, this.onRetry = (t) => {
      this.props.onRetry && this.props.onRetry.call(void 0, t);
    }, this.onCancel = (t) => {
      this.props.onCancel && this.props.onCancel.call(void 0, t);
    }, this.onClear = () => {
      this.props.onClear && this.props.onClear.call(void 0);
    }, this.onUpload = () => {
      this.props.onUpload && this.props.onUpload.call(void 0);
    }, this.onRemove = (t) => {
      this.props.onRemove && this.props.onRemove.call(void 0, t);
    }, this.onKeyDown = (t) => {
      this.props.onKeyDown && this.props.onKeyDown.call(void 0, t, this.isRtl);
    }, this.onFocus = (t) => {
      this.props.onFocus && this.props.onFocus.call(void 0, t);
    }, this.onBlur = (t) => {
      this.props.onBlur && this.props.onBlur.call(void 0, t);
    }, this.onClick = (t) => {
      this.props.onClick && this.props.onClick.call(void 0, t);
    };
  }
  get async() {
    const {
      autoUpload: t,
      batch: o,
      withCredentials: r,
      saveField: d,
      saveHeaders: i,
      saveMethod: e,
      saveUrl: n,
      responseType: a,
      removeField: p,
      removeHeaders: c,
      removeMethod: h,
      removeUrl: l
    } = this.props;
    return {
      autoUpload: t,
      batch: o,
      withCredentials: r,
      saveField: d,
      saveHeaders: i,
      saveMethod: e,
      saveUrl: n,
      responseType: a,
      removeField: p,
      removeHeaders: c,
      removeMethod: h,
      removeUrl: l
    };
  }
  get groupsCount() {
    return Object.keys(this.props.groupedFiles).length;
  }
  get lastGroupIndex() {
    return this.groupsCount - 1;
  }
  get addButtonIndex() {
    return _;
  }
  get clearButtonIndex() {
    return this.lastGroupIndex + 1;
  }
  get uploadButtonIndex() {
    return this.lastGroupIndex + 2;
  }
  get isRtl() {
    return this._container && getComputedStyle(this._container).direction === "rtl" || !1;
  }
  /**
   * @hidden
   */
  get actionElement() {
    if (this._uploadAddButton)
      return this._uploadAddButton.actionElement;
  }
  /**
   * @hidden
   */
  render() {
    const {
      multiple: t,
      disabled: o,
      tabIndex: r,
      accept: d,
      showFileList: i,
      groupedFiles: e,
      navigationIndex: n,
      showActionButtons: a,
      actionsLayout: p,
      notFocusedIndex: c,
      listItemUI: h,
      id: l,
      ariaLabelledBy: B,
      ariaDescribedBy: y,
      selectMessageUI: C
    } = this.props, I = x(
      "k-upload",
      { "k-upload-empty": Object.keys(e).length === 0 },
      this.props.className,
      o ? "k-disabled" : ""
    ), v = `${l}-list`, g = /* @__PURE__ */ s.createElement(
      U,
      {
        id: l,
        ariaLabelledBy: B,
        ariaDescribedBy: y,
        ref: (u) => {
          this._uploadAddButton = u;
        },
        accept: d,
        async: this.async,
        addButtonIndex: this.addButtonIndex,
        navigationIndex: n,
        notFocusedIndex: c,
        tabIndex: r,
        multiple: t,
        disabled: o,
        hasFiles: e ? Object.keys(e).length > 0 : !1,
        selectMessageUI: C,
        onAdd: this.onAdd,
        onClick: this.onClick,
        ariaControls: v,
        ariaExpanded: i
      }
    );
    return /* @__PURE__ */ s.createElement(
      "div",
      {
        ref: (u) => {
          this._container = u;
        },
        className: I,
        onKeyDown: this.onKeyDown,
        onFocus: this.onFocus,
        onBlur: this.onBlur
      },
      /* @__PURE__ */ s.createElement(
        F,
        {
          addButtonComponent: g,
          fileGroup: e,
          disabled: o,
          multiple: t,
          onAdd: this.onAdd
        }
      ),
      i ? /* @__PURE__ */ s.createElement(
        k,
        {
          groupedFiles: e,
          disabled: o,
          async: this.async,
          navigationIndex: n,
          listItemUI: h,
          onCancel: this.onCancel,
          onRemove: this.onRemove,
          onRetry: this.onRetry,
          onClick: this.onClick,
          listId: v
        }
      ) : void 0,
      a ? /* @__PURE__ */ s.createElement(
        R,
        {
          disabled: o,
          navigationIndex: n,
          clearButtonIndex: this.clearButtonIndex,
          uploadButtonIndex: this.uploadButtonIndex,
          actionsLayout: p,
          onUpload: this.onUpload,
          onClear: this.onClear,
          onClick: this.onClick
        }
      ) : void 0
    );
  }
};
f.defaultProps = {
  disabled: !1,
  groupedFiles: {},
  multiple: !0,
  actionsLayout: "end"
};
let m = f;
const b = A(
  m
);
b.displayName = "KendoReactUploadUI";
export {
  b as UploadUI,
  m as UploadUIClassComponent
};