xtreme-ui
Version:
Collection of reusable components that can be used in web projects
39 lines (38 loc) • 1.98 kB
JavaScript
"use client";
import { jsxs as c, Fragment as f, jsx as l } from "react/jsx-runtime";
import x from "clsx";
import { Icon as C } from "gliff";
import { createPortal as b } from "react-dom";
import { useFilePicker as P } from "use-file-picker";
import { ImageEditor as u } from "../../layout/ImageEditor/ImageEditor.js";
import { Button as y } from "../Button/Button.js";
import './filePicker.css';/* empty css */
import { getFilePickerIcon as I } from "./getFilePickerIcon.js";
import { imageExts as N } from "./types.js";
const S = { "--iconSize": "64px" }, A = (F) => {
const { className: g, children: n, draggable: d = !1, editable: h = !1, multiple: i = !1, accept: o = "*/*", onChange: t } = F, s = h && !i && (o.includes("image") || N.includes(o?.split?.(",")?.[0]?.replace(".", ""))), { openFilePicker: a, loading: k, plainFiles: r, clear: p } = P({
accept: o,
multiple: i,
onFilesSuccessfullySelected: ({ plainFiles: e }) => {
s || t(e);
}
}), m = x("xtrFilePicker", n && "wrapper", d && "draggable", g);
return n ? /* @__PURE__ */ c(f, { children: [
/* @__PURE__ */ l("div", { className: m, onClick: a, children: n }),
s && r?.[0] && b(/* @__PURE__ */ l(u, { file: r?.[0], clearFile: p, onChange: (e) => t(e.blob ? [e.blob] : []) }), document.body)
] }) : d ? /* @__PURE__ */ c("div", { className: m, onClick: a, children: [
/* @__PURE__ */ l(C, { code: "f0ed", set: "duotone", style: S }),
/* @__PURE__ */ c("h2", { children: [
"Drop File",
i ? "s" : "",
" Here"
] }),
/* @__PURE__ */ l("p", { children: "or click here to open file chooser" })
] }) : /* @__PURE__ */ c(f, { children: [
/* @__PURE__ */ l(y, { className: m, label: `Choose File${i ? "s" : ""}`, icon: I(o), onClick: a, loading: k }),
s && r?.[0] && b(/* @__PURE__ */ l(u, { file: r?.[0], clearFile: p, onChange: (e) => t(e.blob ? [e.blob] : []) }), document.body)
] });
};
export {
A as FilePicker
};