@wordpress/media-utils
Version:
WordPress Media Upload Utils.
157 lines (155 loc) • 6.17 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/media-utils/src/components/media-upload-modal/upload-status-popover.tsx
var upload_status_popover_exports = {};
__export(upload_status_popover_exports, {
UploadStatusPopover: () => UploadStatusPopover
});
module.exports = __toCommonJS(upload_status_popover_exports);
var import_element = require("@wordpress/element");
var import_i18n = require("@wordpress/i18n");
var import_components = require("@wordpress/components");
var import_icons = require("@wordpress/icons");
var import_jsx_runtime = require("react/jsx-runtime");
function UploadStatusPopover({
uploadingFiles,
onDismissError,
onOpenChange
}) {
const [isOpen, setIsOpen] = (0, import_element.useState)(false);
const [prevHadErrors, setPrevHadErrors] = (0, import_element.useState)(false);
const triggerRef = (0, import_element.useRef)(null);
const updateIsOpen = (0, import_element.useCallback)(
(open) => {
setIsOpen(open);
onOpenChange?.(open);
},
[onOpenChange]
);
const activeFiles = uploadingFiles.filter(
(file) => file.status === "uploading"
);
const errorFiles = uploadingFiles.filter(
(file) => file.status === "error"
);
const hasErrors = errorFiles.length > 0;
const isUploading = activeFiles.length > 0;
(0, import_element.useEffect)(() => {
if (hasErrors && !prevHadErrors) {
updateIsOpen(true);
}
setPrevHadErrors(hasErrors);
}, [hasErrors, prevHadErrors, updateIsOpen]);
if (uploadingFiles.length === 0) {
return null;
}
let buttonLabel, popoverHeading;
if (isUploading) {
buttonLabel = (0, import_i18n.sprintf)(
// translators: %s: number of files being uploaded
(0, import_i18n._n)("Uploading %s file", "Uploading %s files", activeFiles.length),
activeFiles.length.toLocaleString()
);
popoverHeading = (0, import_i18n.__)("Uploading");
} else if (hasErrors) {
buttonLabel = (0, import_i18n.sprintf)(
// translators: %s: number of upload errors
(0, import_i18n._n)("%s upload error", "%s upload errors", errorFiles.length),
errorFiles.length.toLocaleString()
);
popoverHeading = (0, import_i18n.__)("Upload errors");
} else {
buttonLabel = (0, import_i18n.__)("Upload complete");
popoverHeading = (0, import_i18n.__)("Upload complete");
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "media-upload-modal__upload-status", children: [
isUploading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.Button,
{
className: "media-upload-modal__upload-status__trigger",
size: "compact",
icon: import_icons.chevronDown,
iconPosition: "right",
onClick: () => updateIsOpen(!isOpen),
"aria-expanded": isOpen,
ref: triggerRef,
children: buttonLabel
}
),
isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_components.Popover,
{
className: "media-upload-modal__upload-status__popover",
placement: "top-start",
offset: 8,
anchor: triggerRef.current,
focusOnMount: true,
onClose: () => {
if (triggerRef.current?.contains(
triggerRef.current.ownerDocument.activeElement
)) {
return;
}
updateIsOpen(false);
},
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "media-upload-modal__upload-status__header", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: popoverHeading }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "media-upload-modal__upload-status__list", children: uploadingFiles.map((file) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"li",
{
className: "media-upload-modal__upload-status__item",
children: [
file.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}),
file.status === "uploaded" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Icon, { icon: import_icons.check, size: 16 }),
(file.status === "uploading" || file.status === "uploaded") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"span",
{
className: "media-upload-modal__upload-status__filename",
title: file.name,
children: file.name
}
),
file.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_components.Notice,
{
status: "error",
isDismissible: !!onDismissError,
onRemove: () => onDismissError?.(file.id),
children: [
file.name,
": ",
file.error
]
}
)
]
},
file.id
)) })
]
}
)
] });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
UploadStatusPopover
});
//# sourceMappingURL=upload-status-popover.cjs.map