@cgi-learning-hub/ui/dist/components/ImagePicker/ImagePicker.cjs.js

@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features

"use strict";const e=require("react/jsx-runtime"),h=require("../../createSvgIcon-IET9soda.cjs"),v=require("../../Delete-BvkBJXEM.cjs"),o=require("@mui/material"),p=require("react"),C=require("../../index-DIyAQH20.cjs"),w=require("../../Stack-CIyfgZCM.cjs"),i=require("../../Typography-CSTmKyr8.cjs"),g=h.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"),D=h.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"),F=()=>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:x=e.jsx(F,{}),dragLabel:m=e.jsx(A,{}),information:n,onFileChange:l=r=>{},width:u="160px",height:j="160px",initialFile:s=null,...y})=>{const[r,c]=p.useState(s);p.useEffect(()=>{c(s)},[s]);const f=t=>{const d=t[0]||null;c(d),l(d)},b=t=>{t.stopPropagation(),c(null),l(null)},k=t=>{t.stopPropagation(),a()},{open:a,getRootProps:z,getInputProps:I,isDragActive:S}=C.useDropzone({...y,maxFiles:1,onDropAccepted:f,accept:{"image/*":[".png",".jpeg",".jpg",".gif"]},noClick:!0});return e.jsxs(w.Stack,{direction:"column",justifyContent:"center",alignItems:"center",width:u,minWidth:"150px",minHeight:"150px",height:j,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},...z({onClick:a}),children:[e.jsx("input",{...I()}),r?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:t=>t.palette.common.white}}},children:e.jsx(D,{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:t=>t.palette.common.white}}},children:e.jsx(v.DeleteIcon,{fontSize:"small"})})]}),e.jsx("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"}})]}):e.jsx(e.Fragment,{children:S?e.jsxs(e.Fragment,{children:[e.jsx(g,{color:"primary",style:{width:"2.5rem",height:"2.5rem"}}),m,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(g,{color:"primary",style:{width:"2.5rem",height:"2.5rem"}}),x,n&&e.jsx(i.Typography,{textAlign:"center",fontSize:"12px",color:"grey",children:n})]})})]})};module.exports=q;