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