@wordpress/media-utils
Version:
WordPress Media Upload Utils.
132 lines (131 loc) • 4.49 kB
JavaScript
// packages/media-utils/src/components/media-upload-modal/upload-status-popover.tsx
import { useState, useEffect, useCallback, useRef } from "@wordpress/element";
import { __, sprintf, _n } from "@wordpress/i18n";
import { Button, Icon, Notice, Popover, Spinner } from "@wordpress/components";
import { check, chevronDown } from "@wordpress/icons";
import { jsx, jsxs } from "react/jsx-runtime";
function UploadStatusPopover({
uploadingFiles,
onDismissError,
onOpenChange
}) {
const [isOpen, setIsOpen] = useState(false);
const [prevHadErrors, setPrevHadErrors] = useState(false);
const triggerRef = useRef(null);
const updateIsOpen = 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;
useEffect(() => {
if (hasErrors && !prevHadErrors) {
updateIsOpen(true);
}
setPrevHadErrors(hasErrors);
}, [hasErrors, prevHadErrors, updateIsOpen]);
if (uploadingFiles.length === 0) {
return null;
}
let buttonLabel, popoverHeading;
if (isUploading) {
buttonLabel = sprintf(
// translators: %s: number of files being uploaded
_n("Uploading %s file", "Uploading %s files", activeFiles.length),
activeFiles.length.toLocaleString()
);
popoverHeading = __("Uploading");
} else if (hasErrors) {
buttonLabel = sprintf(
// translators: %s: number of upload errors
_n("%s upload error", "%s upload errors", errorFiles.length),
errorFiles.length.toLocaleString()
);
popoverHeading = __("Upload errors");
} else {
buttonLabel = __("Upload complete");
popoverHeading = __("Upload complete");
}
return /* @__PURE__ */ jsxs("div", { className: "media-upload-modal__upload-status", children: [
isUploading && /* @__PURE__ */ jsx(Spinner, {}),
/* @__PURE__ */ jsx(
Button,
{
className: "media-upload-modal__upload-status__trigger",
size: "compact",
icon: chevronDown,
iconPosition: "right",
onClick: () => updateIsOpen(!isOpen),
"aria-expanded": isOpen,
ref: triggerRef,
children: buttonLabel
}
),
isOpen && /* @__PURE__ */ jsxs(
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__ */ jsx("div", { className: "media-upload-modal__upload-status__header", children: /* @__PURE__ */ jsx("h3", { children: popoverHeading }) }),
/* @__PURE__ */ jsx("ul", { className: "media-upload-modal__upload-status__list", children: uploadingFiles.map((file) => /* @__PURE__ */ jsxs(
"li",
{
className: "media-upload-modal__upload-status__item",
children: [
file.status === "uploading" && /* @__PURE__ */ jsx(Spinner, {}),
file.status === "uploaded" && /* @__PURE__ */ jsx(Icon, { icon: check, size: 16 }),
(file.status === "uploading" || file.status === "uploaded") && /* @__PURE__ */ jsx(
"span",
{
className: "media-upload-modal__upload-status__filename",
title: file.name,
children: file.name
}
),
file.status === "error" && /* @__PURE__ */ jsxs(
Notice,
{
status: "error",
isDismissible: !!onDismissError,
onRemove: () => onDismissError?.(file.id),
children: [
file.name,
": ",
file.error
]
}
)
]
},
file.id
)) })
]
}
)
] });
}
export {
UploadStatusPopover
};
//# sourceMappingURL=upload-status-popover.mjs.map