@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.09 kB
JavaScript
import{jsxs as t,jsx as r}from"react/jsx-runtime";import{useMemo as o}from"react";import i from"@mui/material/Button";import e from"@mui/material/Stack";import a from"@mui/material/Typography";import n from"@mui/icons-material/Upload";import{baseStyle as p,activeStyle as s,acceptStyle as m,rejectStyle as d}from"./FileDragDrop.styles.js";const c=c=>{const{dropZoneOptions:l,getRootProps:u,getInputProps:f,isDragActive:g,isDragAccept:y,isDragReject:x,open:D,t:b,buttonLabel:h,dropZoneDescription:j,...v}=c,{style:I,sx:k,...A}=v,C=u({sx:{...o((()=>({...I,...p,...g?s:{},...y?m:{},...x?d:{}})),[I,g,x,y]),...k},direction:"column",alignItems:"center",justifyContent:"center",...A});return t(e,{...C,children:[r("input",{...f(),"data-testid":"file-drag-drop-input","aria-label":"File drag drop input"}),r(i,{onClick:D,color:"secondary",variant:"contained",startIcon:r(n,{}),"data-testid":"file-drag-drop-upload-button",children:h}),r(a,{"data-testid":"file-drop-zone-description",variant:"body2",sx:{mt:2,display:{xs:"none",sm:"inherit"}},children:j})]})};export{c as FileDragDropComponent};