laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
168 lines (167 loc) • 6.2 kB
JavaScript
"use client";
import { jsxs as i, jsx as r } from "react/jsx-runtime";
import N from "../../../_virtual/dayjs.min.js";
import A from "react";
import { cn as m } from "../../../lib/utils.js";
import { Badge as n } from "../badge.js";
import { Tooltip as g, TooltipTrigger as M, TooltipContent as T } from "../tooltip.js";
import { Typo as w } from "../typo.js";
import { AppointmentCard as I } from "./appointment-card.js";
import { useCalendar as W } from "./calendar-context.js";
const F = ({ date: d, weekdayInfo: h }) => {
const {
calendarStartHour: l,
calendarEndHour: p,
enableGrouping: f,
appointmentsByDay: j,
groupedAppointmentsByDay: D
} = W(), O = A.useMemo(() => Array.from(
{ length: p - l + 1 },
(e, a) => `${(a + l).toString().padStart(2, "0")}:00`
), [l, p]), u = d.format("YYYY-MM-DD"), o = f ? D[u] || {} : { default: j[u] || [] }, s = d.isSame(N(), "day"), t = Object.keys(o), c = t.length > 1, b = (e) => {
const a = parseInt(e.startTime.split(":")[0]), x = parseInt(e.startTime.split(":")[1]), y = e.endTime || N(`2000-01-01 ${e.startTime}`).add(1, "hour").format("HH:mm"), $ = parseInt(y.split(":")[0]), C = parseInt(y.split(":")[1]), v = (a - l) * 60 + x, H = ($ - l) * 60 + C - v, S = v * 64 / 60, k = Math.max(H * 64 / 60, 32);
return /* @__PURE__ */ r(
"div",
{
className: "absolute right-1 left-1",
style: {
top: `${S}px`,
height: `${k}px`,
zIndex: 10
},
children: /* @__PURE__ */ r(I, { appointment: e })
},
e.id
);
};
return /* @__PURE__ */ i(
"div",
{
className: "border-d-border flex w-full flex-col border-r",
style: {
flex: c ? t.length : 1,
minWidth: `${Math.max(t.length, 1) * 135}px`
},
children: [
/* @__PURE__ */ r(
"div",
{
className: m(
"bg-d-card border-b-d-border sticky top-0 h-14 border-b backdrop-blur-sm",
"flex items-center pl-3",
s ? "!border-t-d-primary border-t-3" : "border-d-border"
),
children: /* @__PURE__ */ i("div", { className: "flex flex-col items-start justify-center gap-0", children: [
/* @__PURE__ */ r(
w,
{
variant: "h5",
className: m("mb-0", s ? "text-d-primary" : ""),
children: d.format("DD")
}
),
/* @__PURE__ */ r(
w,
{
variant: "small",
className: m(
"text-xs font-medium uppercase",
s ? "text-d-primary" : "text-d-muted-foreground"
),
children: h.label
}
)
] })
}
),
f && /* @__PURE__ */ r("div", { className: "border-d-border flex min-h-[2.5rem] border-b", children: t.length > 0 ? c ? t.map((e) => /* @__PURE__ */ r(
"div",
{
className: "border-d-border flex flex-1 items-center justify-center border-r px-2 py-1.5 last:border-r-0",
style: { minWidth: "120px" },
children: e.length > 10 ? /* @__PURE__ */ i(g, { children: [
/* @__PURE__ */ r(M, { asChild: !0, children: /* @__PURE__ */ r(
n,
{
variant: s ? "outline-primary" : "outline",
className: "max-w-full truncate",
children: e.length > 10 ? `${e.slice(0, 10)}...` : e
}
) }),
/* @__PURE__ */ r(
T,
{
sideOffset: 4,
className: "max-w-xs text-center break-words",
children: e
}
)
] }) : /* @__PURE__ */ r(
n,
{
variant: s ? "outline-primary" : "outline",
className: "max-w-full truncate",
children: e
}
)
},
e
)) : /* @__PURE__ */ r("div", { className: "flex flex-1 items-center justify-center px-2 py-1.5", children: t[0].length > 15 ? /* @__PURE__ */ i(g, { children: [
/* @__PURE__ */ r(M, { asChild: !0, children: /* @__PURE__ */ r(
n,
{
variant: s ? "outline-primary" : "outline",
className: "max-w-full truncate",
children: t[0].length > 15 ? `${t[0].slice(0, 15)}...` : t[0]
}
) }),
/* @__PURE__ */ r(
T,
{
sideOffset: 4,
className: "max-w-xs text-center break-words",
children: t[0]
}
)
] }) : /* @__PURE__ */ r(
n,
{
variant: s ? "outline-primary" : "outline",
className: "max-w-full truncate",
children: t[0]
}
) }) : /* @__PURE__ */ r("div", { className: "flex-1 px-2 py-1.5" }) }),
/* @__PURE__ */ i("div", { className: "relative flex flex-1", children: [
/* @__PURE__ */ r("div", { className: "absolute inset-0", children: O.map((e) => /* @__PURE__ */ r(
"div",
{
className: "border-d-border relative h-16 border-b last:border-b-0",
style: { height: "64px" },
children: /* @__PURE__ */ r("div", { className: "border-d-border/70 absolute top-1/2 right-0 left-0 border-t border-dashed" })
},
e
)) }),
c ? t.map((e) => /* @__PURE__ */ r(
"div",
{
className: "border-d-border relative flex-1 border-r last:border-r-0",
style: { minWidth: "120px" },
children: o[e].map(
(a) => b(a)
)
},
e
)) : /* @__PURE__ */ r("div", { className: "relative flex-1", children: t.map(
(e) => o[e].map(
(a) => b(a)
)
) })
] })
]
},
h.key
);
};
export {
F as DayColumn
};