@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.86 kB
JavaScript
import{jsx as t,jsxs as e,Fragment as i}from"react/jsx-runtime";import a from"@mui/material/Box";import{useMemo as r}from"react";import o from"@mui/material/Stack";import n from"@mui/material/Typography";import s from"@mui/material/Button";import c from"@mui/icons-material/Upload";import l from"@mui/material/Tooltip";import{stackStyle as d}from"./FilePickerBlock.styles.js";import{useTranslate as m}from"../../../locales/index.js";import p from"../../locale.json.js";const x="NexusFilePickerBlock",u=u=>{const h=m(p),{header:f,showDescription:$=!0,extraDescription:y,condensed:g=!1,buttonLabel:F=h("Upload"),dropZoneInstruction:N=h("Drag & Drop files"),dropZoneProps:b,FilePanelComponent:v=()=>null,acceptedFilesDisplayList:D,showMaxFiles:S,...j}=u,z=D?.join(", ")||b?.getInputProps().accept||"",k=z.split(",").length,B=r((()=>b?.maxSize&&Number.isFinite(b.maxSize)?parseFloat((b.maxSize/1024/1024).toFixed(1)):1/0),[b?.maxSize]),I=b?.maxFiles,w={sx:{...d},flex:g?"initial":1,direction:g?"row":"column",alignItems:"center",justifyContent:"center",spacing:0,className:`${x}-dropZone`,"data-testid":`${x}-dropZone`};return t(a,{"data-testid":`${x}-root`,className:`${x}-root`,...j,children:e(o,{sx:{height:"100%"},children:[f&&e(a,{sx:{mb:2.5},"data-testid":`${x}-header`,className:`${x}-header`,children:["string"==typeof f&&t(n,{variant:"body2",sx:{fontWeight:700},children:f}),"string"!=typeof f&&f]}),e(o,{...w,children:[t(s,{onClick:b?.open,variant:"contained",color:"secondary",startIcon:t(c,{}),"data-testid":`${x}-uploadButton`,className:`${x}-uploadButton`,children:F}),N&&e(a,{"data-testid":`${x}-instruction`,className:`${x}-instruction`,sx:{mt:1,display:"flex",flexDirection:"row"},children:[e(n,{variant:"body2","data-testid":`${x}-subInstruction`,className:`${x}-subInstruction`,children:[g&&t(i,{children:" "})," ",h("or")," "]}),"string"==typeof N&&t(n,{variant:"body2",children:N}),"string"!=typeof N&&N]})]}),t(v,{}),$&&e(a,{sx:{textAlign:"center",color:"text.secondary",mt:4.5},"data-testid":`${x}-description`,className:`${x}-description`,children:[z&&e(n,{variant:"caption","data-testid":`${x}-acceptedFiles`,className:`${x}-acceptedFiles`,children:[h("Accepted file types are")," ",k>5?t(l,{title:z,placement:"top",arrow:!0,children:t(n,{variant:"caption",sx:{textDecorationLine:"underline",cursor:"pointer"},children:h("here")})}):z,". "]}),I&&S&&e(n,{variant:"caption","data-testid":`${x}-maxFiles`,className:`${x}-maxFiles`,children:[h("MaximumNumberFiles",{0:`${I}`}),". "]}),B&&B!==1/0&&e(n,{variant:"caption","data-testid":`${x}-maxSize`,className:`${x}-maxSize`,children:[h("MaximumFileSize",{0:B}),"."]}),y&&e(a,{"data-testid":`${x}-extraDescription`,className:`${x}-extraDescription`,children:["string"==typeof y&&t(n,{variant:"caption",children:y}),"string"!=typeof y&&y]})]})]})})};export{u as FilePickerBlock,x as prefix};