@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.18 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react-dropzone"),o=require("@mui/material/Box"),t=require("./FilePicker.styles.js"),i=require("./components/DropOverlay/DropOverlay.js"),s=require("./components/FilePickerBlock/FilePickerBlock.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=n(o);const a="NexusFilePicker";exports.default=o=>{const{dropZoneOptions:n,onDropped:l,DropZoneComponent:u=s.FilePickerBlock,DropZoneComponentProps:c,DropOverlayComponent:d=i.DropOverlay,DropOverlayComponentProps:x,sx:y,...m}=o,{sx:j,...v}=c??{},D=r.useDropzone({...n,onDrop:l}),{getRootProps:P,getInputProps:f,isDragActive:k}=D,O=P({sx:[t.baseStyle,...Array.isArray(y)?y:[y]],"data-testid":`${a}-root`,className:`${a}-root`,...m});return e.jsxs(p.default,{justifyContent:"center",alignItems:"center",...O,children:[e.jsx("input",{...f(),"data-testid":`${a}-input`,className:`${a}-input`,"aria-label":"File picker input"}),k&&e.jsx(d,{dropZoneOptions:n,...x}),e.jsx(u,{dropZoneProps:{...D,...n},sx:[{visibility:k?"hidden":"visible"},...Array.isArray(j)?j:[j]],...v})]})},exports.prefix=a;