laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
121 lines (120 loc) • 3.84 kB
JavaScript
"use client";
import { jsx as f, jsxs as y } from "react/jsx-runtime";
import a from "../../../_virtual/dayjs.min.js";
import N from "../../../_virtual/isoWeek.js";
import d from "react";
import { CalendarProvider as h } from "./calendar-context.js";
import { CalendarHeader as B } from "./calendar-header.js";
import { CurrentTimeLine as C } from "./current-timeline.js";
import { DayColumn as V } from "./day-column.js";
import { TimeColumn as z } from "./time-column.js";
a.extend(N);
const L = [
{ key: "monday", label: "Lunedì", dayjs: 1 },
{ key: "tuesday", label: "Martedì", dayjs: 2 },
{ key: "wednesday", label: "Mercoledì", dayjs: 3 },
{ key: "thursday", label: "Giovedì", dayjs: 4 },
{ key: "friday", label: "Venerdì", dayjs: 5 },
{ key: "saturday", label: "Sabato", dayjs: 6 },
{ key: "sunday", label: "Domenica", dayjs: 0 }
];
function Q({
appointments: l = [],
onWeekChange: r,
initialWeekOffset: D = 0,
showNavigation: M = !0,
customActions: w,
enableGrouping: i = !1,
groupLabel: O,
calendarStartHour: W = 8,
calendarEndHour: p = 20,
todayString: b = "Oggi"
}) {
const [o, m] = d.useState(D), x = d.useMemo(
() => a().startOf("isoWeek").add(o, "week").format("YYYY-MM-DD"),
[o]
), j = d.useMemo(
() => a().startOf("isoWeek").add(o, "week").endOf("isoWeek").format("YYYY-MM-DD"),
[o]
), k = d.useMemo(() => {
const e = [], t = a().startOf("isoWeek").add(o, "week");
for (let s = 0; s < 7; s++)
e.push(t.add(s, "day"));
return e;
}, [o]), v = o === 0, n = d.useMemo(() => {
const e = {};
return l.forEach((t) => {
const s = t.date;
e[s] || (e[s] = []), e[s].push(t);
}), e;
}, [l]), E = d.useMemo(() => {
const e = {};
return Object.keys(n).forEach((t) => {
const s = n[t];
if (!i)
e[t] = { default: s };
else {
const c = {};
s.forEach((Y) => {
const u = Y.groupBy || "Senza categoria";
c[u] || (c[u] = []), c[u].push(Y);
}), e[t] = c;
}
}), e;
}, [n, i]), S = d.useCallback(() => {
const e = o - 1;
if (m(e), r) {
const t = a().startOf("isoWeek").add(e, "week").format("YYYY-MM-DD"), s = a().startOf("isoWeek").add(e, "week").endOf("isoWeek").format("YYYY-MM-DD");
r(e, t, s);
}
}, [o, r]), T = d.useCallback(() => {
const e = o + 1;
if (m(e), r) {
const t = a().startOf("isoWeek").add(e, "week").format("YYYY-MM-DD"), s = a().startOf("isoWeek").add(e, "week").endOf("isoWeek").format("YYYY-MM-DD");
r(e, t, s);
}
}, [o, r]), A = d.useCallback(() => {
if (m(0), r) {
const t = a().startOf("isoWeek").format("YYYY-MM-DD"), s = a().endOf("isoWeek").format("YYYY-MM-DD");
r(0, t, s);
}
}, [r]);
return /* @__PURE__ */ f(h, { value: {
calendarStartHour: W,
calendarEndHour: p,
currentWeekOffset: o,
weekStart: x,
weekEnd: j,
weekDates: k,
isCurrentWeek: v,
goToPreviousWeek: S,
goToNextWeek: T,
goToCurrentWeek: A,
appointments: l,
appointmentsByDay: n,
groupedAppointmentsByDay: E,
enableGrouping: i,
groupLabel: O,
showNavigation: M,
customActions: w,
onWeekChange: r,
todayString: b
}, children: /* @__PURE__ */ y("div", { className: "flex h-full flex-col", children: [
/* @__PURE__ */ f(B, {}),
/* @__PURE__ */ y("div", { className: "border-d-border relative flex flex-1 border-t border-l", children: [
/* @__PURE__ */ f(z, {}),
/* @__PURE__ */ f(C, {}),
/* @__PURE__ */ f("div", { className: "flex flex-1 overflow-x-auto", children: k.map((e, t) => /* @__PURE__ */ f(
V,
{
date: e,
weekdayInfo: L[t]
},
e.format("YYYY-MM-DD")
)) })
] })
] }) });
}
export {
Q as WeeklyCalendar
};