laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
226 lines (225 loc) • 8.64 kB
JavaScript
"use client";
import { jsx as i, jsxs as c, Fragment as L } from "react/jsx-runtime";
import { useState as S, useMemo as q, useCallback as h } from "react";
import { KanbanBoardProvider as G, KanbanBoard as M, KanbanBoardColumn as Q, KanbanBoardColumnHeader as T, KanbanBoardColumnList as V, KanbanBoardColumnListItem as X, KanbanBoardCard as Y, KanbanBoardCardTitle as Z, KanbanBoardCardDescription as _ } from "./kanban.js";
import { stringToHexColor as $, cn as I, hexToRgba as E } from "../../lib/utils.js";
import { Button as k } from "./button.js";
import { Icon as ee } from "./icon.js";
import re from "../../node_modules/lucide-react/dist/esm/icons/lock.js";
import ne from "../../node_modules/lucide-react/dist/esm/icons/arrow-down-to-line.js";
import ae from "../../node_modules/lucide-react/dist/esm/icons/arrow-up-from-line.js";
import te from "../../node_modules/lucide-react/dist/esm/icons/plus.js";
function pe({
columns: C,
initialTasks: P,
onTaskMove: x,
onTaskEdit: y,
onTaskCreate: N,
taskActions: A,
renderTaskContent: B,
className: H,
allowTaskCreate: F = !0
}) {
const [v, w] = S(P), [g, K] = S(null), u = q(
() => new Map(C.map((e) => [e.id, e])),
[C]
), O = h(
(e) => !!u.get(e)?.disabled,
[u]
), D = h(
(e) => {
const r = u.get(e);
return r ? !r.disabled && !r.disableOnDragIn : !0;
},
[u]
), b = h(
(e) => {
const r = u.get(e);
return r ? !r.disabled && !r.disableOnDragOut : !0;
},
[u]
), U = h(
(e) => !g || g === e ? !1 : !b(g),
[g, b]
), z = (e) => {
const r = {};
for (const t of Object.keys(e))
r[t] = [...e[t]];
return r;
}, J = (e, r) => {
w((t) => {
const d = z(t);
let s, n;
for (const o of Object.keys(d)) {
const a = d[o].findIndex((l) => l.id === e);
if (a !== -1) {
n = o, [s] = d[o].splice(a, 1);
break;
}
}
return !s || n === r || n && !b(n) || !D(r) ? t : (d[r] || (d[r] = []), d[r].push(s), n && x && x(e, n, r), d);
});
}, R = (e, r, t, d) => {
w((s) => {
const n = z(s), o = Object.keys(n).find(
(m) => n[m].some((W) => W.id === e)
);
if (!o) return s;
const a = n[o].findIndex(
(m) => m.id === e
);
if (a === -1) return s;
const l = o === t;
if (l && O(t) || !l && (!b(o) || !D(t)))
return s;
const [f] = n[o].splice(a, 1);
n[t] || (n[t] = []);
const p = n[t].findIndex(
(m) => m.id === r
);
if (p === -1)
n[t].push(f);
else {
const m = d === "top" ? p : p + 1;
n[t].splice(m, 0, f);
}
return o !== t && x && x(e, o, t), n;
});
}, j = (e) => JSON.parse(e);
return /* @__PURE__ */ i(G, { children: /* @__PURE__ */ i(M, { className: H, children: C.map((e) => {
const r = $(e.label), t = O(e.id), d = !D(e.id), s = !b(e.id), n = d && s, o = d || U(e.id);
return /* @__PURE__ */ c(
Q,
{
columnId: e.id,
disabled: o,
onDropOverColumn: (a) => {
if (o) return;
const l = j(a);
J(l.id, e.id);
},
className: I(
"group/column relative transition-all duration-200",
!n && "hover:-translate-y-0.5 hover:shadow-lg"
),
children: [
/* @__PURE__ */ i(T, { className: "border-d-border/60 bg-d-sidebar/90 sticky top-0 z-10 mb-2 rounded-xl border px-2.5 py-2 backdrop-blur", children: /* @__PURE__ */ c("div", { className: "flex w-full items-center justify-between", children: [
/* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ c(
"div",
{
className: "flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-semibold shadow-sm",
style: {
backgroundColor: E(r, 0.15),
color: r,
borderColor: E(r, 0.35)
},
children: [
/* @__PURE__ */ i(
"span",
{
className: "size-1.5 rounded-full",
style: { backgroundColor: r }
}
),
/* @__PURE__ */ i("span", { className: "max-w-[150px] truncate", children: e.label })
]
}
),
/* @__PURE__ */ i("span", { className: "text-d-muted-foreground border-d-border/60 bg-d-muted/40 inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium", children: v[e.id]?.length ?? 0 })
] }),
/* @__PURE__ */ c("div", { className: "flex items-center gap-1", children: [
(d || s) && /* @__PURE__ */ i(
"span",
{
className: "text-d-muted-foreground border-d-border/60 bg-d-muted/30 inline-flex h-6 items-center justify-center gap-1 rounded-md border px-1.5",
title: n ? "Entrata e uscita bloccate" : d ? "Entrata bloccata" : "Uscita bloccata",
"aria-label": n ? "Entrata e uscita bloccate" : d ? "Entrata bloccata" : "Uscita bloccata",
children: n ? /* @__PURE__ */ i(re, { className: "size-3.5" }) : /* @__PURE__ */ c(L, { children: [
d && /* @__PURE__ */ i(ne, { className: "size-3.5" }),
s && /* @__PURE__ */ i(ae, { className: "size-3.5" })
] })
}
),
F && N && /* @__PURE__ */ i(
k,
{
variant: "ghost",
size: "icon",
className: "text-d-muted-foreground hover:text-d-foreground h-6 w-6",
onClick: () => N(e.id),
children: /* @__PURE__ */ i(te, { className: "size-3.5" })
}
)
] })
] }) }),
/* @__PURE__ */ i(
V,
{
className: "px-1.5 pb-3",
dropDisabled: o,
children: v[e.id]?.map((a) => /* @__PURE__ */ i(
X,
{
cardId: a.id,
dropDisabled: o,
className: "mb-2 border-0 last:mb-0",
onDragStartCapture: () => {
K(e.id);
},
onDragEndCapture: () => {
K(null);
},
onDropOverListItem: (l, f) => {
if (o || f === "none") return;
const p = j(l);
R(
p.id,
a.id,
e.id,
f
);
},
children: /* @__PURE__ */ i(
Y,
{
data: a,
dragDisabled: t,
className: I(
"group/card relative rounded-xl border border-transparent shadow-sm transition-all duration-200",
!t && "hover:border-d-border/60 hover:-translate-y-0.5 hover:shadow-lg"
),
backgroundColor: r,
onEdit: y ? () => y(a, e.id) : void 0,
actions: A?.(a, e.id),
meta: a.meta,
children: B ? B(a, e.id) : /* @__PURE__ */ c(L, { children: [
/* @__PURE__ */ c("div", { className: "mb-1 flex items-start gap-2", children: [
a.icon && /* @__PURE__ */ i(
ee,
{
name: a.icon,
size: "sm",
className: "text-d-muted-foreground mt-0.5 shrink-0"
}
),
/* @__PURE__ */ i(Z, { className: "flex-1 text-sm leading-snug font-semibold", children: a.title })
] }),
a.description && /* @__PURE__ */ i(_, { className: "text-d-muted-foreground mt-1.5 line-clamp-2 text-xs leading-relaxed", children: a.description })
] })
}
)
},
a.id
))
}
)
]
},
e.id
);
}) }) });
}
export {
pe as AppKanban
};