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