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