@cgi-learning-hub/ui 1.4.0-dev.1741799136 → 1.4.0-dev.1741856496
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),l=require("../../createSvgIcon-DJMYlO0S.cjs"),o=require("@mui/material"),h=require("react"),S=require("../../index-CVFzneYe.cjs"),C=require("../../Stack-B82ckLGm.cjs"),c=require("../../Typography-DPij13XT.cjs"),g=l.createSvgIcon(e.jsx("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"),w=l.createSvgIcon(e.jsx("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"),D=l.createSvgIcon(e.jsx("path",{d:"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z"}),"Delete"),F=()=>e.jsxs(c.Typography,{textAlign:"center",fontSize:"14px",color:"grey.darker",children:[e.jsx(o.Box,{component:"span",fontWeight:"bold",children:"Glissez-déposez"})," ","ou"," ",e.jsx(o.Box,{component:"span",fontWeight:"bold",children:"cliquez"})," ","pour choisir une image"]}),A=()=>e.jsxs(c.Typography,{textAlign:"center",fontSize:"14px",color:"grey.darker",children:[e.jsx(o.Box,{component:"span",fontWeight:"bold",children:"Glissez"})," ","une image"]}),P=({defaultLabel:x=e.jsx(F,{}),dragLabel:m=e.jsx(A,{}),information:n,onFileChange:a=t=>{},width:u="160px",height:j="160px",initialFile:s=null,...y})=>{const[t,i]=h.useState(s);h.useEffect(()=>{i(s)},[s]);const f=r=>{const p=r[0]||null;i(p),a(p)},b=r=>{r.stopPropagation(),i(null),a(null)},k=r=>{r.stopPropagation(),d()},{open:d,getRootProps:z,getInputProps:v,isDragActive:I}=S.useDropzone({...y,maxFiles:1,onDropAccepted:f,accept:{"image/*":[".png",".jpeg",".jpg",".gif"]},noClick:!0});return e.jsxs(C.Stack,{direction:"column",justifyContent:"center",alignItems:"center",width:u,minWidth:"150px",minHeight:"150px",height:j,borderRadius:1,sx:{cursor:"pointer",position:"relative",background:`${!t&&"linear-gradient(180deg, #F5F7F9 0%, #FFF 100%)"}`,border:`${!t&&"1px dashed"}`,borderColor:r=>!t&&r.palette.grey.main},...z({onClick:d}),children:[e.jsx("input",{...v()}),t?e.jsxs(e.Fragment,{children:[e.jsxs(o.Box,{sx:{position:"absolute",top:"0.5rem",right:"0.5rem",display:"flex",gap:"0.3rem"},children:[e.jsx(o.Box,{onClick:k,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:r=>r.palette.common.white}}},children:e.jsx(w,{fontSize:"small"})}),e.jsx(o.Box,{onClick:b,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:r=>r.palette.common.white}}},children:e.jsx(D,{fontSize:"small"})})]}),e.jsx("img",{src:typeof t=="string"?t:URL.createObjectURL(t),alt:typeof t=="string"?t:t.name,style:{width:"100%",height:"100%",maxWidth:"100%",objectFit:"cover",borderRadius:"5px"}})]}):e.jsx(e.Fragment,{children:I?e.jsxs(e.Fragment,{children:[e.jsx(g,{color:"primary",style:{width:"2.5rem",height:"2.5rem"}}),m,n&&e.jsx(c.Typography,{textAlign:"center",fontSize:"12px",color:"grey",children:n})]}):e.jsxs(o.Box,{sx:{display:"flex",flexDirection:"column",alignItems:"center",padding:"0.5rem",gap:"0.3rem"},children:[e.jsx(g,{color:"primary",style:{width:"2.5rem",height:"2.5rem"}}),x,n&&e.jsx(c.Typography,{textAlign:"center",fontSize:"12px",color:"grey",children:n})]})})]})};module.exports=P;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { jsx as e, jsxs as o, Fragment as
|
|
2
|
-
import { c as
|
|
1
|
+
import { jsx as e, jsxs as o, Fragment as s } from "react/jsx-runtime";
|
|
2
|
+
import { c as d } from "../../createSvgIcon-K2ZAdASa.js";
|
|
3
3
|
import { Box as n } from "@mui/material";
|
|
4
|
-
import { useState as w } from "react";
|
|
5
|
-
import { u as
|
|
6
|
-
import { S as
|
|
4
|
+
import { useState as w, useEffect as D } from "react";
|
|
5
|
+
import { u as A } from "../../index-B1u7G33_.js";
|
|
6
|
+
import { S as j } from "../../Stack-hbAJHQhq.js";
|
|
7
7
|
import { T as l } from "../../Typography-SIQ6eleU.js";
|
|
8
|
-
const
|
|
8
|
+
const g = d(/* @__PURE__ */ e("path", {
|
|
9
9
|
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"
|
|
10
|
-
}), "AddPhotoAlternate"),
|
|
10
|
+
}), "AddPhotoAlternate"), F = d(/* @__PURE__ */ e("path", {
|
|
11
11
|
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"
|
|
12
|
-
}), "Create"),
|
|
12
|
+
}), "Create"), P = d(/* @__PURE__ */ e("path", {
|
|
13
13
|
d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z"
|
|
14
|
-
}), "Delete"),
|
|
14
|
+
}), "Delete"), M = () => /* @__PURE__ */ o(l, { textAlign: "center", fontSize: "14px", color: "grey.darker", children: [
|
|
15
15
|
/* @__PURE__ */ e(n, { component: "span", fontWeight: "bold", children: "Glissez-déposez" }),
|
|
16
16
|
" ",
|
|
17
17
|
"ou",
|
|
@@ -19,31 +19,35 @@ const m = a(/* @__PURE__ */ e("path", {
|
|
|
19
19
|
/* @__PURE__ */ e(n, { component: "span", fontWeight: "bold", children: "cliquez" }),
|
|
20
20
|
" ",
|
|
21
21
|
"pour choisir une image"
|
|
22
|
-
] }),
|
|
22
|
+
] }), R = () => /* @__PURE__ */ o(l, { textAlign: "center", fontSize: "14px", color: "grey.darker", children: [
|
|
23
23
|
/* @__PURE__ */ e(n, { component: "span", fontWeight: "bold", children: "Glissez" }),
|
|
24
24
|
" ",
|
|
25
25
|
"une image"
|
|
26
26
|
] }), U = ({
|
|
27
|
-
defaultLabel:
|
|
28
|
-
dragLabel:
|
|
27
|
+
defaultLabel: u = /* @__PURE__ */ e(M, {}),
|
|
28
|
+
dragLabel: x = /* @__PURE__ */ e(R, {}),
|
|
29
29
|
information: i,
|
|
30
|
-
onFileChange:
|
|
30
|
+
onFileChange: p = (t) => {
|
|
31
31
|
},
|
|
32
|
-
width:
|
|
33
|
-
height:
|
|
34
|
-
initialFile:
|
|
32
|
+
width: f = "160px",
|
|
33
|
+
height: y = "160px",
|
|
34
|
+
initialFile: c = null,
|
|
35
35
|
...b
|
|
36
36
|
}) => {
|
|
37
|
-
const [t,
|
|
38
|
-
|
|
39
|
-
)
|
|
40
|
-
|
|
41
|
-
|
|
37
|
+
const [t, a] = w(
|
|
38
|
+
c
|
|
39
|
+
);
|
|
40
|
+
D(() => {
|
|
41
|
+
a(c);
|
|
42
|
+
}, [c]);
|
|
43
|
+
const z = (r) => {
|
|
44
|
+
const m = r[0] || null;
|
|
45
|
+
a(m), p(m);
|
|
42
46
|
}, k = (r) => {
|
|
43
|
-
r.stopPropagation(),
|
|
47
|
+
r.stopPropagation(), a(null), p(null);
|
|
44
48
|
}, v = (r) => {
|
|
45
|
-
r.stopPropagation(),
|
|
46
|
-
}, { open:
|
|
49
|
+
r.stopPropagation(), h();
|
|
50
|
+
}, { open: h, getRootProps: C, getInputProps: I, isDragActive: S } = A({
|
|
47
51
|
...b,
|
|
48
52
|
maxFiles: 1,
|
|
49
53
|
onDropAccepted: z,
|
|
@@ -53,15 +57,15 @@ const m = a(/* @__PURE__ */ e("path", {
|
|
|
53
57
|
noClick: !0
|
|
54
58
|
});
|
|
55
59
|
return /* @__PURE__ */ o(
|
|
56
|
-
|
|
60
|
+
j,
|
|
57
61
|
{
|
|
58
62
|
direction: "column",
|
|
59
63
|
justifyContent: "center",
|
|
60
64
|
alignItems: "center",
|
|
61
|
-
width:
|
|
65
|
+
width: f,
|
|
62
66
|
minWidth: "150px",
|
|
63
67
|
minHeight: "150px",
|
|
64
|
-
height:
|
|
68
|
+
height: y,
|
|
65
69
|
borderRadius: 1,
|
|
66
70
|
sx: {
|
|
67
71
|
cursor: "pointer",
|
|
@@ -71,11 +75,11 @@ const m = a(/* @__PURE__ */ e("path", {
|
|
|
71
75
|
borderColor: (r) => !t && r.palette.grey.main
|
|
72
76
|
},
|
|
73
77
|
...C({
|
|
74
|
-
onClick:
|
|
78
|
+
onClick: h
|
|
75
79
|
}),
|
|
76
80
|
children: [
|
|
77
81
|
/* @__PURE__ */ e("input", { ...I() }),
|
|
78
|
-
t ? /* @__PURE__ */ o(
|
|
82
|
+
t ? /* @__PURE__ */ o(s, { children: [
|
|
79
83
|
/* @__PURE__ */ o(
|
|
80
84
|
n,
|
|
81
85
|
{
|
|
@@ -108,7 +112,7 @@ const m = a(/* @__PURE__ */ e("path", {
|
|
|
108
112
|
}
|
|
109
113
|
}
|
|
110
114
|
},
|
|
111
|
-
children: /* @__PURE__ */ e(
|
|
115
|
+
children: /* @__PURE__ */ e(F, { fontSize: "small" })
|
|
112
116
|
}
|
|
113
117
|
),
|
|
114
118
|
/* @__PURE__ */ e(
|
|
@@ -132,7 +136,7 @@ const m = a(/* @__PURE__ */ e("path", {
|
|
|
132
136
|
}
|
|
133
137
|
}
|
|
134
138
|
},
|
|
135
|
-
children: /* @__PURE__ */ e(
|
|
139
|
+
children: /* @__PURE__ */ e(P, { fontSize: "small" })
|
|
136
140
|
}
|
|
137
141
|
)
|
|
138
142
|
]
|
|
@@ -152,9 +156,9 @@ const m = a(/* @__PURE__ */ e("path", {
|
|
|
152
156
|
}
|
|
153
157
|
}
|
|
154
158
|
)
|
|
155
|
-
] }) : /* @__PURE__ */ e(
|
|
159
|
+
] }) : /* @__PURE__ */ e(s, { children: S ? /* @__PURE__ */ o(s, { children: [
|
|
156
160
|
/* @__PURE__ */ e(
|
|
157
|
-
|
|
161
|
+
g,
|
|
158
162
|
{
|
|
159
163
|
color: "primary",
|
|
160
164
|
style: {
|
|
@@ -163,7 +167,7 @@ const m = a(/* @__PURE__ */ e("path", {
|
|
|
163
167
|
}
|
|
164
168
|
}
|
|
165
169
|
),
|
|
166
|
-
|
|
170
|
+
x,
|
|
167
171
|
i && /* @__PURE__ */ e(l, { textAlign: "center", fontSize: "12px", color: "grey", children: i })
|
|
168
172
|
] }) : /* @__PURE__ */ o(
|
|
169
173
|
n,
|
|
@@ -177,7 +181,7 @@ const m = a(/* @__PURE__ */ e("path", {
|
|
|
177
181
|
},
|
|
178
182
|
children: [
|
|
179
183
|
/* @__PURE__ */ e(
|
|
180
|
-
|
|
184
|
+
g,
|
|
181
185
|
{
|
|
182
186
|
color: "primary",
|
|
183
187
|
style: {
|
|
@@ -186,7 +190,7 @@ const m = a(/* @__PURE__ */ e("path", {
|
|
|
186
190
|
}
|
|
187
191
|
}
|
|
188
192
|
),
|
|
189
|
-
|
|
193
|
+
u,
|
|
190
194
|
i && /* @__PURE__ */ e(l, { textAlign: "center", fontSize: "12px", color: "grey", children: i })
|
|
191
195
|
]
|
|
192
196
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cgi-learning-hub/ui",
|
|
3
|
-
"version": "1.4.0-dev.
|
|
3
|
+
"version": "1.4.0-dev.1741856496",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "CGI Learning-hub Team",
|
|
6
6
|
"description": "@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features",
|