@progress/kendo-react-upload
Version:
React Upload component helps users transfer files from their file systems to dedicated server handlers. KendoReact Upload package
55 lines (54 loc) • 3.32 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 a from "react";
import { classNames as v, IconWrap as F } from "@progress/kendo-react-common";
import { ProgressBar as N } from "@progress/kendo-react-progressbars";
import r from "./utils/utils.mjs";
import { provideLocalizationService as m, registerForLocalization as S } from "@progress/kendo-react-intl";
import { messages as o, total as c, files as p, statusUploadFailed as g, statusUploaded as u } from "./messages/index.mjs";
import { UploadListActionButton as $ } from "./UploadListActionButton.mjs";
import { copyIcon as M } from "@progress/kendo-svg-icons";
class z extends a.Component {
constructor() {
super(...arguments), this.mapFiles = () => {
const { files: e } = this.props;
return e.map((s) => /* @__PURE__ */ a.createElement("span", { key: s.name, className: "k-file-info" }, /* @__PURE__ */ a.createElement("span", { className: "k-file-name", title: s.name }, s.name), r.fileHasValidationErrors(s) ? /* @__PURE__ */ a.createElement("span", { className: "k-file-validation-message", "aria-live": "polite" }, this.getFileValidationMessage(s)) : /* @__PURE__ */ a.createElement("span", { key: `${s.name}-size`, className: "k-file-size" }, r.getTotalFilesSizeMessage([s]))));
}, this.progress = () => {
const { files: e } = this.props;
let s = 0;
return e.forEach((t) => {
s += t.progress || 0;
}), s / e.length;
};
}
/**
* @hidden
*/
getFileValidationMessage(e) {
const s = m(this);
let t = "";
if (e.validationErrors && e.validationErrors.length > 0) {
const i = `upload.${e.validationErrors[0]}`;
t = s.toLanguageString(i, o[i]);
}
return t;
}
render() {
const { files: e, ...s } = this.props, [, t, i, d] = r.getFileStatus(e), l = m(this), f = l.toLanguageString(c, o[c]), E = l.toLanguageString(p, o[p]), h = l.toLanguageString(
g,
o[g]
), k = l.toLanguageString(u, o[u]), n = this.progress();
return /* @__PURE__ */ a.createElement("div", { className: v("k-file-multiple") }, !d && !t && !i && /* @__PURE__ */ a.createElement(N, { value: n || 0 }), /* @__PURE__ */ a.createElement("span", { className: "k-file-icon-wrapper" }, /* @__PURE__ */ a.createElement(F, { className: "k-file-icon", name: "copy", icon: M, size: "xxlarge" })), /* @__PURE__ */ a.createElement("span", { className: "k-multiple-files-wrapper" }, this.mapFiles(), i ? /* @__PURE__ */ a.createElement("span", { className: "k-file-validation-message", "aria-live": "polite" }, `${e.length} ${h}`) : n !== 100 ? /* @__PURE__ */ a.createElement("span", { className: "k-file-summary" }, `${f}: ${e.length} ${E}, ${r.getTotalFilesSizeMessage(
e
)}`) : /* @__PURE__ */ a.createElement("span", { className: "k-file-summary k-text-success" }, `${e.length} ${k}`)), /* @__PURE__ */ a.createElement($, { uid: e[0].uid, status: e[0].status, progress: n, ...s }));
}
}
S(z);
export {
z as UploadListMultiItem
};