@payfit/unity-components
Version:
151 lines (150 loc) • 7.5 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 { useUnityTheme as o, uyTv as s } from "@payfit/unity-themes";
import { jsx as c, jsxs as l } from "react/jsx-runtime";
import { useIntl as u } from "react-intl";
import { Heading as d } from "react-aria-components/Heading";
import { getLocalTimeZone as f, isToday as p, today as m } from "@internationalized/date";
import { CalendarCell as h, CalendarGrid as g, CalendarGridBody as _, CalendarGridHeader as v, CalendarHeaderCell as y, RangeCalendar as b } from "react-aria-components/RangeCalendar";
//#region src/components/date-range-calendar/DateRangeCalendar.tsx
var x = s({
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:theme-legacy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:bg-surface-primary-lowest",
"uy:[&_td:has(>[data-selection-end])]:bg-transparent",
"uy:[&_td:has(>[data-selection-start][data-selection-end])]:bg-transparent",
"uy:theme-legacy:[&_td:has(>[data-selected])]:bg-surface-primary-lowest",
"uy:theme-rebrand:[&_td:has(>[data-selected])]:bg-surface-form-selected",
"uy:theme-rebrand:[&_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:theme-legacy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:bg-surface-primary-lowest uy:theme-rebrand:[&_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:theme-legacy:data-[selection-start]:text-content-inverted",
"uy:theme-legacy:data-[selection-end]:text-content-inverted",
"uy:theme-legacy:data-[today]:data-[selection-start]:after:bg-content-inverted",
"uy:theme-legacy:data-[today]:data-[selection-end]:after:bg-content-inverted",
"uy:theme-rebrand:data-[selection-start]:text-content-form-active",
"uy:theme-rebrand:data-[selection-end]:text-content-form-active",
"uy:theme-rebrand:data-[today]:data-[selection-start]:after:bg-border-form-active",
"uy:theme-rebrand: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:theme-legacy:data-[selected]:not-data-[selection-start]:not-data-[selection-end]:hover:bg-surface-primary-lowest-hover",
"uy:theme-rebrand:data-[selected]:not-data-[selection-start]:not-data-[selection-end]:hover:bg-surface-neutral-hover"
] } }
}
});
function S({ value: t, defaultValue: s, minValue: S, maxValue: C, onChange: w, onFocusChange: T, ...E }) {
let D = u(), { theme: O } = o(), k = m(f()), A = n(), j = r({
startYear: S?.year,
endYear: C?.year
}), [M, N] = a(() => {
let e = t?.start ?? s?.start ?? k;
return S && e.compare(S) < 0 ? S : C && e.compare(C) > 0 ? C : e;
}), P = (e) => {
N((t) => t.set({ month: parseInt(e, 10) }));
}, F = (e) => {
N((t) => t.set({ year: parseInt(e, 10) }));
}, { base: I, calendarWrapper: L, dialogHeader: R, dialogHeaderGroup: z, calendarGrid: B, calendarHeaderCell: V, calendarCell: H } = x({
isDisabled: E.isDisabled,
isInteractive: !E.isDisabled && !E.isReadOnly
}), U = O === "rebrand" ? "outlined" : "ghost", W = O === "rebrand" ? "primary" : "neutral";
return /* @__PURE__ */ c("div", {
className: I(),
"data-dd-privacy": "mask",
children: /* @__PURE__ */ c(b, {
...E,
minValue: S,
maxValue: C,
value: t,
defaultValue: s,
onChange: w,
focusedValue: M,
onFocusChange: (e) => {
N(e), T?.(e);
},
children: /* @__PURE__ */ l("div", {
className: L(),
children: [/* @__PURE__ */ l("header", {
className: R(),
children: [
/* @__PURE__ */ c(d, { className: "uy:sr-only" }),
/* @__PURE__ */ l("div", {
className: z({ className: "uy:pl-100 uy:gap-200" }),
children: [/* @__PURE__ */ c(i, {
type: "month",
items: A,
value: M.month.toString(),
onChange: P,
isDisabled: E.isDisabled
}), /* @__PURE__ */ c(i, {
type: "year",
items: j,
value: M.year.toString(),
onChange: F,
isDisabled: E.isDisabled
})]
}),
/* @__PURE__ */ l("div", {
className: z({ className: "uy:ml-auto uy:gap-100" }),
children: [/* @__PURE__ */ c(e, {
slot: "previous",
icon: "CaretLeftOutlined",
color: W,
label: D.formatMessage({
id: "unity:component:common:previous",
defaultMessage: "Previous"
}),
variant: U,
isDisabled: E.isDisabled
}), /* @__PURE__ */ c(e, {
slot: "next",
icon: "CaretRightOutlined",
color: W,
label: D.formatMessage({
id: "unity:component:common:next",
defaultMessage: "Next"
}),
variant: U,
isDisabled: E.isDisabled
})]
})
]
}), /* @__PURE__ */ l(g, {
className: B(),
weekdayStyle: "short",
children: [/* @__PURE__ */ c(v, { children: (e) => /* @__PURE__ */ c(y, {
className: V(),
children: e
}) }), /* @__PURE__ */ c(_, { children: (e) => /* @__PURE__ */ c(h, {
date: e,
"data-today": p(e, f()) ? !0 : void 0,
className: H()
}) })]
})]
})
})
});
}
S.displayName = "DateRangeCalendar";
//#endregion
export { S as DateRangeCalendar };