@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
2 lines (1 loc) • 1.73 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material/Typography"),a=require("@mui/material/Box"),i=require("@mui/material/DialogContent"),o=require("@mui/material/Alert"),l=require("@mui/material/Snackbar"),n=require("./ImageUpload.styles.js"),p=require("../../FileDragDrop/FileDragDrop.container.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=u(t),s=u(a),c=u(i),g=u(o),m=u(l);exports.default=({currentImage:t,onImageChange:a,t:i,...o})=>{const[l,u]=r.useState();return e.jsxs(c.default,{...o,"data-testid":"image-upload-root",children:[e.jsx(s.default,{sx:n.uploadStyles.initialImageWrapper,children:"string"==typeof t?e.jsx("img",{width:"100%",height:"auto",src:t,alt:"Thumbnail of selected",style:{display:"block"},"data-testid":"ImageUpload-initialImage-wrapper"}):t}),e.jsx(p.FileDragDrop,{sx:{mt:10},label:i("Upload your {{0}}",{0:"Application Form"}),buttonLabel:i("Upload a photo"),dropZoneDescription:i("or drag and drop a photo here"),t:i,dropZoneOptions:{accept:{"image/jpeg":[".jpg",".jpeg"],"image/png":[".png"],"image/gif":[".gif"]},noClick:!0,maxFiles:1,maxSize:2097152,multiple:!1,onDropAccepted:e=>{a(e[0])},onDropRejected:()=>{u(i("AcceptedFileTypeSizeMB",{0:"jpg, png, gif",1:2}))}}}),e.jsx(d.default,{variant:"caption",sx:{mt:2,color:"text.secondary"},children:i("AcceptedFileTypeSizeMB",{0:"jpg, png, gif",1:2})}),e.jsx(m.default,{open:!!l,anchorOrigin:{vertical:"bottom",horizontal:"left"},autoHideDuration:5e3,onClose:()=>u(""),sx:{"& .MuiAlert-icon":{alignItems:"center"}},children:e.jsx(g.default,{severity:"error",variant:"filled",onClose:()=>u(""),children:l})})]})};