@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.16 kB
JavaScript
import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import{useState as n,useMemo as o}from"react";import l from"@mui/material/Grid2";import a from"@mui/material/Stack";import r from"@mui/material/IconButton";import m from"@mui/icons-material/Cancel";import s from"@mui/icons-material/Description";import{AttachmentViewer as c}from"./AttachmentViewer.js";import{AttachmentThumbnail as h}from"./AttachmentThumbnail.js";import{FileItem as p}from"../../../FileItem/FileItem.container.js";const d="NexusAttachmentGroup",u=u=>{const{editable:f=!1,attachments:g=[],onAttachmentsChange:x,t:b,clientWidth:v=200,onDownload:A,sx:C,...$}=u,[y,z]=n(!1),[F,k]=n(),w=g.filter((e=>e.type.includes("image"))),N=g.filter((e=>!e.type.includes("image"))),G=w.length>3?4:12/(w.length||1),I=o((()=>{if(w.length>0)return w.length>3?v/3:v/w.length}),[v,w.length]),j=o((()=>f||w.length<4?w:w.slice(0,3)),[f,w]),S=!f&&w.length>3?w.length-3:0;return e(a,{className:`${d}-root`,"data-testid":`${d}-root`,sx:[{width:1,px:f?2:0},...Array.isArray(C)?C:[C]],onClick:e=>e.stopPropagation(),...$,children:[j.length>0&&t(l,{container:!0,spacing:2,children:j.map(((e,i)=>t(l,{size:G,children:t(h,{attachment:e,editable:f,onThumbnailClick:e=>{k(e),z(!0)},onThumbnailCancel:e=>{x?.(g.filter((t=>t!==e)))},overflowCount:i===j.length-1?S:0,skeletonHeight:I,sx:{pb:"100%"}})},`${e.name}-${i}`)))}),N.length>0&&t(a,{sx:{mt:w.length>0?2:0},children:N.map(((e,n)=>t(p,{onClick:f?void 0:t=>{k(e),z(!0)},name:e.name,size:e.size,disableGutters:!0,icon:t(s,{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:f?t(r,{size:"small","data-testid":`${d}-removeFile`,className:`${d}-removeFile`,"aria-label":"Remove file",onClick:t=>{x?.(g.filter((t=>t!==e)))},children:t(m,{fontSize:"small"})}):t(i,{})},`${e.name}-${n}`)))}),y&&F&&t(c,{attachments:[...w,...N],selectedAttachment:F,onDownload:A,onClose:()=>{z(!1)},t:b})]})};export{u as AttachmentGroup,d as prefix};