@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) • 6.35 kB
JavaScript
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as i,useMemo as n}from"react";import l from"@mui/material/List";import a from"@mui/material/Button";import r from"@mui/material/Stack";import o from"@mui/material/Alert";import s from"@mui/material/Box";import m from"@mui/material/Typography";import c from"@mui/material/Paper";import d from"@mui/icons-material/Cancel";import u from"@mui/icons-material/InsertDriveFileOutlined";import f from"@mui/icons-material/SubdirectoryArrowRightOutlined";import p from"@mui/material/IconButton";import C from"lodash/sortBy";import{createSvgIcon as h}from"@mui/material/utils";import g from"lodash/groupBy";import{FileItem as x}from"../FileItem/FileItem.container.js";const y="NexusFilePanel",$=h(e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M1.49416 0C1.9936 0 2.39848 0.404876 2.39848 0.904317L2.39848 16.226H17.7028C18.1927 16.226 18.5898 16.6231 18.5898 17.113C18.5898 17.6029 18.1927 18 17.7028 18H0.589844V17.9991V16.226V0.904318C0.589844 0.404877 0.994722 0 1.49416 0ZM5.93234 3.80949C6.22827 3.80949 6.46816 3.57419 6.46816 3.28392C6.46816 2.99366 6.22827 2.75836 5.93234 2.75836C5.63642 2.75836 5.39653 2.99366 5.39653 3.28392C5.39653 3.57419 5.63642 3.80949 5.93234 3.80949ZM6.83207 5.40809C7.26397 5.23188 7.63059 4.93264 7.88644 4.55496L12.473 5.37496C12.4666 5.4439 12.4634 5.51373 12.4634 5.58429C12.4634 6.58286 13.1123 7.43277 14.019 7.75048V10.5676C13.47 10.76 13.0156 11.1474 12.7424 11.6449H7.99778C7.74324 11.1813 7.33126 10.8133 6.83207 10.6097L6.83207 5.40809ZM5.93234 0.984324C7.06249 0.984324 8.00586 1.76868 8.22752 2.81268L13.4086 3.73897C13.7992 3.4536 14.2834 3.28469 14.8078 3.28469C16.1026 3.28469 17.1523 4.31426 17.1523 5.58429C17.1523 6.49582 16.6116 7.28347 15.8276 7.65552V10.6626C16.6116 11.0346 17.1523 11.8223 17.1523 12.7338C17.1523 14.0039 16.1026 15.0334 14.8078 15.0334C13.7563 15.0334 12.8664 14.3543 12.5692 13.4189H8.171C7.87378 14.3543 6.98391 15.0334 5.93234 15.0334C4.63754 15.0334 3.58789 14.0039 3.58789 12.7338C3.58789 11.7799 4.18003 10.9617 5.02344 10.6134V5.40433C4.18003 5.05608 3.58789 4.23783 3.58789 3.28392C3.58789 2.01389 4.63754 0.984324 5.93234 0.984324ZM5.93234 13.2594C6.22827 13.2594 6.46816 13.0241 6.46816 12.7338C6.46816 12.4436 6.22827 12.2083 5.93234 12.2083C5.63642 12.2083 5.39653 12.4436 5.39653 12.7338C5.39653 13.0241 5.63642 13.2594 5.93234 13.2594ZM15.3436 12.7338C15.3436 13.0241 15.1038 13.2594 14.8078 13.2594C14.5119 13.2594 14.272 13.0241 14.272 12.7338C14.272 12.4436 14.5119 12.2083 14.8078 12.2083C15.1038 12.2083 15.3436 12.4436 15.3436 12.7338ZM14.8078 6.10986C15.1038 6.10986 15.3436 5.87455 15.3436 5.58429C15.3436 5.29403 15.1038 5.05873 14.8078 5.05873C14.5119 5.05873 14.272 5.29403 14.272 5.58429C14.272 5.87455 14.5119 6.10986 14.8078 6.10986Z",fill:"#747577"}),"Union"),v=(i,n,l)=>{const a=i.split("."),r=a[a.length-1],o=Boolean(l?.[r]);if(n){const i=l?.[r]??u;return t(s,{"data-testid":`${y}-subfileIcon`,sx:{display:"flex",justifyContent:"space-between",alignItems:"center",minWidth:56,pr:2},children:[e(f,{fontSize:"small",sx:{color:"grey.300"}}),e(i,{fontSize:"small","data-testid":`${y}-${o?"custom":"default"}SubfileIcon`})]})}return e(s,{"data-testid":`${y}-fileIcon`,sx:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:e(l?.[r]??$,{fontSize:"small","data-testid":`${y}-${o?"custom":"default"}FileIcon`})})},z=({onDelete:i,onCancel:n,t:l})=>t(r,{className:`${y}-deletePanel-root`,sx:{ml:2},direction:"row",justifyContent:"flex-end",alignItems:"center",spacing:3,children:[e(m,{className:`${y}-deletePanel-title`,sx:{fontWeight:700},variant:"caption",noWrap:!0,children:l("removeFile")}),t(r,{direction:"row",alignItems:"center",spacing:1,children:[e(a,{className:`${y}-deletePanel-delete`,"data-testid":`${y}-deletePanel-delete`,variant:"contained",size:"small",color:"error",onClick:i,children:l("Delete")}),e(a,{className:`${y}-deletePanel-cancel`,"data-testid":`${y}-deletePanel-cancel`,variant:"text",size:"small",onClick:n,children:l("Cancel")})]})]}),F=({t:a,label:u="Uploaded Files",hideSizes:f,rejectedFiles:h,acceptedFiles:$,uploadingFiles:F,parentFileExtension:I,getErrorMessage:b,onRemove:S,onClose:j,onRetry:M,iconMapping:R={},...w})=>{const[k,P]=i(null),Z=$.length+(F?.length??0),B=C($,"name"),N=g(B,(e=>{const t=e.name.split(".");return t.pop(),t.join("")})),V=new RegExp(`\\.${I}$`,"i"),W=n((()=>h.length?h.slice(0,5).map(((t,i)=>e(o,{variant:"outlined",severity:"error",onClose:()=>j(t),children:b?b(t):a("uploadFailedMsg",{0:t.file.path||t.file.name})},`${t.file.name}-${i}`))):void 0),[h,b,j,a]);return t(r,{className:`${y}-root`,direction:"column",justifyContent:"center",alignItems:"stretch",spacing:2,...w,children:[h.length>5&&e(m,{variant:"body2",sx:{fontWeight:700,mr:2,color:"warning.600"},children:a("fileErrorMsg")}),W,t(s,{sx:{display:"flex",direction:"row",justifyContent:"flex-start",alignItems:"center","&&":{mt:4,mb:1}},children:[e(m,{variant:"body2",sx:{fontWeight:700,mr:2},children:u}),e(s,{"data-testid":"uploadedFiles",display:"flex",justifyContent:"center",alignItems:"center",sx:{backgroundColor:"primary.main",color:"background.default",width:"20px",height:"20px",fontSize:"10px",borderRadius:"50%",fontWeight:700},children:Z})]}),Z>0&&e(c,{variant:"outlined",children:e(l,{children:(()=>{let t=[];Object.keys(N).sort().forEach((i=>{const n=N[i],l=null!==I;l&&n.sort(((e,t)=>V.test(e.name)?-1:V.test(t.name)?1:t.name>e.name?-1:e.name>t.name?1:0)),t=t.concat(n.map(((t,i)=>{const n=i>0&&l;return e(x,{icon:v(t.name,n,R),name:t.name,size:t.size,hideSize:f,secondaryAction:k?.name===t.name?e(z,{onDelete:()=>{P(null),S(t)},onCancel:()=>P(null),t:a}):null,actions:e(p,{size:"small","data-testid":"removeFileItem",onClick:()=>{P(t)},"aria-label":"Remove File",children:e(d,{fontSize:"small"})})},`${t.name}-${i}`)})))}));const i=F?.map((t=>{return e(x,{icon:v(t.file.name,!1,R),name:t.file.name,size:t.file.size,hideSize:f,status:t.status,progress:t.progress,onRetry:(i=t.file,e=>{M&&M(i)}),secondaryAction:t.file.name===k?.name?e(z,{onDelete:()=>{P(null),S(t.file)},onCancel:()=>P(null),t:a}):null,actions:e(p,{size:"small","data-testid":"removeFileItem",onClick:()=>{P(t.file)},"aria-label":"Remove File",children:e(d,{fontSize:"small"})})},`${t.file.name}`);var i}))||[];return[...t,...i]})()})})]})};export{F as default};