@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) • 4.04 kB
JavaScript
import{jsxs as e,jsx as t}from"react/jsx-runtime";import i from"@mui/material/Stack";import{useState as a,useMemo as o}from"react";import r from"@mui/material/Typography";import n from"@mui/material/Button";import l from"@mui/material/IconButton";import m from"@mui/icons-material/Close";import s from"@mui/icons-material/KeyboardArrowLeft";import c from"@mui/icons-material/KeyboardArrowRight";import d from"@mui/icons-material/Download";import h from"@mui/icons-material/FilePresent";import p from"@mui/material/Box";import{useTheme as u}from"@mui/material/styles";import f from"@mui/material/useMediaQuery";import w from"@mui/material/CircularProgress";import{AttachmentThumbnail as g}from"./AttachmentThumbnail.js";import{Dialog as x}from"../../../Dialog/Dialog.container.js";import{EmptyState as $}from"../../../EmptyState/EmptyState.container.js";const y="NexusAttachmentViewer",b=b=>{const{attachments:C,selectedAttachment:j,onDownload:N,onClose:v,t:k}=b,[A,L]=a(j),R=C.findIndex((e=>e===A)),D=u(),I=f(D.breakpoints.down("sm")),[z,P]=a(!1),[U,S]=a(!1),B=o((()=>{if(C.length<5)return C;let e;return e=R<3?0:R>=C.length-3?C.length-4:R-2,C.slice(e,e+4)}),[C,R]),E=async(e,t=!1)=>{const i=e.map((async e=>{if(e.file){const t=URL.createObjectURL(e.file),i=document.createElement("a");i.href=t,i.setAttribute("download",e.name),i.click(),URL.revokeObjectURL(t)}else await(N?.(e))}));t?S(!0):P(!0);try{await Promise.all(i)}catch(e){console.error(e)}t?S(!1):P(!1)},O=I?40:80,T=e(i,{direction:"row",children:[C.length>1&&t(n,{variant:"outlined",size:"small",endIcon:U?t(w,{color:"inherit",size:16}):void 0,onClick:()=>E(C,!0),className:`${y}-downloadAll`,"data-testid":`${y}-downloadAll`,disabled:U,children:`${k("downloadAll")} (${C.length})`}),t(n,{sx:{ml:4},variant:"contained",endIcon:z?t(w,{color:"inherit",size:16}):t(d,{}),size:"small",onClick:()=>E([A]),className:`${y}-download`,"data-testid":`${y}-download`,disabled:z,children:k("download")})]}),F=t(l,{sx:{ml:4},size:"small",onClick:()=>{v()},className:`${y}-close`,"data-testid":`${y}-close`,"aria-label":"Close",children:t(m,{})}),K=e(i,I?{direction:"column",justifyContent:"space-between","data-testid":`${y}-header`,className:`${y}-header`,children:[e(i,{direction:"row",justifyContent:"space-between",children:[t(r,{variant:"h6",children:A.name}),F]}),T]}:{direction:"row",justifyContent:"space-between","data-testid":`${y}-header`,className:`${y}-header`,children:[t(r,{variant:"h6",children:A.name}),e(i,{direction:"row",children:[T,F]})]}),V=C.length>1?e(i,{"data-testid":`${y}-footer`,className:`${y}-footer`,direction:"row",justifyContent:"center",alignItems:"center",width:"100%",children:[t(l,{sx:{mx:1},disabled:0===R,onClick:()=>{L(C[R-1])},className:`${y}-arrowLeft`,"data-testid":`${y}-arrowLeft`,"aria-label":"Previous",children:t(s,{})}),t(i,{direction:"row",children:B.length>0&&B.map(((e,i)=>t(g,{attachment:e,editable:!1,noPreview:!e.type.includes("image")||!e.file,sx:{height:`${O}px`,width:`${O}px`,mx:1},selected:e===A,onClick:()=>{L(e)}},`${e.name}-${i}`)))}),t(l,{sx:{mx:1},disabled:R===C.length-1,onClick:()=>{L(C[R+1])},className:`${y}-arrowRight`,"data-testid":`${y}-arrowRight`,"aria-label":"Next",children:t(c,{})})]}):void 0;return t(x,{title:K,open:!0,footer:V,sx:{"& .NexusDialog-paper":{width:"100%",maxWidth:"unset",height:"calc(100% - 64px)"},"& .NexusDialog-actions":{pt:0}},children:e(i,{direction:"row",alignItems:"center",justifyContent:"center",sx:{height:"100%",width:"100%"},children:[A&&A.type.includes("image")&&A.file&&t(p,{"data-testid":`${y}-image`,className:`${y}-image`,component:"img",src:URL.createObjectURL(A.file),alt:A.name,sx:{height:"auto",width:"auto",maxHeight:"100%",maxWidth:"100%",objectFit:"contain"}}),(!A||!A.type.includes("image"))&&t(p,{sx:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center"},children:t($,{icon:t(h,{sx:{color:"grey.300",fontSize:72}}),header:k("noPreviewAvailable"),description:k("pleaseDownloadToView")})})]})})};export{b as AttachmentViewer,y as prefix};