@dndbuilder.com/react
Version:
Drag and drop builder for React
303 lines (302 loc) • 16.2 kB
JavaScript
"use client";
import { jsxs as t, jsx as e } from "react/jsx-runtime";
import "../../config/theme.config.js";
import "../../config/builder.config.js";
import "../../store/builder-slice.js";
import { classNames as I } from "../../../../../utils.js";
import { useState as N, useRef as C, useEffect as k } from "react";
import { getCurrentBreakpoint as $ } from "../../../../../store/selectors.js";
import { useAppSelector as O } from "../../hooks/use-app-selector.js";
import { useSettings as P } from "../../hooks/use-settings.js";
import "../../store/theme-slice.js";
import "../../../../../_virtual/cjs.js";
import "../../contexts/action-context.js";
import { FiX as R } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
import "../base/editor/block-control-panel.js";
import "../base/editor/block-navigation.js";
import { ScrollArea as z } from "../shared/scroll-area.js";
import { BsTrash as L } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/alpha/Alpha.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/block/Block.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/circle/Circle.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/chrome/Chrome.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/compact/Compact.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/github/Github.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/hue/Hue.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/material/Material.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/photoshop/Photoshop.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/sketch/Sketch.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/slider/Slider.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/swatches/Swatches.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/twitter/Twitter.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/google/Google.js";
import "../../../../../node_modules/.pnpm/tinycolor2@1.6.0/node_modules/tinycolor2/esm/tinycolor.js";
import { Label as B } from "../shared/label.js";
import "../shared/popover.js";
import "../shared/tooltip.js";
import "../shared/select.js";
import { BreakpointSelector as M } from "../shared/breakpoint-selector.js";
import "./slider-unit.control.js";
import "./toggle-group.control.js";
import { Input as A } from "../shared/input.js";
import "../shared/range-slider.js";
import "../../../../../_virtual/index5.js";
import "../../../../../_virtual/lodash.js";
import { LuSearchX as E } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/lu/index.js";
import { Button as j } from "../shared/button.js";
import "../shared/accordion.js";
import "../shared/tabs.js";
import "../shared/content-editable.js";
import "./spacing.control.js";
import "../shared/separator.js";
import "../../../../../node_modules/.pnpm/@monaco-editor_react@4.7.0_monaco-editor@0.52.2_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@monaco-editor/react/dist/index.js";
import "./flex-gap.control.js";
import "../shared/checkbox.js";
import "../shared/context-menu.js";
import "../shared/dialog.js";
import "../shared/drawer.js";
import "../../contexts/frame-context.js";
import "../shared/hover-card.js";
import { RenderIcon as T } from "../shared/render-icon.js";
import "../shared/switch.js";
import "../../../../../node_modules/.pnpm/@tiptap_extension-link@2.23.0_@tiptap_core@2.23.0_@tiptap_pm@2.23.0__@tiptap_pm@2.23.0/node_modules/@tiptap/extension-link/dist/index.js";
import "../../../../../node_modules/.pnpm/@tiptap_extension-placeholder@2.23.0_@tiptap_core@2.23.0_@tiptap_pm@2.23.0__@tiptap_pm@2.23.0/node_modules/@tiptap/extension-placeholder/dist/index.js";
import "../../../../../node_modules/.pnpm/@tiptap_starter-kit@2.23.0/node_modules/@tiptap/starter-kit/dist/index.js";
import "../shared/textarea.js";
import { MdErrorOutline as V } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/md/index.js";
import { CgSpinner as F } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/cg/index.js";
import { HiPlusCircle as X } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/hi/index.js";
import { collections as D } from "../../config/icon.config.js";
import { Root as H, Trigger as _, Portal as q, Overlay as G, Content as J, Title as K, Close as Q, Description as U } 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 W, List as Y, Trigger as Z, Content as ee } 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 re from "../../hooks/use-debounce.js";
import { useIcons as te } from "../../hooks/use-icons.js";
import "../base/add-new-section.js";
import "../base/editor-render-block.js";
import "react-dom";
import "../base/editor-asset-manager.js";
import "../base/editor/block-navigation-item.js";
import "../base/render-block.js";
import "../base/asset-manager.js";
import "../base/block-toolbar.js";
const Or = ({
label: p = "Select Icon",
fieldName: s,
mode: c,
responsive: d,
type: v,
className: w
}) => {
var y;
const m = D, a = O($), [r, f] = P(
d && c ? `${s}.${a}.${c}` : d ? `${s}.${a}` : c ? `${s}.${c}` : s,
v
), [b, l] = N(!1), [h, S] = N((r == null ? void 0 : r.iconName) ?? ""), [u, x] = N(
(r == null ? void 0 : r.iconSet) ?? ((y = m[0]) == null ? void 0 : y.value) ?? ""
), g = () => r != null && r.iconSet && r.iconName ? /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ t("div", { className: "text-center", children: [
/* @__PURE__ */ e("div", { className: "mb-1 text-2xl", children: /* @__PURE__ */ e(T, { iconSet: r.iconSet, iconName: r.iconName, size: "2em" }) }),
/* @__PURE__ */ t("div", { className: "text-xs text-gray-600", children: [
r.iconSet,
":",
r.iconName
] })
] }) }) : null;
return /* @__PURE__ */ t("div", { className: I("mt-4", w), children: [
p && /* @__PURE__ */ t(B, { className: "mb-1.5 flex flex-1 items-center gap-1", children: [
p,
" ",
d && /* @__PURE__ */ e(M, {})
] }),
/* @__PURE__ */ t(H, { open: b, onOpenChange: l, children: [
/* @__PURE__ */ e(_, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "control-media-area group relative h-32 w-full cursor-pointer overflow-hidden p-0 transition duration-200", children: [
/* @__PURE__ */ e("div", { className: "flex h-full w-full items-center justify-center text-2xl text-gray-600", children: r ? g() : /* @__PURE__ */ e(X, {}) }),
/* @__PURE__ */ t("div", { className: "absolute -bottom-full z-10 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: "Icon Library" }),
r && /* @__PURE__ */ e(
"button",
{
onClick: (o) => {
o.stopPropagation(), f(void 0);
},
className: "p-0.5",
children: /* @__PURE__ */ e(L, { className: "hover:text-danger-500" })
}
)
] })
] }) }),
/* @__PURE__ */ t(q, { children: [
/* @__PURE__ */ e(G, { className: "data-[state=open]:animate-overlay-show fixed inset-0 z-50 bg-[rgba(0,0,0,0.7)]" }),
/* @__PURE__ */ t(J, { className: "z-60 focus:outline-hidden data-[state=open]:animate-content-show fixed left-[50%] top-[50%] w-full max-w-5xl translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white", children: [
/* @__PURE__ */ t(K, { className: "flex justify-between border-b p-4", children: [
/* @__PURE__ */ e("p", { className: "text-xl font-semibold text-gray-800", children: "Insert Icon" }),
/* @__PURE__ */ e(Q, { className: "cursor-pointer", children: /* @__PURE__ */ e(R, {}) })
] }),
/* @__PURE__ */ e(U, { asChild: !0, children: /* @__PURE__ */ t("div", { children: [
/* @__PURE__ */ e("div", { className: "flex h-[450px]", children: /* @__PURE__ */ e(
oe,
{
selectedIcon: h,
setSelectedIcon: S,
iconCollections: m,
selectedCollection: u,
setSelectedCollection: x
}
) }),
/* @__PURE__ */ t("div", { className: " flex justify-end gap-2 border-t border-gray-300 p-4", children: [
/* @__PURE__ */ e(j, { onClick: () => l(!1), variant: "secondary", children: "Cancel" }),
/* @__PURE__ */ e(
j,
{
onClick: () => {
l(!1), f({
...r,
iconSet: u,
iconName: h
});
},
disabled: !h,
children: "Select"
}
)
] })
] }) })
] })
] })
] })
] });
};
function oe({
iconCollections: p,
selectedCollection: s,
setSelectedCollection: c,
selectedIcon: d,
setSelectedIcon: v
}) {
const w = C(null), m = C(null), a = C(null), [r, f] = N(""), b = re(r, 500), {
data: l,
isLoading: h,
isError: S,
fetchNextPage: u,
hasNextPage: x,
isFetchingNextPage: g
} = te({
collection: s,
pageSize: 36,
searchText: b
}), y = (o) => {
c(o), v(""), f(""), m.current && m.current.scrollTo({ top: 0, behavior: "smooth" });
};
return k(() => {
const o = new IntersectionObserver(
(i) => {
var n;
(n = i[0]) != null && n.isIntersecting && x && !g && u();
},
{
root: null,
// Use the viewport as the root
rootMargin: "100px",
// Start loading a bit before the element is visible
threshold: 0.1
// Trigger when at least 10% of the element is visible
}
);
return a.current && o.observe(a.current), () => {
a.current && o.unobserve(a.current);
};
}, [
u,
x,
g,
s,
b
// Use debounced search text instead of raw search text
]), /* @__PURE__ */ t(
W,
{
value: s,
onValueChange: y,
className: "flex h-full w-full",
children: [
/* @__PURE__ */ e(Y, { className: "flex w-[200px] flex-col overflow-y-auto border-r", children: p.map((o) => /* @__PURE__ */ e(
Z,
{
value: o.value,
className: "border-l-2 border-transparent px-4 py-3 text-left text-sm font-medium text-gray-800 transition-colors hover:bg-gray-100 data-[state=active]:border-gray-600 data-[state=active]:bg-gray-100",
children: o.name
},
o.value
)) }),
/* @__PURE__ */ e("div", { className: "flex-1 overflow-hidden", children: p.map((o) => /* @__PURE__ */ e(ee, { value: o.value, className: "h-full", children: /* @__PURE__ */ t("div", { className: "flex h-full flex-col", children: [
/* @__PURE__ */ e("div", { className: "flex justify-end px-5 py-3", children: /* @__PURE__ */ e(
A,
{
placeholder: "Search...",
className: "w-[200px]",
value: r,
onChange: (i) => f(i.target.value)
}
) }),
/* @__PURE__ */ e(z, { className: "flex-1", children: /* @__PURE__ */ t("div", { ref: m, children: [
/* @__PURE__ */ e(
"div",
{
ref: w,
className: "grid grid-cols-4 gap-4 px-4 py-2 sm:grid-cols-4 lg:grid-cols-6",
children: l != null && l.pages && l.pages.length > 0 && l.pages.some((i) => Object.keys((i == null ? void 0 : i.icons) ?? {}).length > 0) ? l.pages.flatMap(
(i) => Object.keys((i == null ? void 0 : i.icons) ?? {}).map((n) => /* @__PURE__ */ t(
"div",
{
className: I(
"cursor-pointer rounded border border-gray-300 p-4 text-center transition-colors",
d === n ? "bg-gray-100 ring-2 ring-gray-600" : "hover:bg-gray-100"
),
onClick: () => v(n),
children: [
/* @__PURE__ */ e(
T,
{
iconSet: o.value,
iconName: n,
size: "1.5rem",
className: "text-gray-800"
}
),
/* @__PURE__ */ e("div", { className: "mt-1 text-xs text-gray-600", children: n })
]
},
n
))
) : S ? /* @__PURE__ */ t("div", { className: "col-span-full flex h-[350px] flex-col items-center justify-center py-10 text-gray-500", children: [
/* @__PURE__ */ e(V, { className: "mb-2 h-12 w-12" }),
/* @__PURE__ */ e("div", { className: "mb-1 text-lg font-semibold", children: "Something went wrong" }),
/* @__PURE__ */ e("div", { className: "text-sm", children: "Please try again or select a different icon set" })
] }) : h ? Array.from({ length: 36 }).fill(null).map((i, n) => /* @__PURE__ */ t(
"div",
{
className: "flex h-20 cursor-pointer flex-col items-center justify-center rounded border border-gray-300 transition-colors",
children: [
/* @__PURE__ */ e("div", { className: "h-[1.5rem] w-[1.5rem] animate-pulse rounded bg-gray-300" }),
/* @__PURE__ */ e("div", { className: "mt-2 w-16 text-center text-xs text-gray-600", children: "Loading..." })
]
},
n
)) : /* @__PURE__ */ t("div", { className: "col-span-full flex h-[350px] flex-col items-center justify-center py-10 text-gray-500", children: [
/* @__PURE__ */ e(E, { className: "mb-2 h-12 w-12" }),
/* @__PURE__ */ e("div", { className: "mb-1 text-lg font-semibold", children: "No icons found" }),
/* @__PURE__ */ e("div", { className: "text-sm", children: "Try a different search or icon set." })
] })
}
),
x && /* @__PURE__ */ e("div", { ref: a, className: "mb-2 mt-4 flex h-10 justify-center", children: g && /* @__PURE__ */ e(F, { className: "animate-spin text-2xl text-gray-600" }) })
] }) })
] }) }, o.value)) })
]
}
);
}
export {
Or as IconControl,
oe as IconSetViewer
};
//# sourceMappingURL=icon.control.js.map