synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
107 lines (106 loc) • 3.55 kB
JavaScript
import { jsxs as i, jsx as r, Fragment as a } from "react/jsx-runtime";
import { FILE_UPLOAD_PROGRESS_COMPONENT_HEIGHT_PX as P, FileUploadProgress as x } from "../../EntityUpload/FileUploadProgress.js";
import E from "../../../utils/hooks/useUploadFileEntity/getActiveUploadCount.js";
import I from "@mui/material/Box";
import C from "@mui/material/Paper";
import O from "@mui/material/Typography";
import c from "pluralize";
import { FixedSizeList as U } from "react-window";
const s = 24;
function S(u) {
const { uploaderState: l, uploadProgress: t } = u;
if (t.length === 0)
return null;
const n = E(
t.map((o) => o.status)
), p = t.filter(
(o) => o.status === "COMPLETE"
).length;
return /* @__PURE__ */ i(
C,
{
sx: {
px: `${s}px`,
py: 2,
mt: 3,
width: "100%",
height: "260px",
background: "#FBFBFC"
},
children: [
/* @__PURE__ */ i(O, { variant: "headline2", gutterBottom: !0, children: [
l === "WAITING" && /* @__PURE__ */ r(a, { children: "Uploads" }),
l === "UPLOADING" && /* @__PURE__ */ i(a, { children: [
"Uploading ",
n,
" ",
c("Item", n)
] }),
l === "COMPLETE" && /* @__PURE__ */ i(a, { children: [
"Uploaded ",
p,
" ",
c("Item", p)
] })
] }),
/* @__PURE__ */ r(
I,
{
sx: {
// Add negative margin equivalent to the container's padding
// This will put the scrollbar on the right edge of the container
mx: `${s * -1}px`,
"& > div > div > :not(:last-child)": {
borderBottom: "solid 1px #EAECEE"
}
},
children: /* @__PURE__ */ r(
U,
{
itemSize: P,
height: 205,
itemCount: t.length,
width: "100%",
children: ({ index: o, style: h }) => {
const e = t[o], m = e.file.webkitRelativePath || e.file.name, d = e.file.size, f = e.progress.value / e.progress.total, g = d * f;
return /* @__PURE__ */ r(
"div",
{
style: {
...h,
// Use same value as the outer container's padding to determine the width,
// ensuring the items in the list appear to have the same padding
width: `calc(100% - ${s * 2}px)`,
margin: `0px ${s}px`
},
children: /* @__PURE__ */ r(
x,
{
fileName: m,
status: e.status,
totalSizeInBytes: d,
uploadedSizeInBytes: g,
onCancel: e.cancel,
onPause: e.pause,
onResume: e.resume,
onRemove: e.remove,
errorMessage: e.failureReason
}
)
},
// File path + name should be unique
m
);
}
}
)
}
)
]
}
);
}
export {
S as default
};
//# sourceMappingURL=MultiFileUploadProgress.js.map