xtreme-ui
Version:
Collection of reusable components that can be used in web projects
2 lines (1 loc) • 1.67 kB
JavaScript
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),q=require("clsx"),x=require("react-dom"),F=require("use-file-picker"),h=require("../../layout/ImageEditor/ImageEditor.cjs"),C=require("../Button/Button.cjs"),y=require("../Icon/Icon.cjs");;/* empty css */const I=require("./getFilePickerIcon.cjs"),E=require("./types.cjs"),N=k=>{var g,b,m;const{className:f,children:s,draggable:u=!1,editable:j=!1,multiple:c=!1,accept:i="*/*",onChange:l}=k,t=j&&!c&&(i.includes("image")||E.imageExts.includes((m=(b=(g=i==null?void 0:i.split)==null?void 0:g.call(i,","))==null?void 0:b[0])==null?void 0:m.replace(".",""))),{openFilePicker:n,loading:P,plainFiles:e,clear:d}=F.useFilePicker({accept:i,multiple:c,onFilesSuccessfullySelected:({plainFiles:o})=>{t||l(o)}}),a=q("xtrFilePicker",s&&"wrapper",u&&"draggable",f);return s?r.jsxs(r.Fragment,{children:[r.jsx("div",{className:a,onClick:n,children:s}),t&&(e==null?void 0:e[0])&&x.createPortal(r.jsx(h.ImageEditor,{file:e==null?void 0:e[0],clearFile:d,onChange:o=>l(o.blob?[o.blob]:[])}),document.body)]}):u?r.jsxs("div",{className:a,onClick:n,children:[r.jsx(y.Icon,{code:"f0ed",type:"duotone",size:64}),r.jsxs("h2",{children:["Drop File",c?"s":""," Here"]}),r.jsx("p",{children:"or click here to open file chooser"})]}):r.jsxs(r.Fragment,{children:[r.jsx(C.Button,{className:a,label:`Choose File${c?"s":""}`,icon:I.getFilePickerIcon(i),onClick:n,loading:P}),t&&(e==null?void 0:e[0])&&x.createPortal(r.jsx(h.ImageEditor,{file:e==null?void 0:e[0],clearFile:d,onChange:o=>l(o.blob?[o.blob]:[])}),document.body)]})};exports.FilePicker=N;