@cgi-learning-hub/ui 1.3.4-dev.1736158134 → 1.3.4-dev.1736162288
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"),p=require("../../createSvgIcon--rEClVU7.cjs"),S=require("../../Delete-D1EiKoL5.cjs"),o=require("@mui/material"),v=require("react"),C=require("../../index-ChM1Ett8.cjs"),F=require("../../Stack-Yq6rb7iK.cjs"),i=require("../../Typography-DfRMDngd.cjs"),d=p.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=p.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=()=>e.jsxs(i.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(i.Typography,{textAlign:"center",fontSize:"14px",color:"grey.darker",children:[e.jsx(o.Box,{component:"span",fontWeight:"bold",children:"Glissez"})," une image"]}),q=({defaultLabel:g=e.jsx(D,{}),dragLabel:h=e.jsx(A,{}),information:n,onFileChange:s=t=>{},width:x="160px",height:m="160px",initialFile:u=null,...j})=>{const[t,c]=v.useState(u),y=r=>{const a=r[0]||null;c(a),s(a)},f=r=>{r.stopPropagation(),c(null),s(null)},b=r=>{r.stopPropagation(),l()},{open:l,getRootProps:k,getInputProps:z,isDragActive:I}=C.useDropzone({...j,maxFiles:1,onDropAccepted:y,accept:{"image/*":[".png",".jpeg",".jpg",".gif"]},noClick:!0});return e.jsxs(F.Stack,{direction:"column",justifyContent:"center",alignItems:"center",width:x,minWidth:"150px",minHeight:"150px",height:m,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},...k({onClick:l}),children:[e.jsx("input",{...z()}),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:b,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:f,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(S.DeleteIcon,{fontSize:"small"})})]}),e.jsx("img",{src:typeof t=="string"?t:URL.createObjectURL(t),alt:typeof t=="string"?t:t.name,style:{width:"auto",height:"100%",maxWidth:"100%",objectFit:"cover",borderRadius:"5px"}})]}):e.jsx(e.Fragment,{children:I?e.jsxs(e.Fragment,{children:[e.jsx(d,{color:"primary",style:{width:"2.5rem",height:"2.5rem"}}),h,n&&e.jsx(i.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(d,{color:"primary",style:{width:"2.5rem",height:"2.5rem"}}),g,n&&e.jsx(i.Typography,{textAlign:"center",fontSize:"12px",color:"grey",children:n})]})})]})};module.exports=q;
|
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import { c as
|
|
1
|
+
import { jsx as e, jsxs as o, Fragment as c } from "react/jsx-runtime";
|
|
2
|
+
import { c as h } from "../../createSvgIcon-C8nGcfF4.js";
|
|
3
3
|
import { D as w } from "../../Delete-BkZN7Xu5.js";
|
|
4
|
-
import { Box as
|
|
4
|
+
import { Box as n } from "@mui/material";
|
|
5
5
|
import { useState as D } from "react";
|
|
6
|
-
import { u as
|
|
6
|
+
import { u as F } from "../../index-CwvpOCso.js";
|
|
7
7
|
import { S as A } from "../../Stack-BzTJdRGj.js";
|
|
8
|
-
import { T as
|
|
9
|
-
const
|
|
8
|
+
import { T as l } from "../../Typography-DBwTr_ix.js";
|
|
9
|
+
const m = h(/* @__PURE__ */ e("path", {
|
|
10
10
|
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"
|
|
11
|
-
}), "AddPhotoAlternate"),
|
|
11
|
+
}), "AddPhotoAlternate"), j = h(/* @__PURE__ */ e("path", {
|
|
12
12
|
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"
|
|
13
|
-
}), "Create"),
|
|
14
|
-
/* @__PURE__ */ e(
|
|
13
|
+
}), "Create"), P = () => /* @__PURE__ */ o(l, { textAlign: "center", fontSize: "14px", color: "grey.darker", children: [
|
|
14
|
+
/* @__PURE__ */ e(n, { component: "span", fontWeight: "bold", children: "Glissez-déposez" }),
|
|
15
15
|
" ou ",
|
|
16
|
-
/* @__PURE__ */ e(
|
|
16
|
+
/* @__PURE__ */ e(n, { component: "span", fontWeight: "bold", children: "cliquez" }),
|
|
17
17
|
" pour choisir une image"
|
|
18
|
-
] }),
|
|
19
|
-
/* @__PURE__ */ e(
|
|
18
|
+
] }), R = () => /* @__PURE__ */ o(l, { textAlign: "center", fontSize: "14px", color: "grey.darker", children: [
|
|
19
|
+
/* @__PURE__ */ e(n, { component: "span", fontWeight: "bold", children: "Glissez" }),
|
|
20
20
|
" une image"
|
|
21
21
|
] }), $ = ({
|
|
22
|
-
defaultLabel:
|
|
23
|
-
dragLabel:
|
|
24
|
-
information:
|
|
25
|
-
onFileChange:
|
|
22
|
+
defaultLabel: g = /* @__PURE__ */ e(P, {}),
|
|
23
|
+
dragLabel: u = /* @__PURE__ */ e(R, {}),
|
|
24
|
+
information: i,
|
|
25
|
+
onFileChange: a = (t) => {
|
|
26
26
|
},
|
|
27
|
-
width:
|
|
28
|
-
height:
|
|
29
|
-
initialFile:
|
|
30
|
-
...
|
|
27
|
+
width: x = "160px",
|
|
28
|
+
height: f = "160px",
|
|
29
|
+
initialFile: y = null,
|
|
30
|
+
...b
|
|
31
31
|
}) => {
|
|
32
|
-
const [t,
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
}, z = (
|
|
36
|
-
|
|
37
|
-
},
|
|
38
|
-
|
|
39
|
-
}, { open:
|
|
40
|
-
...
|
|
32
|
+
const [t, s] = D(y), k = (r) => {
|
|
33
|
+
const p = r[0] || null;
|
|
34
|
+
s(p), a(p);
|
|
35
|
+
}, z = (r) => {
|
|
36
|
+
r.stopPropagation(), s(null), a(null);
|
|
37
|
+
}, C = (r) => {
|
|
38
|
+
r.stopPropagation(), d();
|
|
39
|
+
}, { open: d, getRootProps: I, getInputProps: S, isDragActive: v } = F({
|
|
40
|
+
...b,
|
|
41
41
|
maxFiles: 1,
|
|
42
42
|
onDropAccepted: k,
|
|
43
43
|
accept: {
|
|
@@ -45,52 +45,32 @@ const h = g(/* @__PURE__ */ e("path", {
|
|
|
45
45
|
},
|
|
46
46
|
noClick: !0
|
|
47
47
|
});
|
|
48
|
-
return /* @__PURE__ */
|
|
48
|
+
return /* @__PURE__ */ o(
|
|
49
49
|
A,
|
|
50
50
|
{
|
|
51
51
|
direction: "column",
|
|
52
52
|
justifyContent: "center",
|
|
53
53
|
alignItems: "center",
|
|
54
|
-
width:
|
|
54
|
+
width: x,
|
|
55
55
|
minWidth: "150px",
|
|
56
56
|
minHeight: "150px",
|
|
57
|
-
height:
|
|
57
|
+
height: f,
|
|
58
58
|
borderRadius: 1,
|
|
59
59
|
sx: {
|
|
60
60
|
cursor: "pointer",
|
|
61
61
|
position: "relative",
|
|
62
|
-
background: `${!t &&
|
|
63
|
-
border: `${!t &&
|
|
64
|
-
borderColor: (
|
|
62
|
+
background: `${!t && "linear-gradient(180deg, #F5F7F9 0%, #FFF 100%)"}`,
|
|
63
|
+
border: `${!t && "1px dashed"}`,
|
|
64
|
+
borderColor: (r) => !t && r.palette.grey.main
|
|
65
65
|
},
|
|
66
|
-
...
|
|
67
|
-
onClick:
|
|
66
|
+
...I({
|
|
67
|
+
onClick: d
|
|
68
68
|
}),
|
|
69
69
|
children: [
|
|
70
|
-
/* @__PURE__ */ e("input", { ...
|
|
71
|
-
|
|
72
|
-
/* @__PURE__ */
|
|
73
|
-
|
|
74
|
-
height: "2.5rem"
|
|
75
|
-
} }),
|
|
76
|
-
x,
|
|
77
|
-
l && /* @__PURE__ */ e(a, { textAlign: "center", fontSize: "12px", color: "grey", children: l })
|
|
78
|
-
] }) : /* @__PURE__ */ n(c, { sx: {
|
|
79
|
-
display: "flex",
|
|
80
|
-
flexDirection: "column",
|
|
81
|
-
alignItems: "center",
|
|
82
|
-
padding: "0.5rem",
|
|
83
|
-
gap: "0.3rem"
|
|
84
|
-
}, children: [
|
|
85
|
-
/* @__PURE__ */ e(h, { color: "primary", style: {
|
|
86
|
-
width: "2.5rem",
|
|
87
|
-
height: "2.5rem"
|
|
88
|
-
} }),
|
|
89
|
-
u,
|
|
90
|
-
l && /* @__PURE__ */ e(a, { textAlign: "center", fontSize: "12px", color: "grey", children: l })
|
|
91
|
-
] }) }) : /* @__PURE__ */ n(i, { children: [
|
|
92
|
-
/* @__PURE__ */ n(
|
|
93
|
-
c,
|
|
70
|
+
/* @__PURE__ */ e("input", { ...S() }),
|
|
71
|
+
t ? /* @__PURE__ */ o(c, { children: [
|
|
72
|
+
/* @__PURE__ */ o(
|
|
73
|
+
n,
|
|
94
74
|
{
|
|
95
75
|
sx: {
|
|
96
76
|
position: "absolute",
|
|
@@ -101,9 +81,9 @@ const h = g(/* @__PURE__ */ e("path", {
|
|
|
101
81
|
},
|
|
102
82
|
children: [
|
|
103
83
|
/* @__PURE__ */ e(
|
|
104
|
-
|
|
84
|
+
n,
|
|
105
85
|
{
|
|
106
|
-
onClick:
|
|
86
|
+
onClick: C,
|
|
107
87
|
sx: {
|
|
108
88
|
backgroundColor: "common.white",
|
|
109
89
|
display: "flex",
|
|
@@ -117,15 +97,15 @@ const h = g(/* @__PURE__ */ e("path", {
|
|
|
117
97
|
"&:hover": {
|
|
118
98
|
backgroundColor: "grey.darker",
|
|
119
99
|
"& .MuiSvgIcon-root": {
|
|
120
|
-
fill: (
|
|
100
|
+
fill: (r) => r.palette.common.white
|
|
121
101
|
}
|
|
122
102
|
}
|
|
123
103
|
},
|
|
124
|
-
children: /* @__PURE__ */ e(
|
|
104
|
+
children: /* @__PURE__ */ e(j, { fontSize: "small" })
|
|
125
105
|
}
|
|
126
106
|
),
|
|
127
107
|
/* @__PURE__ */ e(
|
|
128
|
-
|
|
108
|
+
n,
|
|
129
109
|
{
|
|
130
110
|
onClick: z,
|
|
131
111
|
sx: {
|
|
@@ -141,7 +121,7 @@ const h = g(/* @__PURE__ */ e("path", {
|
|
|
141
121
|
"&:hover": {
|
|
142
122
|
backgroundColor: "grey.darker",
|
|
143
123
|
"& .MuiSvgIcon-root": {
|
|
144
|
-
fill: (
|
|
124
|
+
fill: (r) => r.palette.common.white
|
|
145
125
|
}
|
|
146
126
|
}
|
|
147
127
|
},
|
|
@@ -154,8 +134,8 @@ const h = g(/* @__PURE__ */ e("path", {
|
|
|
154
134
|
/* @__PURE__ */ e(
|
|
155
135
|
"img",
|
|
156
136
|
{
|
|
157
|
-
src:
|
|
158
|
-
alt:
|
|
137
|
+
src: typeof t == "string" ? t : URL.createObjectURL(t),
|
|
138
|
+
alt: typeof t == "string" ? t : t.name,
|
|
159
139
|
style: {
|
|
160
140
|
width: "auto",
|
|
161
141
|
height: "100%",
|
|
@@ -165,7 +145,27 @@ const h = g(/* @__PURE__ */ e("path", {
|
|
|
165
145
|
}
|
|
166
146
|
}
|
|
167
147
|
)
|
|
168
|
-
] })
|
|
148
|
+
] }) : /* @__PURE__ */ e(c, { children: v ? /* @__PURE__ */ o(c, { children: [
|
|
149
|
+
/* @__PURE__ */ e(m, { color: "primary", style: {
|
|
150
|
+
width: "2.5rem",
|
|
151
|
+
height: "2.5rem"
|
|
152
|
+
} }),
|
|
153
|
+
u,
|
|
154
|
+
i && /* @__PURE__ */ e(l, { textAlign: "center", fontSize: "12px", color: "grey", children: i })
|
|
155
|
+
] }) : /* @__PURE__ */ o(n, { sx: {
|
|
156
|
+
display: "flex",
|
|
157
|
+
flexDirection: "column",
|
|
158
|
+
alignItems: "center",
|
|
159
|
+
padding: "0.5rem",
|
|
160
|
+
gap: "0.3rem"
|
|
161
|
+
}, children: [
|
|
162
|
+
/* @__PURE__ */ e(m, { color: "primary", style: {
|
|
163
|
+
width: "2.5rem",
|
|
164
|
+
height: "2.5rem"
|
|
165
|
+
} }),
|
|
166
|
+
g,
|
|
167
|
+
i && /* @__PURE__ */ e(l, { textAlign: "center", fontSize: "12px", color: "grey", children: i })
|
|
168
|
+
] }) })
|
|
169
169
|
]
|
|
170
170
|
}
|
|
171
171
|
);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cgi-learning-hub/ui",
|
|
3
|
-
"version": "1.3.4-dev.
|
|
3
|
+
"version": "1.3.4-dev.1736162288",
|
|
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",
|