laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
224 lines (223 loc) • 7.99 kB
JavaScript
"use client";
import { jsxs as s, jsx as e } from "react/jsx-runtime";
import * as Y from "react";
import { useState as i, useEffect as j, useCallback as D } from "react";
import { useDebounce as Z } from "../../hooks/use-debounce.js";
import { cva as _ } from "../../node_modules/class-variance-authority/dist/index.js";
import { cn as k } from "../../lib/utils.js";
import { Button as V } from "./button.js";
import { Label as ee } from "./label.js";
import { Command as te, CommandInput as oe, CommandList as se, CommandEmpty as ne, CommandGroup as O, CommandItem as R } from "./command.js";
import { Popover as re, PopoverTrigger as ae, PopoverContent as ie } from "./popover.js";
import ce from "../../node_modules/lucide-react/dist/esm/icons/x.js";
import le from "../../node_modules/lucide-react/dist/esm/icons/chevrons-up-down.js";
import de from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
import me from "../../node_modules/lucide-react/dist/esm/icons/check.js";
const fe = _(
"flex items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
{
variants: {
size: {
default: "h-9 text-sm",
sm: "h-8 text-xs",
lg: "h-10 text-lg"
}
},
defaultVariants: {
size: "default"
}
}
);
function ke({
fetcher: c,
preload: m,
filterFn: x,
renderOption: A,
getOptionValue: a,
getDisplayValue: v,
notFound: F,
loadingSkeleton: $,
label: l,
labelClassName: B,
placeholder: G = "Select...",
value: n,
onChange: u,
disabled: z = !1,
width: E = "200px",
className: M,
triggerClassName: U,
noResultsMessage: X,
clearable: w = !0,
size: q
}) {
const [p, N] = i(!1), [r, d] = i([]), [b, h] = i(!1), [C, g] = i(null), [S, y] = i(null), [I, H] = i(""), f = Z(I, m ? 0 : 300), [L, P] = i([]);
j(() => ((async () => {
try {
if (h(!0), g(null), m) {
console.log(
"[AsyncSelect] Preload attivo: caricamento completo dei dati"
);
const o = await c("");
P(o), d(o);
} else {
const o = await c(n);
d(o);
}
} catch (o) {
g(
o instanceof Error ? o.message : "Failed to fetch options"
);
} finally {
h(!1);
}
})(), () => {
d([]), P([]);
}), [c, n, m]), j(() => {
if (p)
if (m)
if (f) {
const t = L.filter(
(o) => x ? x(o, f) : String(v(o)).toLowerCase().includes(f.toLowerCase())
);
d(t);
} else
d(L);
else
(async () => {
try {
h(!0), g(null);
const o = await c(f);
d(o);
} catch (o) {
g(
o instanceof Error ? o.message : "Failed to fetch options"
);
} finally {
h(!1);
}
})();
}, [
p,
f,
m,
x,
L,
v
]), j(() => {
if (n && r.length > 0) {
const t = r.find((o) => a(o) === n);
y(t || null);
} else n || y(null);
}, [n, r, a]);
const J = D(
(t) => {
const o = w && t === n ? "" : t, Q = r.find((W) => a(W) === o) || null;
y(Q), u(o), N(!1);
},
[n, u, w, r, a]
), K = D(
(t) => {
t.stopPropagation(), t.preventDefault(), y(null), u(""), N(!1);
},
[u]
), T = Y.useId();
return /* @__PURE__ */ s("div", { className: "space-y-1.5", children: [
l && /* @__PURE__ */ e(ee, { htmlFor: T, className: B, children: l }),
/* @__PURE__ */ s(re, { open: p, onOpenChange: N, children: [
/* @__PURE__ */ e(ae, { children: /* @__PURE__ */ e(
V,
{
id: T,
type: "button",
variant: "ghost",
role: "combobox",
"aria-expanded": p,
className: k(
fe({ size: q }),
z && "cursor-not-allowed opacity-50",
U,
"font-normal"
),
style: { width: E },
disabled: z,
children: /* @__PURE__ */ s("div", { className: "flex flex-1 items-center justify-between overflow-hidden", children: [
S ? /* @__PURE__ */ e("div", { className: "truncate", children: v(S) }) : /* @__PURE__ */ e("span", { className: "text-d-muted-foreground hover:text-d-foreground", children: G }),
/* @__PURE__ */ s("div", { className: "flex items-center gap-1", children: [
w && S && /* @__PURE__ */ e(
"div",
{
className: "bg-d-secondary/20 hover:bg-d-secondary/30 z-20 flex cursor-pointer items-center justify-center rounded-full border p-1",
onClick: K,
onMouseDown: (t) => t.preventDefault(),
"aria-label": "Clear selection",
children: /* @__PURE__ */ e(ce, { size: 8, className: "text-d-foreground" })
}
),
/* @__PURE__ */ e(le, { className: "opacity-50", size: 10 })
] })
] })
}
) }),
/* @__PURE__ */ e(
ie,
{
style: { width: E },
className: k("p-0", M),
children: /* @__PURE__ */ s(te, { shouldFilter: !1, children: [
/* @__PURE__ */ s("div", { className: "relative w-full border-b", children: [
/* @__PURE__ */ e(
oe,
{
className: "!focus:outline-none !focus-visible:outline-none !focus:ring-0 !focus:ring-offset-0 !focus-visible:ring-0 !focus-visible:ring-offset-0 !border-none !outline-none",
placeholder: `Search ${typeof l == "string" ? l.toLowerCase() : "options"}...`,
value: I,
onValueChange: (t) => {
H(t);
}
}
),
b && r.length > 0 && /* @__PURE__ */ e("div", { className: "absolute top-1/2 right-2 flex -translate-y-1/2 transform items-center", children: /* @__PURE__ */ e(de, { className: "h-4 w-4 animate-spin" }) })
] }),
/* @__PURE__ */ s(se, { children: [
C && /* @__PURE__ */ e("div", { className: "text-d-destructive p-3 text-center", children: C }),
b && r.length === 0 && ($ || /* @__PURE__ */ e(ue, {})),
!b && !C && r.length === 0 && (F || /* @__PURE__ */ e(ne, { children: X ?? `No ${typeof l == "string" ? l.toLowerCase() : "options"} found.` })),
/* @__PURE__ */ e(O, { children: r.map((t) => /* @__PURE__ */ s(
R,
{
value: a(t),
onSelect: J,
children: [
A(t),
/* @__PURE__ */ e(
me,
{
className: k(
"ml-auto h-3 w-3",
n === a(t) ? "opacity-100" : "opacity-0"
)
}
)
]
},
a(t)
)) })
] })
] })
}
)
] })
] });
}
function ue() {
return /* @__PURE__ */ e(O, { children: [1, 2, 3].map((c) => /* @__PURE__ */ e(R, { disabled: !0, children: /* @__PURE__ */ s("div", { className: "flex w-full items-center gap-2", children: [
/* @__PURE__ */ e("div", { className: "bg-d-secondary h-6 w-6 animate-pulse rounded-full" }),
/* @__PURE__ */ s("div", { className: "flex flex-1 flex-col gap-1", children: [
/* @__PURE__ */ e("div", { className: "bg-d-secondary h-4 w-24 animate-pulse rounded" }),
/* @__PURE__ */ e("div", { className: "bg-d-secondary h-3 w-16 animate-pulse rounded" })
] })
] }) }, c)) });
}
export {
ke as AsyncSelect
};