@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) • 2.19 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Box"),i=require("@mui/material/IconButton"),a=require("@mui/icons-material/Cancel"),r=require("@mui/material/Skeleton"),o=require("@mui/material/Typography"),l=require("@mui/icons-material/FilePresent"),s=require("@mui/material/styles");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=n(t),u=n(i),c=n(a),d=n(r),h=n(o),x=n(l);const f="NexusAttachmentThumbnail";exports.AttachmentThumbnail=t=>{const{attachment:i,editable:a=!1,selected:r=!1,overflowCount:o=0,noPreview:l=!1,skeletonHeight:n=100,onThumbnailClick:p,onThumbnailCancel:g,sx:b,...v}=t;return i.file||l?e.jsxs(m.default,{className:`${f}-root`,"data-testid":`${f}-root`,onClick:a?void 0:e=>{p?.(i)},sx:[{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:"100%",height:"100%",overflow:"hidden",border:"1px solid",borderColor:r?"primary.main":"grey.100",borderRadius:1,cursor:"pointer","& .NexusAttachmentThumbnail-removeImage":{display:"none"},"&:hover":{"& .NexusAttachmentThumbnail-removeImage":{display:"flex"}}},...Array.isArray(b)?b:[b]],...v,children:[!l&&i.file&&e.jsx(m.default,{className:`${f}-image`,"data-testid":`${f}-image`,component:"img",src:URL.createObjectURL(i.file),alt:i.name,sx:{position:"absolute",top:0,left:0,width:"100%",height:"100%",objectFit:"cover"}}),l&&e.jsx(x.default,{sx:{color:"grey.300",height:"36px",width:"36px"}}),a&&e.jsx(u.default,{onClick:()=>{g?.(i)},size:"small","data-testid":`${f}-removeImage`,className:`${f}-removeImage`,"aria-label":"Remove image",sx:{position:"absolute",top:1,right:1,color:"grey.400"},children:e.jsx(c.default,{fontSize:"small"})}),o>0&&e.jsx(m.default,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",alignItems:"center",justifyContent:"center",bgcolor:e=>s.alpha(e.palette.common.black,.5)},children:e.jsxs(h.default,{sx:{color:"common.white",fontWeight:700},variant:"body1",children:["+",o]})})]}):e.jsx(d.default,{"data-testid":`${f}-skeleton`,className:`${f}-skeleton`,variant:"rounded",animation:"wave",height:n,width:n})},exports.prefix=f;