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