laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
280 lines (279 loc) • 10.1 kB
JavaScript
"use client";
import { jsxs as f, jsx as r } from "react/jsx-runtime";
import * as c from "react";
import { useCallback as X, useMemo as H, useEffect as G } from "react";
import { designTokens as l } from "../design-tokens.js";
import { Calendar as J, CalendarDayButton as Ce } from "./calendar.js";
import { Icon as K } from "./icon.js";
import { Label as xe } from "./label.js";
import { Popover as be, PopoverTrigger as De, PopoverContent as Me } from "./popover.js";
import { cn as Q } from "../../lib/utils.js";
import { TimePickerColumn as R } from "./app-time-picker.js";
import { it as Se } from "../../node_modules/date-fns/locale/it.js";
import { formatDate as z } from "../../node_modules/date-fns/format.js";
import { isSameDay as O } from "../../node_modules/date-fns/isSameDay.js";
const W = (o) => {
if (!Number.isFinite(o)) return 1;
const M = Math.trunc(o);
return Math.min(59, Math.max(1, M));
};
function Te(o) {
const {
placeholder: M = "Seleziona data",
dateFormat: Y,
className: Z,
disabled: d = !1,
size: v = "default",
firstDate: E,
lastDate: F,
availableDates: I,
locale: u = Se,
initialCalendarMonth: w,
customCalendarProps: S,
label: T,
labelClassName: $,
wrpClassName: ee,
id: te,
"data-testid": ne,
minDate: A,
maxDate: _,
numberOfMonths: oe,
clearable: ae = !1,
onClear: j
} = o, a = o.mode === "range", C = !a && o.showTime === !0, N = !a && o.withSeconds === !0, p = a ? 1 : W(o.minuteStep), k = a ? 1 : W(o.secondStep), P = Y ?? (C ? N ? "dd/MM/yyyy HH:mm:ss" : "dd/MM/yyyy HH:mm" : "dd/MM/yyyy"), [i, x] = c.useState(
a ? void 0 : o.value
), [n, b] = c.useState(
a ? o.value : void 0
), [L, D] = c.useState(
w
), [B, V] = c.useState(!1), re = (e) => {
const t = e ? new Date(e) : void 0;
C && t && i && t.setHours(
i.getHours(),
i.getMinutes(),
i.getSeconds()
), x(t), t && D(t), !a && o.onChange && o.onChange(t), !C && t && V(!1);
}, ie = X(() => {
a ? (b(void 0), o.onChange && o.onChange(void 0)) : (x(void 0), o.onChange && o.onChange(void 0)), j?.();
}, [a, o.onChange, j]), se = i?.getHours(), le = i?.getMinutes(), fe = i?.getSeconds(), de = H(
() => Array.from({ length: 24 }, (e, t) => t),
[]
), me = H(
() => Array.from(
{ length: Math.floor(59 / p) + 1 },
(e, t) => t * p
),
[p]
), ce = H(
() => Array.from(
{ length: Math.floor(59 / k) + 1 },
(e, t) => t * k
),
[k]
), y = X(
(e, t) => {
const s = i ? new Date(i) : /* @__PURE__ */ new Date();
i || s.setHours(0, 0, 0, 0), e === "hour" ? s.setHours(t) : e === "minute" ? s.setMinutes(t) : e === "second" && s.setSeconds(t), x(s), !a && o.onChange && o.onChange(s);
},
[i, a, o.onChange]
), ue = (e, t) => {
let s;
!n || !n.from ? s = { from: t, to: void 0 } : n.from && !n.to ? t < n.from ? s = { from: t, to: void 0 } : s = { from: n.from, to: t } : n.from && n.to && (s = { from: t, to: void 0 }), b(s), s?.from && D(s.from), a && o.onChange && o.onChange(s);
};
let m = [];
E && m.push({ before: E }), F && m.push({ after: F }), I?.length && m.push(
(e) => !I.some(
(t) => O(t, e)
)
), d && (m = [!0]), G(() => {
if (a) {
b(o.value);
const e = o.value?.from;
D(e ?? w);
} else
x(o.value), D(
o.value ?? w
);
}, [o.value, a, w]);
const [h, g] = c.useState(
null
);
G(() => {
const e = () => {
h && (g(null), a && o.onChange && o.onChange(n));
};
return window.addEventListener("pointerup", e), () => window.removeEventListener("pointerup", e);
}, [h, a, o.onChange, n]);
const he = (e, t) => {
!a || !n || !n.from || !n.to || (O(e, n.from) ? (g("from"), t.preventDefault()) : O(e, n.to) && (g("to"), t.preventDefault()));
}, ge = (e) => {
if (!h || !n || !n.from || !n.to) return;
let t = { ...n };
h === "from" ? e <= n.to ? t.from = e : (t.from = n.to, t.to = e, g("to")) : h === "to" && (e >= n.from ? t.to = e : (t.to = n.from, t.from = e, g("from"))), b(t);
}, ve = c.useId(), q = te ?? ve, U = a ? !!n?.from : !!i, we = () => a && n ? /* @__PURE__ */ f("span", { children: [
n.from && z(n.from, P, { locale: u }),
n.from && n.to && " - ",
n.to && z(n.to, P, { locale: u })
] }) : !a && i ? /* @__PURE__ */ r("span", { children: z(i, P, { locale: u }) }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground", children: M });
return /* @__PURE__ */ f("div", { className: Q("flex flex-col gap-1.5", ee), children: [
T && /* @__PURE__ */ r(xe, { htmlFor: q, className: $, children: T }),
/* @__PURE__ */ f(be, { open: d ? !1 : B, onOpenChange: V, modal: !0, children: [
/* @__PURE__ */ r(De, { asChild: !0, children: /* @__PURE__ */ f(
"div",
{
id: q,
"data-testid": ne,
className: Q(
l.input.base,
l.radius.default,
l.text.base,
l.interaction.disabled,
"flex items-center gap-2 font-normal whitespace-nowrap [&>span]:line-clamp-1",
l.focusRing,
B && l.activeRing,
"hover:border-d-ring cursor-pointer transition-colors",
!U && "text-d-muted-foreground",
d && "cursor-not-allowed opacity-50",
v === "default" && l.sizes.default,
v === "sm" && l.sizes.sm,
v === "lg" && l.sizes.lg,
Z
),
"aria-disabled": d,
role: "button",
tabIndex: d ? -1 : 0,
onClick: d ? void 0 : () => {
},
children: [
/* @__PURE__ */ r(K, { name: "Calendar", size: v === "lg" ? "sm" : "xs" }),
/* @__PURE__ */ r("div", { className: "min-w-0 flex-1", children: we() }),
ae && U && /* @__PURE__ */ r(
"div",
{
role: "button",
className: "bg-d-accent hover:bg-d-accent/80 border-d-border flex shrink-0 cursor-pointer items-center justify-center rounded-full border p-1 transition-colors",
onClick: (e) => {
e.stopPropagation(), e.preventDefault(), ie();
},
onMouseDown: (e) => e.preventDefault(),
"aria-label": "Clear selection",
children: /* @__PURE__ */ r(
K,
{
name: "X",
size: "xs",
className: "!text-d-foreground opacity-50"
}
)
}
)
]
}
) }),
" ",
/* @__PURE__ */ f(
Me,
{
className: "flex max-h-[500px] min-h-0 w-auto flex-row p-0 shadow",
align: "start",
children: [
a ? /* @__PURE__ */ r(
J,
{
...S || {},
mode: "range",
selected: n,
onSelect: ue,
autoFocus: !0,
disabled: m,
locale: u,
defaultMonth: L,
numberOfMonths: oe ?? 1,
minDate: A,
maxDate: _,
components: {
...S?.components,
DayButton: (e) => /* @__PURE__ */ r(
Ce,
{
...e,
onPointerDown: (t) => {
e.onPointerDown && e.onPointerDown(t), he(e.day.date, t);
},
onPointerEnter: (t) => {
e.onPointerEnter && e.onPointerEnter(t), ge(e.day.date);
}
}
)
}
}
) : /* @__PURE__ */ r(
J,
{
...S || {},
mode: "single",
selected: i,
onSelect: re,
autoFocus: !0,
disabled: m,
locale: u,
defaultMonth: L,
minDate: A,
maxDate: _
}
),
C && /* @__PURE__ */ f("div", { className: "border-d-border/50 relative flex shrink-0 flex-row overflow-hidden border-l", children: [
/* @__PURE__ */ f(
"div",
{
className: "invisible flex h-0 flex-row overflow-hidden opacity-0 select-none",
"aria-hidden": "true",
children: [
/* @__PURE__ */ r("div", { className: "w-12 shrink-0 sm:w-14" }),
/* @__PURE__ */ r("div", { className: "w-12 shrink-0 sm:w-14" }),
N && /* @__PURE__ */ r("div", { className: "w-12 shrink-0 sm:w-14" })
]
}
),
/* @__PURE__ */ f("div", { className: "absolute inset-0 flex h-full w-full flex-row overflow-y-auto", children: [
/* @__PURE__ */ r(
R,
{
type: "hour",
value: se,
options: de,
onChange: (e) => y("hour", e),
className: "flex flex-1"
}
),
/* @__PURE__ */ r(
R,
{
type: "minute",
value: le,
options: me,
onChange: (e) => y("minute", e),
className: "flex flex-1"
}
),
N && /* @__PURE__ */ r(
R,
{
type: "second",
value: fe,
options: ce,
onChange: (e) => y("second", e),
className: "flex flex-1"
}
)
] })
] })
]
}
)
] })
] });
}
export {
Te as DatePicker
};