@dndbuilder.com/react
Version:
Drag and drop builder for React
202 lines (201 loc) • 9.56 kB
JavaScript
"use client";
import { jsxs as t, jsx as e } from "react/jsx-runtime";
import { BreakpointSelector as z } from "../shared/breakpoint-selector.js";
import { Label as C } from "../shared/label.js";
import { useAppSelector as A } from "../../hooks/use-app-selector.js";
import { useSettings as V } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as q } from "../../../../../store/selectors.js";
import { fileToBase64 as H, generateUniqueId as P, classNames as U } from "../../../../../utils.js";
import { Root as J, Trigger as S, Portal as W, Overlay as X, Content as K, Title as Q, Close as Y } from "../../../../../node_modules/.pnpm/@radix-ui_react-dialog@1.1.6_@types_react-dom@19.0.4_@types_react@19.0.10__@types_react@19.0._hjv5xdlxm3zsqf3yg6gf36cppa/node_modules/@radix-ui/react-dialog/dist/index.js";
import { Root as Z, List as _, Trigger as L, Content as j } from "../../../../../node_modules/.pnpm/@radix-ui_react-tabs@1.1.3_@types_react-dom@19.0.4_@types_react@19.0.10__@types_react@19.0.10_zw2jd7lnncg2lbtqb4feedrihy/node_modules/@radix-ui/react-tabs/dist/index.js";
import { useState as u, useCallback as B } from "react";
import { useDropzone as ee } from "../../../../../node_modules/.pnpm/react-dropzone@14.3.5_react@19.0.0/node_modules/react-dropzone/dist/es/index.js";
import { BsTrash as te, BsUpload as re } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { FiX as ae } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
import { HiPlusCircle as oe } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/hi/index.js";
import { Button as le } from "../shared/button.js";
const we = ({
label: y,
responsive: h,
type: I,
fieldName: i,
mode: c,
className: $,
accept: F = {
"image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"]
},
maxSize: l = 5 * 1024 * 1024,
// 5MB
maxFiles: R = 1
}) => {
const N = A(q), [r, d] = V(
h && c ? `${i}.${N}.${c}` : h ? `${i}.${N}` : c ? `${i}.${c}` : i,
I
), [k, x] = u(!1), [m, w] = u(""), [b, p] = u(!1), [g, o] = u(null), D = (a) => {
w(a.target.value), o(null);
}, M = async () => {
if (!m) {
o("Please enter a URL");
return;
}
try {
if (p(!0), o(null), (await (await fetch(m)).blob()).size > l) {
o(`File size exceeds the limit of ${l / 1024 / 1024}MB.`);
return;
}
const n = {
id: P(),
url: m
// base64Data,
};
d(n), x(!1), w("");
} catch (a) {
o("Failed to load image from URL. Please check the URL and try again."), console.error("Error loading image from URL:", a);
} finally {
p(!1);
}
}, T = B(
async (a) => {
try {
if (p(!0), o(null), a.length === 0)
return;
const s = a[0], n = await H(s), f = {
id: P(),
// url: URL.createObjectURL(file),
url: n,
// Use base64 data as URL
// base64Data,
name: s.name
};
d(f), x(!1);
} catch (s) {
o("Failed to process the image. Please try again."), console.error("Error processing image:", s);
} finally {
p(!1);
}
},
[d]
), E = B(
(a) => {
var f;
if (a.length === 0) return;
const n = (f = a[0].errors[0]) == null ? void 0 : f.code;
o(n === "file-too-large" ? `File size exceeds the limit of ${l / 1024 / 1024}MB.` : n === "file-invalid-type" ? "File type not supported. Please upload a valid image file." : "File upload failed. Please try again with a different file.");
},
[l]
), { getRootProps: G, getInputProps: O, isDragActive: v } = ee({
onDrop: T,
onDropRejected: E,
accept: F,
maxSize: l,
maxFiles: R
});
return /* @__PURE__ */ t("div", { className: U("mt-4 grid w-full gap-1.5", $), children: [
y && /* @__PURE__ */ t(C, { className: "flex flex-1 items-center gap-1", children: [
y,
" ",
h && /* @__PURE__ */ e(z, {})
] }),
/* @__PURE__ */ t(J, { open: k, onOpenChange: x, children: [
/* @__PURE__ */ e(S, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "group relative h-32 w-full cursor-pointer overflow-hidden bg-gray-300 transition duration-200 hover:bg-gray-400", children: [
(r == null ? void 0 : r.url) && /* @__PURE__ */ e(
"img",
{
src: r.url,
alt: (r == null ? void 0 : r.altText) ?? "",
className: "h-full w-full object-contain"
}
),
!(r != null && r.url) && /* @__PURE__ */ e("div", { className: "flex h-full w-full items-center justify-center text-2xl text-white", children: /* @__PURE__ */ e(oe, {}) }),
/* @__PURE__ */ t("div", { className: "absolute bottom-[-100%] flex w-full justify-between bg-gray-700 p-1 text-center text-xs text-gray-50 transition-all duration-200 group-hover:bottom-0", children: [
/* @__PURE__ */ e("span", { children: "Choose Image" }),
(r == null ? void 0 : r.url) && /* @__PURE__ */ e(
"button",
{
onClick: (a) => {
a.stopPropagation(), d(void 0);
},
className: "p-0.5",
children: /* @__PURE__ */ e(te, { className: "hover:text-danger-500" })
}
)
] })
] }) }),
/* @__PURE__ */ t(W, { children: [
/* @__PURE__ */ e(X, { className: "data-[state=open]:animate-overlay-show fixed inset-0 z-50 bg-[rgba(0,0,0,0.7)]" }),
/* @__PURE__ */ t(K, { className: "data-[state=open]:animate-content-show fixed left-[50%] top-[50%] z-[60] max-h-[600px] w-[500px] translate-x-[-50%] translate-y-[-50%] overflow-auto rounded-[6px] bg-white focus:outline-none", children: [
/* @__PURE__ */ t(Q, { className: "flex justify-between border-b p-4", children: [
/* @__PURE__ */ e("p", { className: "text-base font-semibold", children: "Upload Image" }),
/* @__PURE__ */ e(Y, { className: "cursor-pointer", children: /* @__PURE__ */ e(ae, {}) })
] }),
/* @__PURE__ */ t(Z, { defaultValue: "url", className: "flex flex-col", children: [
/* @__PURE__ */ t(_, { className: "flex border-b", children: [
/* @__PURE__ */ e(
L,
{
value: "url",
className: "border-b-2 border-transparent px-4 py-2 text-sm font-medium data-[state=active]:border-gray-500 data-[state=active]:font-semibold",
children: "From URL"
}
),
/* @__PURE__ */ e(
L,
{
value: "local",
className: "border-b-2 border-transparent px-4 py-2 text-sm font-medium data-[state=active]:border-gray-500 data-[state=active]:font-semibold",
children: "From Device"
}
)
] }),
/* @__PURE__ */ t(j, { value: "url", className: "flex flex-col gap-4 p-4", children: [
/* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: [
/* @__PURE__ */ e(C, { htmlFor: "image-url", children: "Image URL" }),
/* @__PURE__ */ e(
"input",
{
id: "image-url",
type: "url",
value: m,
onChange: D,
placeholder: "https://example.com/image.jpg",
className: "w-full rounded px-3 py-2 text-sm ring-1 placeholder:text-sm focus:outline-none focus:ring-2 focus:ring-gray-600"
}
)
] }),
g && /* @__PURE__ */ e("p", { className: "text-danger-500 text-sm", children: g }),
/* @__PURE__ */ e(le, { onClick: M, disabled: b, className: "w-full", children: b ? "Loading..." : "Upload Image" })
] }),
/* @__PURE__ */ t(j, { value: "local", className: "flex flex-col gap-4 p-4", children: [
/* @__PURE__ */ t(
"div",
{
...G(),
className: U(
"cursor-pointer rounded border-2 border-dashed p-8 text-center transition-colors",
v ? "border-gray-600 bg-gray-50" : "border-gray-300 hover:border-gray-600"
),
children: [
/* @__PURE__ */ e("input", { ...O() }),
/* @__PURE__ */ e(re, { className: "mx-auto mb-2 text-3xl text-gray-400" }),
/* @__PURE__ */ e("p", { className: "text-sm text-gray-600", children: v ? "Drop the image here" : "Drag and drop an image here, or click to select" }),
/* @__PURE__ */ t("p", { className: "mt-2 text-xs text-gray-400", children: [
"Supported formats: JPG, PNG, GIF, WEBP (Max size: ",
l / 1024 / 1024,
"MB)"
] })
]
}
),
g && /* @__PURE__ */ e("p", { className: "text-danger-500 text-sm", children: g }),
b && /* @__PURE__ */ e("p", { className: "text-center", children: "Loading..." })
] })
] })
] })
] })
] })
] });
};
export {
we as MediaControl
};
//# sourceMappingURL=media.control.js.map