@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.25 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Button"),i=require("@mui/material/Stack"),a=require("@mui/material/Typography"),o=require("@mui/icons-material/Upload"),n=require("./FileDragDrop.styles.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=s(r),u=s(i),d=s(a),c=s(o);exports.FileDragDropComponent=r=>{const{dropZoneOptions:i,getRootProps:a,getInputProps:o,isDragActive:s,isDragAccept:p,isDragReject:m,open:y,t:f,buttonLabel:g,dropZoneDescription:j,...x}=r,{style:b,sx:D,...q}=x,v=a({sx:{...t.useMemo((()=>({...b,...n.baseStyle,...s?n.activeStyle:{},...p?n.acceptStyle:{},...m?n.rejectStyle:{}})),[b,s,m,p]),...D},direction:"column",alignItems:"center",justifyContent:"center",...q});return e.jsxs(u.default,{...v,children:[e.jsx("input",{...o(),"data-testid":"file-drag-drop-input","aria-label":"File drag drop input"}),e.jsx(l.default,{onClick:y,color:"secondary",variant:"contained",startIcon:e.jsx(c.default,{}),"data-testid":"file-drag-drop-upload-button",children:g}),e.jsx(d.default,{"data-testid":"file-drop-zone-description",variant:"body2",sx:{mt:2,display:{xs:"none",sm:"inherit"}},children:j})]})};