@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
123 lines (122 loc) • 4.73 kB
JavaScript
import { jsx as r, jsxs as n } from "react/jsx-runtime";
import { styled as u, ListItemButton as b, ListItem as I, Box as l, CircularProgress as f, IconButton as m } from "@mui/material";
import w from "../EllipsisWithTooltip/EllipsisWithTooltip.es.js";
import { FileIcon as S } from "./FileIcon.es.js";
import { FileInfosSeparator as h } from "./FileInfosSeparator.es.js";
import { displaySize as R, displayExtension as v } from "./utils.es.js";
import { S as a } from "../../Stack-DSJ2DqNd.js";
import { T as p } from "../../Typography-Dy8r_tT2.js";
import { c as C } from "../../createSvgIcon-B1E6Wo8z.js";
import { C as j } from "../../CloseRounded-CioV1GK3.js";
const z = C(/* @__PURE__ */ r("path", {
d: "M16.59 9H15V4c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v5H7.41c-.89 0-1.34 1.08-.71 1.71l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.63-.63.19-1.71-.7-1.71M5 19c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1"
}), "DownloadRounded"), H = u(b)(
({ isClickable: t }) => ({
"&:hover": {
boxShadow: t ? "0 4px 8px rgba(192, 192, 192, 0.3)" : "none",
backgroundColor: "transparent"
},
opacity: "1 !important",
borderRadius: "4px",
cursor: t ? "pointer" : "default",
display: "flex",
flexDirection: "row",
alignItems: "center",
padding: "0.5rem 1rem",
width: "100%",
justifyContent: "space-between",
boxSizing: "border-box",
paddingRight: "115px !important",
userSelect: "text"
})
), M = ({
file: t,
onDelete: c,
onClick: e,
onDownload: s
}) => {
if (!t.name) return null;
const o = R(t.size), i = v(t.name), x = () => e == null ? void 0 : e(t), g = (d) => {
d.stopPropagation(), c == null || c(t);
}, y = (d) => {
d.stopPropagation(), s == null || s(t);
};
return /* @__PURE__ */ r(
I,
{
secondaryAction: /* @__PURE__ */ n(l, { alignItems: "center", display: "flex", gap: "1rem", children: [
t.isLoading ? /* @__PURE__ */ r(l, { marginRight: 1, children: /* @__PURE__ */ r(f, { size: 24, color: "primary" }) }) : t.isDownloadable ? /* @__PURE__ */ r(m, { onClick: y, children: /* @__PURE__ */ r(z, { color: "primary" }) }) : null,
t.isDeletable && /* @__PURE__ */ r(m, { onClick: g, id: "coucou", children: /* @__PURE__ */ r(j, {}) })
] }),
disablePadding: !0,
children: /* @__PURE__ */ r(
H,
{
onClick: x,
isClickable: !!e,
disableRipple: !e,
children: /* @__PURE__ */ n(a, { direction: "row", alignItems: "center", spacing: 2, minWidth: "0", children: [
/* @__PURE__ */ r(
a,
{
borderRadius: "4px",
minWidth: "40px",
maxWidth: "40px",
minHeight: "40px",
maxHeight: "40px",
display: "flex",
alignItems: "center",
justifyContent: "center",
sx: {
backgroundColor: "grey.light"
},
children: /* @__PURE__ */ r(
l,
{
color: "text.secondary",
alignItems: "center",
justifyContent: "center",
display: "flex",
children: /* @__PURE__ */ r(S, { extension: i ?? "" })
}
)
}
),
/* @__PURE__ */ n(
a,
{
direction: "column",
spacing: 0,
alignItems: "flex-start",
minWidth: "0",
children: [
/* @__PURE__ */ r(w, { typographyProps: { variant: "body1" }, children: t.name }),
/* @__PURE__ */ n(
a,
{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: 1,
children: [
o && /* @__PURE__ */ r(p, { variant: "caption", color: "text.secondary", children: o }),
o && i && /* @__PURE__ */ r(h, {}),
i && /* @__PURE__ */ r(p, { variant: "caption", color: "text.secondary", children: i }),
t.ownerName && (o || i) && /* @__PURE__ */ r(h, {}),
t.ownerName && /* @__PURE__ */ r(p, { variant: "caption", color: "text.secondary", children: t.ownerName })
]
}
)
]
}
)
] })
}
)
},
crypto.randomUUID()
);
};
export {
M as default
};