@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) • 1.63 kB
JavaScript
import{jsxs as e,jsx as i}from"react/jsx-runtime";import r from"@mui/material/Stack";import t from"@mui/material/Typography";import{useMemo as a}from"react";import o from"@mui/material/Box";import m from"@mui/icons-material/ArrowDownward";import s from"@mui/material/Avatar";import{overlayStyle as n}from"./DropOverlay.styles.js";import{useTranslate as l}from"../../../locales/index.js";import c from"../../locale.json.js";const p="NexusDropOverlay",d=d=>{const x=l(c),{dropZoneOptions:h,header:f=x("Drop files anywhere to upload"),showMaxFiles:u=!0,showMaxSize:y=!0,extraDescription:$,sx:g}=d,F=a((()=>h?.maxSize&&Number.isFinite(h.maxSize)?parseFloat((h.maxSize/1024/1024).toFixed(1)):1/0),[h?.maxSize]),S=h?.maxFiles||"";return e(r,{sx:[n,...Array.isArray(g)?g:[g]],direction:"column",alignItems:"center",justifyContent:"center","data-testid":`${p}-root`,className:`${p}-root`,children:[i(s,{sx:{height:48,width:48,mb:3,backgroundColor:"grey.600"},children:i(m,{})}),f&&e(o,{"data-testid":`${p}-header`,className:`${p}-header`,children:["string"==typeof f&&i(t,{variant:"subtitle1",sx:{fontWeight:700,mb:2},children:f}),"string"!=typeof f&&f]}),u&&S&&e(t,{variant:"caption","data-testid":`${p}-maxFiles`,className:`${p}-maxFiles`,children:[x("MaximumNumberFiles",{0:`${S}`}),"."]}),y&&F&&F!==1/0&&e(t,{variant:"caption","data-testid":`${p}-maxSize`,className:`${p}-maxSize`,children:[x("MaximumFileSize",{0:F}),"."]}),$&&e(o,{"data-testid":`${p}-extraDescription`,className:`${p}-extraDescription`,children:["string"==typeof $&&i(t,{variant:"caption",children:$}),"string"!=typeof $&&$]})]})};export{d as DropOverlay,p as prefix};