@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
204 lines (203 loc) • 6.49 kB
JavaScript
import { jsx as e, jsxs as o, Fragment as s } from "react/jsx-runtime";
import { c as g } from "../../createSvgIcon-B1E6Wo8z.js";
import { D as w } from "../../Delete-B5VTV71K.js";
import { Box as n } from "@mui/material";
import { useState as D, useEffect as A } from "react";
import { u as j } from "../../index-CX0sAlmK.js";
import { S as F } from "../../Stack-DSJ2DqNd.js";
import { T as l } from "../../Typography-Dy8r_tT2.js";
const h = g(/* @__PURE__ */ e("path", {
d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2zm-3 4V8h-3V5H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8zM5 19l3-4 2 3 3-4 4 5z"
}), "AddPhotoAlternate"), P = g(/* @__PURE__ */ e("path", {
d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z"
}), "Create"), R = () => /* @__PURE__ */ o(l, { textAlign: "center", fontSize: "14px", color: "grey.darker", children: [
/* @__PURE__ */ e(n, { component: "span", fontWeight: "bold", children: "Glissez-déposez" }),
" ",
"ou",
" ",
/* @__PURE__ */ e(n, { component: "span", fontWeight: "bold", children: "cliquez" }),
" ",
"pour choisir une image"
] }), M = () => /* @__PURE__ */ o(l, { textAlign: "center", fontSize: "14px", color: "grey.darker", children: [
/* @__PURE__ */ e(n, { component: "span", fontWeight: "bold", children: "Glissez" }),
" ",
"une image"
] }), $ = ({
defaultLabel: u = /* @__PURE__ */ e(R, {}),
dragLabel: x = /* @__PURE__ */ e(M, {}),
information: i,
onFileChange: d = (r) => {
},
width: f = "160px",
height: y = "160px",
initialFile: c = null,
...b
}) => {
const [r, a] = D(
c
);
A(() => {
a(c);
}, [c]);
const k = (t) => {
const m = t[0] || null;
a(m), d(m);
}, z = (t) => {
t.stopPropagation(), a(null), d(null);
}, C = (t) => {
t.stopPropagation(), p();
}, { open: p, getRootProps: I, getInputProps: S, isDragActive: v } = j({
...b,
maxFiles: 1,
onDropAccepted: k,
accept: {
"image/*": [".png", ".jpeg", ".jpg", ".gif"]
},
noClick: !0
});
return /* @__PURE__ */ o(
F,
{
direction: "column",
justifyContent: "center",
alignItems: "center",
width: f,
minWidth: "150px",
minHeight: "150px",
height: y,
borderRadius: 1,
sx: {
cursor: "pointer",
position: "relative",
background: `${!r && "linear-gradient(180deg, #F5F7F9 0%, #FFF 100%)"}`,
border: `${!r && "1px dashed"}`,
borderColor: (t) => !r && t.palette.grey.main
},
...I({
onClick: p
}),
children: [
/* @__PURE__ */ e("input", { ...S() }),
r ? /* @__PURE__ */ o(s, { children: [
/* @__PURE__ */ o(
n,
{
sx: {
position: "absolute",
top: "0.5rem",
right: "0.5rem",
display: "flex",
gap: "0.3rem"
},
children: [
/* @__PURE__ */ e(
n,
{
onClick: C,
sx: {
backgroundColor: "common.white",
display: "flex",
borderRadius: "3px",
alignItems: "center",
justifyContent: "center",
boxShadow: 1,
width: "2rem",
height: "2rem",
cursor: "pointer",
"&:hover": {
backgroundColor: "grey.darker",
"& .MuiSvgIcon-root": {
fill: (t) => t.palette.common.white
}
}
},
children: /* @__PURE__ */ e(P, { fontSize: "small" })
}
),
/* @__PURE__ */ e(
n,
{
onClick: z,
sx: {
backgroundColor: "common.white",
display: "flex",
borderRadius: "3px",
alignItems: "center",
boxShadow: 1,
justifyContent: "center",
width: "2rem",
height: "2rem",
cursor: "pointer",
"&:hover": {
backgroundColor: "grey.darker",
"& .MuiSvgIcon-root": {
fill: (t) => t.palette.common.white
}
}
},
children: /* @__PURE__ */ e(w, { fontSize: "small" })
}
)
]
}
),
/* @__PURE__ */ e(
"img",
{
src: typeof r == "string" ? r : URL.createObjectURL(r),
alt: typeof r == "string" ? r : r.name,
style: {
width: "100%",
height: "100%",
maxWidth: "100%",
objectFit: "cover",
borderRadius: "5px"
}
}
)
] }) : /* @__PURE__ */ e(s, { children: v ? /* @__PURE__ */ o(s, { children: [
/* @__PURE__ */ e(
h,
{
color: "primary",
style: {
width: "2.5rem",
height: "2.5rem"
}
}
),
x,
i && /* @__PURE__ */ e(l, { textAlign: "center", fontSize: "12px", color: "grey", children: i })
] }) : /* @__PURE__ */ o(
n,
{
sx: {
display: "flex",
flexDirection: "column",
alignItems: "center",
padding: "0.5rem",
gap: "0.3rem"
},
children: [
/* @__PURE__ */ e(
h,
{
color: "primary",
style: {
width: "2.5rem",
height: "2.5rem"
}
}
),
u,
i && /* @__PURE__ */ e(l, { textAlign: "center", fontSize: "12px", color: "grey", children: i })
]
}
) })
]
}
);
};
export {
$ as default
};