@payfit/unity-components
Version:
151 lines (150 loc) • 6.61 kB
JavaScript
import { IconButton as e } from "../icon-button/IconButton.js";
import { calendarBase as t } from "../date-calendar/DateCalendar.variants.js";
import { useMonthsList as n } from "../date-calendar/hooks/useMonthsList.js";
import { useYearsList as r } from "../date-calendar/hooks/useYearsList.js";
import { DateSegmentSelect as i } from "../date-calendar/parts/DateSegmentSelect.js";
import { useState as a } from "react";
import { uyTv as o } from "@payfit/unity-themes";
import { jsx as s, jsxs as c } from "react/jsx-runtime";
import { useIntl as l } from "react-intl";
import { Heading as u } from "react-aria-components/Heading";
import { getLocalTimeZone as d, isToday as f, today as p } from "@internationalized/date";
import { CalendarCell as m, CalendarGrid as h, CalendarGridBody as g, CalendarGridHeader as _, CalendarHeaderCell as v, RangeCalendar as y } from "react-aria-components/RangeCalendar";
//#region src/components/date-range-calendar/DateRangeCalendar.tsx
var b = o({
extend: t,
slots: {
calendarGrid: [
"uy:border-spacing-y-25 uy:border-spacing-x-0",
"uy:[&_td:has(>[data-selected])]:relative",
"uy:[&_td:has(>[data-selection-start])]:bg-transparent uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:content-[''] uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:absolute uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:top-0 uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:right-0 uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:w-1/2 uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:h-full ",
"uy:[&_td:has(>[data-selection-end])]:bg-transparent",
"uy:[&_td:has(>[data-selection-start][data-selection-end])]:bg-transparent",
"",
"uy:[&_td:has(>[data-selected])]:bg-surface-form-selected",
"uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:bg-surface-form-selected",
"uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:content-[''] uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:absolute uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:top-0 uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:left-0 uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:w-1/2 uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:h-full uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:bg-surface-form-selected"
],
calendarHeaderCell: "uy:text-center",
calendarCell: [
"uy:data-[selected]:rounded-none",
"uy:data-[selection-start]:bg-surface-form-active uy:data-[selection-start]:rounded-circle",
"uy:data-[selection-end]:bg-surface-form-active",
"uy:data-[selection-end]:rounded-circle",
"",
"",
"",
"",
"uy:data-[selection-start]:text-content-form-active",
"uy:data-[selection-end]:text-content-form-active",
"uy:data-[today]:data-[selection-start]:after:bg-border-form-active",
"uy:data-[today]:data-[selection-end]:after:bg-border-form-active"
]
},
variants: {
isDisabled: { true: {
calendarGrid: "uy:[&_td]:bg-transparent uy:[&_td]:before:hidden",
calendarCell: "uy:data-[selected]:bg-transparent uy:data-[selection-start]:bg-transparent uy:data-[selection-start]:text-content-neutral-disabled uy:data-[selection-end]:bg-transparent uy:data-[selection-end]:text-content-neutral-disabled uy:cursor-not-allowed"
} },
isInteractive: { true: { calendarCell: [
"uy:data-[selected]:not-data-[selection-start]:not-data-[selection-end]:hover:rounded-circle",
"",
"uy:data-[selected]:not-data-[selection-start]:not-data-[selection-end]:hover:bg-surface-neutral-hover"
] } }
}
});
function x({ value: t, defaultValue: o, minValue: x, maxValue: S, onChange: C, onFocusChange: w, ...T }) {
let E = l(), D = p(d()), O = n(), k = r({
startYear: x?.year,
endYear: S?.year
}), [A, j] = a(() => {
let e = t?.start ?? o?.start ?? D;
return x && e.compare(x) < 0 ? x : S && e.compare(S) > 0 ? S : e;
}), M = (e) => {
j((t) => t.set({ month: parseInt(e, 10) }));
}, N = (e) => {
j((t) => t.set({ year: parseInt(e, 10) }));
}, { base: P, calendarWrapper: F, dialogHeader: I, dialogHeaderGroup: L, calendarGrid: R, calendarHeaderCell: z, calendarCell: B } = b({
isDisabled: T.isDisabled,
isInteractive: !T.isDisabled && !T.isReadOnly
}), V = "outlined", H = "primary";
return /* @__PURE__ */ s("div", {
className: P(),
"data-dd-privacy": "mask",
children: /* @__PURE__ */ s(y, {
...T,
minValue: x,
maxValue: S,
value: t,
defaultValue: o,
onChange: C,
focusedValue: A,
onFocusChange: (e) => {
j(e), w?.(e);
},
children: /* @__PURE__ */ c("div", {
className: F(),
children: [/* @__PURE__ */ c("header", {
className: I(),
children: [
/* @__PURE__ */ s(u, { className: "uy:sr-only" }),
/* @__PURE__ */ c("div", {
className: L({ className: "uy:pl-100 uy:gap-200" }),
children: [/* @__PURE__ */ s(i, {
type: "month",
items: O,
value: A.month.toString(),
onChange: M,
isDisabled: T.isDisabled
}), /* @__PURE__ */ s(i, {
type: "year",
items: k,
value: A.year.toString(),
onChange: N,
isDisabled: T.isDisabled
})]
}),
/* @__PURE__ */ c("div", {
className: L({ className: "uy:ml-auto uy:gap-100" }),
children: [/* @__PURE__ */ s(e, {
slot: "previous",
icon: "CaretLeftOutlined",
color: H,
label: E.formatMessage({
id: "unity:component:common:previous",
defaultMessage: "Previous"
}),
variant: V,
isDisabled: T.isDisabled
}), /* @__PURE__ */ s(e, {
slot: "next",
icon: "CaretRightOutlined",
color: H,
label: E.formatMessage({
id: "unity:component:common:next",
defaultMessage: "Next"
}),
variant: V,
isDisabled: T.isDisabled
})]
})
]
}), /* @__PURE__ */ c(h, {
className: R(),
weekdayStyle: "short",
children: [/* @__PURE__ */ s(_, { children: (e) => /* @__PURE__ */ s(v, {
className: z(),
children: e
}) }), /* @__PURE__ */ s(g, { children: (e) => /* @__PURE__ */ s(m, {
date: e,
"data-today": f(e, d()) ? !0 : void 0,
className: B()
}) })]
})]
})
})
});
}
x.displayName = "DateRangeCalendar";
//#endregion
export { x as DateRangeCalendar };