@payfit/unity-components
Version:
124 lines (123 loc) • 4.36 kB
JavaScript
import { IconButton as e } from "../icon-button/IconButton.js";
import { calendarBase as t } from "./DateCalendar.variants.js";
import { useMonthsList as n } from "./hooks/useMonthsList.js";
import { useYearsList as r } from "./hooks/useYearsList.js";
import { DateSegmentSelect as i } from "./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 { getLocalTimeZone as d, isToday as f, today as p } from "@internationalized/date";
import { Calendar as m, CalendarCell as h, CalendarGrid as g, CalendarGridBody as _, CalendarGridHeader as v, CalendarHeaderCell as y, Heading as b } from "react-aria-components/Calendar";
//#region src/components/date-calendar/DateCalendar.tsx
var x = s({
extend: t,
slots: {
calendarGrid: "uy:border-spacing-25",
calendarCell: [
"uy:data-[selected]:bg-surface-form-active",
"uy:theme-legacy:data-[selected]:text-content-inverted",
"uy:theme-legacy:data-[today]:data-[selected]:after:bg-content-inverted",
"uy:theme-rebrand:data-[selected]:text-content-form-active",
"uy:theme-rebrand:data-[today]:data-[selected]:after:bg-border-form-active"
]
},
variants: { isDisabled: { true: { calendarCell: "uy:data-[selected]:bg-transparent uy:data-[selected]:text-content-neutral-disabled" } } }
});
function S({ value: t, defaultValue: s, minValue: S, maxValue: C, onChange: w, onFocusChange: T, ...E }) {
let D = u(), { theme: O } = o(), k = p(d()), A = n(), j = r({
startYear: S?.year,
endYear: C?.year
}), [M, N] = a(t ?? s ?? null), [P, F] = a(() => {
let e = t ?? s ?? k;
return S && e.compare(S) < 0 ? S : C && e.compare(C) > 0 ? C : e;
}), I = (e) => {
F((t) => t.set({ month: parseInt(e, 10) }));
}, L = (e) => {
F((t) => t.set({ year: parseInt(e, 10) }));
}, { base: R, calendarWrapper: z, dialogHeader: B, dialogHeaderGroup: V, calendarGrid: H, calendarHeaderCell: U, calendarCell: W } = x({
isDisabled: E.isDisabled,
isInteractive: !E.isDisabled && !E.isReadOnly
}), G = O === "rebrand" ? "outlined" : "ghost", K = O === "rebrand" ? "primary" : "neutral";
return /* @__PURE__ */ c("div", {
className: R(),
"data-dd-privacy": "mask",
children: /* @__PURE__ */ c(m, {
...E,
minValue: S,
maxValue: C,
value: M,
defaultValue: s,
onChange: (e) => {
N(e), w?.(e);
},
focusedValue: P,
onFocusChange: (e) => {
F(e), T?.(e);
},
children: /* @__PURE__ */ l("div", {
className: z(),
children: [/* @__PURE__ */ l("header", {
className: B(),
children: [
/* @__PURE__ */ c(b, { className: "uy:sr-only" }),
/* @__PURE__ */ l("div", {
className: V({ className: "uy:pl-100 uy:gap-200" }),
children: [/* @__PURE__ */ c(i, {
type: "month",
items: A,
value: P.month.toString(),
onChange: I,
isDisabled: E.isDisabled
}), /* @__PURE__ */ c(i, {
type: "year",
items: j,
value: P.year.toString(),
onChange: L,
isDisabled: E.isDisabled
})]
}),
/* @__PURE__ */ l("div", {
className: V({ className: "uy:ml-auto uy:gap-100" }),
children: [/* @__PURE__ */ c(e, {
slot: "previous",
icon: "CaretLeftOutlined",
color: K,
label: D.formatMessage({
id: "unity:component:common:previous",
defaultMessage: "Previous"
}),
variant: G,
isDisabled: E.isDisabled
}), /* @__PURE__ */ c(e, {
slot: "next",
icon: "CaretRightOutlined",
color: K,
label: D.formatMessage({
id: "unity:component:common:next",
defaultMessage: "Next"
}),
variant: G,
isDisabled: E.isDisabled
})]
})
]
}), /* @__PURE__ */ l(g, {
className: H(),
weekdayStyle: "short",
children: [/* @__PURE__ */ c(v, { children: (e) => /* @__PURE__ */ c(y, {
className: U(),
children: e
}) }), /* @__PURE__ */ c(_, { children: (e) => /* @__PURE__ */ c(h, {
date: e,
"data-today": f(e, d()) ? !0 : void 0,
className: W()
}) })]
})]
})
})
});
}
S.displayName = "DateCalendar";
//#endregion
export { S as DateCalendar };