synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
175 lines (174 loc) • 5.63 kB
JavaScript
import { jsxs as r, jsx as e, Fragment as S } from "react/jsx-runtime";
import { calculateFriendlyFileSize as x } from "../../utils/functions/calculateFriendlyFileSize.js";
import { ErrorTwoTone as T, Pause as F, PlayArrow as R, DeleteTwoTone as v, CheckCircleTwoTone as A } from "@mui/icons-material";
import D from "@mui/icons-material/Close";
import { Box as o, Typography as d, Tooltip as l, IconButton as s, LinearProgress as L } from "@mui/material";
const k = 92;
function B(f) {
const {
status: i,
fileName: y,
onCancel: P,
onPause: g,
onResume: C,
onRemove: u,
uploadedSizeInBytes: p = 0,
totalSizeInBytes: h,
errorMessage: E
} = f, w = i === "PAUSED", n = i === "CANCELED_BY_USER" || i === "FAILED", m = i === "COMPLETE", t = i === "FAILED", I = i === "UPLOADING", a = i === "PREPARING";
let c = p / h * 100;
return a ? c = void 0 : (t || n) && (c = 0), /* @__PURE__ */ r(
o,
{
sx: {
py: 2,
height: `${k}px`
},
children: [
/* @__PURE__ */ r(
o,
{
sx: {
display: "flex",
flexWrap: "nowrap",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
height: "35px"
},
children: [
/* @__PURE__ */ e(
d,
{
variant: "body1",
sx: {
color: "primary.main",
fontWeight: 700
},
children: y
}
),
!m && /* @__PURE__ */ r(
o,
{
sx: {
display: "flex",
alignItems: "center",
gap: 1,
my: 1
},
children: [
t && /* @__PURE__ */ e(l, { title: E, children: /* @__PURE__ */ e(T, { color: "error" }) }),
!n && /* @__PURE__ */ e(l, { title: "Cancel", children: /* @__PURE__ */ e(
s,
{
size: "small",
onClick: () => {
P();
},
children: /* @__PURE__ */ e(D, {})
}
) }),
I && /* @__PURE__ */ e(l, { title: "Pause", children: /* @__PURE__ */ e(
s,
{
size: "small",
onClick: () => {
g();
},
children: /* @__PURE__ */ e(F, {})
}
) }),
w && /* @__PURE__ */ e(l, { title: "Resume", children: /* @__PURE__ */ e(
s,
{
size: "small",
onClick: () => {
C();
},
children: /* @__PURE__ */ e(R, {})
}
) }),
n && /* @__PURE__ */ e(l, { title: "Remove", children: /* @__PURE__ */ e(
s,
{
size: "small",
onClick: () => {
u();
},
children: /* @__PURE__ */ e(v, {})
}
) })
]
}
),
m && /* @__PURE__ */ e(A, { color: "success" })
]
}
),
/* @__PURE__ */ r(
o,
{
sx: {
display: "flex",
flexWrap: "nowrap",
alignItems: "center"
},
children: [
/* @__PURE__ */ e(
L,
{
color: "secondary",
value: c,
variant: a ? "indeterminate" : "determinate",
sx: { width: "100%", mr: 2.5 }
}
),
!n && /* @__PURE__ */ e(
d,
{
variant: "body1",
sx: {
whiteSpace: "nowrap",
flexShrink: 0
},
children: a ? "Preparing to upload..." : /* @__PURE__ */ r(S, { children: [
/* @__PURE__ */ e("span", { children: x(p, 1) }),
/* @__PURE__ */ e(
o,
{
component: "span",
sx: {
color: "grey.600",
mx: 0.5
},
children: "|"
}
),
/* @__PURE__ */ e("span", { children: x(h, 1) })
] })
}
),
n && /* @__PURE__ */ e(
d,
{
variant: "body1",
sx: {
whiteSpace: "nowrap",
flexShrink: 0
},
children: t ? "Failed" : "Canceled"
}
)
]
}
)
]
}
);
}
export {
k as FILE_UPLOAD_PROGRESS_COMPONENT_HEIGHT_PX,
B as FileUploadProgress
};
//# sourceMappingURL=FileUploadProgress.js.map