@dndbuilder.com/react
Version:
Drag and drop builder for React
181 lines (180 loc) • 7.69 kB
JavaScript
"use client";
import { jsx as t, jsxs as i } from "react/jsx-runtime";
import { classNames as d } from "../../../../../utils.js";
import { Root as H, Viewport as O, Scrollbar as $, Thumb as q, Corner as K } from "../../../../../node_modules/.pnpm/@radix-ui_react-scroll-area@1.2.3_@types_react-dom@19.0.4_@types_react@19.0.10__@types_react@_kljz5v43jbme6rgnkxsykfv6c4/node_modules/@radix-ui/react-scroll-area/dist/index.js";
import { useVirtualizer as Q } from "../../../../../node_modules/.pnpm/@tanstack_react-virtual@3.13.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@tanstack/react-virtual/dist/esm/index.js";
import "../../../../../node_modules/.pnpm/axios@1.9.0/node_modules/axios/index.js";
import { useState as n, useRef as R, useEffect as p } from "react";
import { BiSearch as D } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bi/index.js";
import { FiCheck as P } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
import { LuChevronsUpDown as Y } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/lu/index.js";
import { Button as _ } from "./button.js";
import { Popover as c } from "./popover.js";
import { useQuery as A } from "../../../../../node_modules/.pnpm/@tanstack_react-query@5.80.6_react@19.0.0/node_modules/@tanstack/react-query/build/modern/useQuery.js";
import G from "../../../../../node_modules/.pnpm/axios@1.9.0/node_modules/axios/lib/axios.js";
const M = 35, y = "AIzaSyCn6E9t1_hK5zgcgbY2qHEwNDFHvhycgBc", ne = ({
value: w,
onChange: m,
className: v,
side: N = "bottom",
align: z = "center",
avoidCollisions: S = !0
}) => {
const [C, k] = n(), [f, h] = n(!1), [u, x] = n(""), g = R(null), [r, E] = n(void 0), s = w ?? C, {
data: F = [],
isLoading: T,
error: I
} = A({
queryKey: ["fonts", y],
queryFn: async () => (await G.get(
`https://www.googleapis.com/webfonts/v1/webfonts?key=${y}`
)).data.items,
staleTime: 1e3 * 60 * 60
// Cache for 1 hour
}), a = F.filter(
(e) => e.family.toLowerCase().includes(u.toLowerCase())
), l = Q({
count: a.length,
getScrollElement: () => g.current,
estimateSize: () => M,
overscan: 0
// Number of items to render outside of the visible area
}), L = (e) => {
e || x(""), h(e);
}, V = (e) => {
x(e.target.value);
}, j = (e, o) => {
k(e), h(!1), m == null || m(e);
};
return p(() => {
import("../../../../../_virtual/webfontloader.js").then((e) => e.w).then((e) => {
E(e.default);
});
}, []), p(() => {
if (f) {
const o = l.getVirtualItems().map((B) => {
var b;
return (b = a[B.index]) == null ? void 0 : b.family;
}).filter(Boolean);
o.length > 0 && (r == null || r.load({
google: {
families: o
}
}));
}
}, [r, l.getVirtualItems(), f, a]), p(() => {
s && (r == null || r.load({
google: {
families: [s]
}
}));
}, [r, s]), T ? /* @__PURE__ */ t("div", { className: "text-sm text-gray-500", children: "Loading fonts..." }) : I ? /* @__PURE__ */ t("div", { className: "text-sm text-red-500", children: "Error loading fonts" }) : /* @__PURE__ */ i(c, { onOpenChange: L, children: [
/* @__PURE__ */ t(c.Trigger, { asChild: !0, children: /* @__PURE__ */ i(
_,
{
variant: "outline",
role: "combobox",
className: d(
"border-dark-300 w-full justify-between whitespace-nowrap",
v
),
"aria-expanded": f,
"aria-haspopup": "listbox",
children: [
s ?? "Select a font",
/* @__PURE__ */ t(Y, { className: "ms-2 h-4 shrink-0 opacity-50" })
]
}
) }),
/* @__PURE__ */ i(
c.Content,
{
className: "w-[260px] p-0",
side: N,
align: z,
avoidCollisions: S,
children: [
/* @__PURE__ */ i("div", { className: "flex items-center border-b", children: [
/* @__PURE__ */ t("div", { className: "ms-2.5 flex w-7 items-center justify-center", children: /* @__PURE__ */ t(D, { className: " text-dark-500", size: 18 }) }),
/* @__PURE__ */ t(
"input",
{
value: u,
onChange: V,
type: "text",
className: "w-full border-0 px-1 text-sm placeholder:text-sm focus:ring-0",
placeholder: "Search..."
}
)
] }),
a.length === 0 ? /* @__PURE__ */ t("div", { className: "p-4 text-center text-sm text-gray-500", children: "No fonts found" }) : /* @__PURE__ */ i(
H,
{
className: "w-full",
style: {
height: a.length > 8 ? "285px" : "auto"
},
children: [
/* @__PURE__ */ t(O, { ref: g, className: "h-full w-full", children: /* @__PURE__ */ t(
"div",
{
style: {
height: `${l.getTotalSize()}px`,
width: "100%",
position: "relative"
},
children: l.getVirtualItems().map((e) => {
const o = a[e.index];
return /* @__PURE__ */ t(c.Close, { children: /* @__PURE__ */ i(
"div",
{
className: d(
"font-item hover:bg-dark-100 absolute left-0 top-0 flex w-full cursor-pointer items-center gap-2 px-4 text-sm",
o.family.length > 25 ? "text-xs" : "text-sm"
),
style: {
height: `${e.size}px`,
transform: `translateY(${e.start}px)`,
fontFamily: o.family
},
onClick: () => j(o.family, e.index),
role: "option",
"aria-selected": s === o.family,
children: [
o.family,
s === o.family && /* @__PURE__ */ t(
P,
{
className: d(
"ms-auto h-4 w-4",
s === o.family ? "opacity-100" : "opacity-0"
)
}
)
]
}
) }, e.key);
})
}
) }),
/* @__PURE__ */ t(
$,
{
className: "flex touch-none select-none bg-zinc-100 p-0.5 transition-colors duration-150 ease-out hover:bg-zinc-200 data-[orientation=vertical]:w-2.5",
orientation: "vertical",
children: /* @__PURE__ */ t(q, { className: "relative flex-1 rounded-lg bg-zinc-300 before:absolute before:left-1/2 before:top-1/2 before:h-full before:min-h-[44px] before:w-full before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:bg-zinc-400" })
}
),
/* @__PURE__ */ t(K, { className: "bg-zinc-200" })
]
}
)
]
}
)
] });
};
export {
ne as FontSelector
};
//# sourceMappingURL=font-selector.js.map