@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.4 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/Grid2"),a=require("@mui/material/Stack"),n=require("@mui/material/IconButton"),l=require("@mui/icons-material/Cancel"),r=require("@mui/icons-material/Description"),s=require("./AttachmentViewer.js"),o=require("./AttachmentThumbnail.js"),m=require("../../../FileItem/FileItem.container.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(i),h=u(a),d=u(n),x=u(l),f=u(r);const p="NexusAttachmentGroup";exports.AttachmentGroup=i=>{const{editable:a=!1,attachments:n=[],onAttachmentsChange:l,t:r,clientWidth:u=200,onDownload:g,sx:j,...b}=i,[v,A]=t.useState(!1),[q,y]=t.useState(),C=n.filter((e=>e.type.includes("image"))),F=n.filter((e=>!e.type.includes("image"))),$=C.length>3?4:12/(C.length||1),w=t.useMemo((()=>{if(C.length>0)return C.length>3?u/3:u/C.length}),[u,C.length]),z=t.useMemo((()=>a||C.length<4?C:C.slice(0,3)),[a,C]),k=!a&&C.length>3?C.length-3:0;return e.jsxs(h.default,{className:`${p}-root`,"data-testid":`${p}-root`,sx:[{width:1,px:a?2:0},...Array.isArray(j)?j:[j]],onClick:e=>e.stopPropagation(),...b,children:[z.length>0&&e.jsx(c.default,{container:!0,spacing:2,children:z.map(((t,i)=>e.jsx(c.default,{size:$,children:e.jsx(o.AttachmentThumbnail,{attachment:t,editable:a,onThumbnailClick:e=>{y(e),A(!0)},onThumbnailCancel:e=>{l?.(n.filter((t=>t!==e)))},overflowCount:i===z.length-1?k:0,skeletonHeight:w,sx:{pb:"100%"}})},`${t.name}-${i}`)))}),F.length>0&&e.jsx(h.default,{sx:{mt:C.length>0?2:0},children:F.map(((t,i)=>e.jsx(m.FileItem,{onClick:a?void 0:e=>{y(t),A(!0)},name:t.name,size:t.size,disableGutters:!0,icon:e.jsx(f.default,{fontSize:"small"}),sx:{height:"36px",":hover":{bgcolor:"inherit","& .NexusAttachmentGroup-removeFile":{display:"flex"}},"& .NexusAttachmentGroup-removeFile":{display:"none"},"& .MuiListItemText-root":{m:0,display:"grid",overflow:"hidden"},"& .NexusFileItem-fileSize":{m:0}},actions:a?e.jsx(d.default,{size:"small","data-testid":`${p}-removeFile`,className:`${p}-removeFile`,"aria-label":"Remove file",onClick:e=>{l?.(n.filter((e=>e!==t)))},children:e.jsx(x.default,{fontSize:"small"})}):e.jsx(e.Fragment,{})},`${t.name}-${i}`)))}),v&&q&&e.jsx(s.AttachmentViewer,{attachments:[...C,...F],selectedAttachment:q,onDownload:g,onClose:()=>{A(!1)},t:r})]})},exports.prefix=p;