@rnwonder/react-date-picker
Version:
A lightweight, customizable, and accessible date picker component for React applications.
454 lines (448 loc) • 16.3 kB
JavaScript
import { jsxs as o, jsx as t } from "react/jsx-runtime";
import { useRef as D, useState as m, useEffect as u, createElement as R } from "react";
import { S as h, B as f } from "./Show-DCFzPwVn.js";
import { c } from "./class-DLUjLwnh.js";
import { E as S, j as v } from "./general-DZqASQRm-DXQPvh4C.js";
import { c as x, L as E } from "./general-CMKgS5rp.js";
const s = (e) => {
const d = D(null), [a, r] = m(!1), [n, y] = m(!0);
return u(() => {
e.dayRangeStart || e.dayRangeEnd || e.isMultipleSelected ? r(!0) : r(!1), !e.dayRangeStart && !e.dayRangeEnd && !e.isMultipleSelected ? y(!0) : y(!1);
}, [e.dayRangeEnd, e.dayRangeStart, e.isMultipleSelected]), u(() => {
d.current && (e.secondaryColor && document.documentElement.style.setProperty(
"--date-picker-before-bg",
e.secondaryColor
), e.secondaryTextColor && document.documentElement.style.setProperty(
"--date-picker-before-color",
e.secondaryTextColor
));
}, [e.secondaryColor, e.secondaryTextColor]), /* @__PURE__ */ o(
"div",
{
ref: d,
className: c(
`
${e.header ? `
date-picker-weekday-name
rn-block
rn-text-[0.75rem]` : `
date-picker-day-number-area
rn-flex
rn-items-center
rn-justify-center
rn-text-[0.9375rem]
`}
rn-relative
rn-text-center
rn-font-bold
rn-uppercase
rn-tracking-[0.02em]
rn-text-[#909090]
dark:rn-text-white
${e.hidden && "day-number-area-outside-days rn-pointer-events-none"}
${e.dayRangeBetween && !e.hidden ? "rn-bg-primary-focus rn-bg-opacity-50 dark:rn-bg-black-tie" : ""}
before:rn-absolute
before:rn-top-0
before:rn-h-full
before:rn-bg-opacity-50
before:rn-content-[""]
${e.dayRangeStart && e.dayRangeStartEnd && !e.hidden || e.dayRangeEnd && e.dayRangeStartEnd && !e.hidden ? "" : "before:rn-hidden"}
${e.dayRangeStart && e.dayRangeStartEnd && "before:rn-left-[15%] before:rn-block before:rn-w-[86%] before:rn-rounded-l-full"}
${e.dayRangeEnd && e.dayRangeStartEnd && "before:rn-right-[15%] before:rn-block before:rn-w-[85%] before:rn-rounded-r-full"}
${a && "date-picker-day-number-area-selected"}
`,
e.weekNamesClass,
e.daysWrapperClass,
{
[e.daysActiveRangeStartWrapperClass || ""]: e.dayRangeStart,
[e.daysActiveRangeEndWrapperClass || ""]: e.dayRangeEnd,
[e.daysActivePrimaryWrapperClass || ""]: a,
[e.daysActiveRangeBetweenWrapperClass || ""]: e.dayRangeBetween
}
),
"aria-selected": a,
"data-value": e.header ? e.headerValue : e.dateValue,
"data-day-number-area": !e.header,
"data-day-number-area-range-start-or-end": e.dayRangeStart || e.dayRangeEnd,
"data-day-number-area-range-between": e.dayRangeBetween,
"data-day-number-area-range-start": e.dayRangeStart,
"data-day-number-area-range-end": e.dayRangeEnd,
"data-day-number-area-current-day": e.daysCurrent,
"data-day-number-area-not-current-month": e.daysNotCurrentMonth,
"data-day-number-area-range-tip": e.dayRangeStart && e.dayRangeStartEnd || e.dayRangeEnd && e.dayRangeStartEnd,
"data-day-number-area-range-tip-start": e.dayRangeStart && e.dayRangeStartEnd,
"data-day-number-area-range-tip-end": e.dayRangeEnd && e.dayRangeStartEnd,
"data-day-name": e.header,
style: {
...e.dayRangeBetween ? {
backgroundColor: e.secondaryColor
} : {},
...e.weekDaysNameColor && e.header ? {
color: e.weekDaysNameColor
} : {}
},
onMouseEnter: e.onHover,
onMouseLeave: e.onHoverEnd,
...e.wrapperProps,
children: [
/* @__PURE__ */ t(h, { when: e.header && !e.hidden, children: e.children }),
/* @__PURE__ */ o(h, { when: !e.header && !e.hidden, children: [
/* @__PURE__ */ t(
f,
{
setHeight: !0,
tabIndex: a ? 0 : -1,
className: c(
`
date-picker-day-number
rn-relative
rn-z-10
rn-h-8
rn-w-8
rn-p-0
rn-text-center
rn-text-[0.9375rem]
rn-transition-none
${e.daysNotCurrentMonth ? !e.dayRangeStart && !e.dayRangeEnd ? "day-number-not-current-month rn-opacity-50 dark:rn-text-white" : "rn-opacity-95" : "day-number-current-month rn-opacity-100"}
${e.dayRangeBetween && "hover:rn-bg-transparent dark:hover:rn-bg-black-tie"}
${e.shouldHighlightWeekends && e.isWeekend && n ? "rn-text-red-500 dark:rn-text-red-500" : ""}
${a ? "rn-bg-primary hover:rn-bg-primary dark:rn-bg-white dark:rn-text-black dark:hover:rn-bg-white" : e.daysCurrent ? "day-number-current-day rn-border rn-border-dashed rn-border-black hover:rn-border hover:rn-border-dashed hover:rn-border-black dark:rn-border-white" : ""}
${e.dayRangeStart || e.dayRangeEnd ? "day-number-range-start-or-end rn-text-white dark:rn-text-black" : e.isMultipleSelected ? "day-number-multiple-select rn-text-white dark:rn-text-black" : e.dayRangeBetween ? "day-range-between rn-text-black" : "rn-text-black"}
rn-cursor-pointer
rn-rounded-full
disabled:rn-text-black
disabled:rn-opacity-30
`,
{
"dark:rn-text-white": n
},
e.daysBtnClass,
e.customDayClass,
{
[e.daysActivePrimaryBtnClass || ""]: a,
[e.daysActiveRangeBetweenBtnClass || ""]: e.dayRangeBetween,
[e.currentDayBtnClass || ""]: e.daysCurrent,
[e.weekEndDaysBtnClass || ""]: e.isWeekend,
[e.sundaysBtnClass || ""]: e.isSunday,
[e.saturdaysBtnClass || ""]: e.isSaturday,
[e.daysNotInCurrentMonthBtnClass || ""]: e.daysNotCurrentMonth,
[e.daysActiveRangeStartBtnClass || ""]: e.dayRangeStart,
[e.daysActiveRangeEndBtnClass || ""]: e.dayRangeEnd
}
),
"data-day-number": !0,
"data-day-number-selected": a,
"data-day-number-range-end-hover": e.dayRangeEndHover,
"data-day-number-range-end-selected": !e.dayRangeEndHover && a,
"data-day-number-range-start-or-end": e.dayRangeStart || e.dayRangeEnd,
"data-day-number-range-between": e.dayRangeBetween,
"data-day-number-range-start": e.dayRangeStart,
"data-day-number-range-end": e.dayRangeEnd,
"data-day-number-current-day": e.daysCurrent,
"data-day-number-not-current-month": e.daysNotCurrentMonth,
"data-day-number-is-weekend": e.isWeekend,
"data-day-number-is-sunday": e.isSunday,
"data-day-number-is-saturday": e.isSaturday,
"data-day-number-is-multiple-selected": e.isMultipleSelected,
"data-scope": "date-picker",
"data-highlight-weekend": e.shouldHighlightWeekends,
"data-part": "cell-trigger",
role: "button",
"aria-label": "Choose " + e.date,
"data-value": e.dateValue,
"data-type": "day",
onClick: e.onClick,
disabled: e.disabled,
selected: a,
style: {
...a && (e.primaryColor || e.primaryTextColor) ? {
backgroundColor: e.primaryColor,
color: e.primaryTextColor
} : {},
...e.dayRangeBetween ? { color: e.secondaryTextColor } : {},
...(e.weekEndDayTextColor || e.weekEndDayBgColor) && n && e.isWeekend ? {
color: e.weekEndDayTextColor,
backgroundColor: e.weekEndDayBgColor
} : {},
...e.textColor && n ? e.shouldHighlightWeekends && e.isWeekend ? {} : { color: e.textColor } : {}
},
noButtonAnimation: e.noButtonAnimation,
children: e.children
}
),
/* @__PURE__ */ t(h, { when: e.disabled, children: /* @__PURE__ */ t(
"div",
{
onClick: () => {
var l;
return (l = e.onDisabledDayError) == null ? void 0 : l.call(e, {
day: e.day,
month: e.month,
year: e.year
});
},
className: "rn-absolute rn-left-0 rn-top-0 rn-h-full rn-w-full rn-rounded-full"
}
) })
] })
]
}
);
}, C = (e) => /* @__PURE__ */ t(
"div",
{
className: c(
`
rn-grid
rn-grid-cols-7
rn-text-sm
`,
{
"date-picker-week-names-row rn-my-2": e.header,
"date-picker-days-row rn-mb-[0.13rem]": !e.header
},
e.weekNamesRowClass,
e.daysRowClass
),
"data-type": "date-picker-calendar-row",
"data-part": e.header ? "header" : "row",
"data-scope": "date-picker",
role: "row",
children: e.children
}
), N = ({
setDayRowsArray: e,
year: d,
weekStartDay: a,
month: r,
locale: n,
dayRowsArray: y
}) => (u(() => {
const l = S(r, d, {
weekStartDay: a,
locale: n
}), i = v(l, 7);
e(i);
}, [n, r, e, a, d]), y), g = (e) => {
const [d, a] = m([]);
return N({
month: e.month,
year: e.year,
weekStartDay: e.weekStartDay,
locale: e.locale || "en-US",
setDayRowsArray: a,
dayRowsArray: d
}), /* @__PURE__ */ t(
"div",
{
"data-type": "calendar-days-area",
"data-scope": "date-picker",
className: c(
"date-picker-calendar-days-area",
e.datePickerCalendarDaysArea
),
children: d.map((r, n) => /* @__PURE__ */ t(
C,
{
daysRowClass: c(
{
"rn-hidden": e.showSelectorTwo && n > 0
},
e.daysRowClass
),
children: r.map((y, l) => {
const i = x(
e.locale || "en-US",
y
);
return /* @__PURE__ */ R(
s,
{
...e,
calendarWeekDaysNameClass: void 0,
...E({
year: e.year,
day: i,
month: e.month,
startDay: e.startDay,
endDay: e.endDay,
customDaysClassName: e.customDaysClassName,
multipleObject: e.multipleObject,
hideOutSideDays: e.hideOutSideDays,
hoverRangeValue: e.hoverRangeValue,
enabledDays: e.enabledDays,
minDate: e.minDate,
maxDate: e.maxDate,
disabledDays: e.disabledDays
}),
key: l,
year: e.year,
month: e.month,
day: i.value,
onClick: () => e.handleDayClick(
i,
e.month,
e.year,
e.nextMonth || !1
),
onHover: () => e.onHoverDay(
i,
e.month,
e.year,
e.nextMonth || !1
),
onHoverEnd: () => e.onHoverDayEnd(
i,
e.month,
e.year,
e.nextMonth || !1
),
primaryColor: e.primaryColor,
primaryTextColor: e.primaryTextColor,
secondaryColor: e.secondaryColor,
secondaryTextColor: e.secondaryTextColor,
disabledDays: e.disabledDays,
shouldHighlightWeekends: e.shouldHighlightWeekends,
onDisabledDayError: e.onDisabledDayError,
hoverRangeValue: e.hoverRangeValue
},
y.value
);
})
},
n
))
}
);
}, w = (e) => {
const [d, a] = m([]), [r, n] = m([]);
return u(() => {
const y = Array.from({ length: 7 }, (i, k) => {
const b = new Date(
0,
0,
k - (1 - (e.weekStartDay || 0)) + 1
).toLocaleDateString(e.locale || "en", {
weekday: e.weekDaysType === "single" ? "narrow" : "short"
});
return e.weekDaysType === "double" ? b.slice(0, 2) : b;
}), l = Array.from({ length: 7 }, (i, k) => new Date(
0,
0,
k - (1 - (e.weekStartDay || 0)) + 1
).toLocaleDateString(e.locale || "en", {
weekday: "long"
}));
n(l), a(y);
}, [e.locale, e.weekDaysType, e.weekStartDay]), /* @__PURE__ */ t(C, { weekNamesRowClass: e.weekNamesRowClass, children: d.map((y, l) => /* @__PURE__ */ t(
s,
{
weekDaysNameColor: e.weekDaysNameColor,
weekNamesClass: e.weekNamesClass,
wrapperProps: {
"data-scope": "date-picker",
"data-type": "column-header",
"aria-label": r[l],
role: "columnheader"
},
header: !0,
headerValue: r[l],
children: y
},
l
)) });
}, $ = (e) => {
const [d, a] = m(0), [r, n] = m(0);
return u(() => {
e.month === 0 || (e.month === 11 ? (a(e.year + 1), n(0)) : (a(e.year), n(e.month + 1)));
}, [e.month, e.year]), /* @__PURE__ */ o(
"div",
{
className: c(
"date-picker-calendar-wrapper rn-flex rn-min-w-max breakTwoCalendar:rn-flex-col",
e.calendarWrapperClass
),
children: [
/* @__PURE__ */ o(
"div",
{
className: c(
"date-picker-calendar-area-one",
{
"rn-px-4": !e.twoMonthsDisplay,
"breakTwoCalendar:rn-px-4 aboveBreakTwoCalendar:rn-pl-4": e.twoMonthsDisplay
},
e.calendarOneAreaClass
),
"data-scope": "date-picker",
"data-part": "grid",
role: "grid",
"data-columns": 7,
"aria-roledescription": "calendar month",
tabIndex: -1,
children: [
e.weekDaysJSX || /* @__PURE__ */ t(
w,
{
...e,
weekDaysNameColor: e.weekDaysNameColor,
weekDaysType: e.weekDaysType,
locale: e.locale,
weekStartDay: e.weekStartDay
}
),
/* @__PURE__ */ t(g, { ...e })
]
}
),
/* @__PURE__ */ o(h, { when: e.twoMonthsDisplay, children: [
/* @__PURE__ */ t(
"div",
{
className: c(
"date-picker-calendar-area-divider rn-divider aboveBreakTwoCalendar:rn-divider-horizontal aboveBreakTwoCalendar:rn-mx-2 aboveBreakTwoCalendar:rn-w-fit ",
e.calendarDividerClass
)
}
),
/* @__PURE__ */ o(
"div",
{
className: c(
"date-picker-calendar-area-two",
{
"breakTwoCalendar:rn-px-4 aboveBreakTwoCalendar:rn-pr-4": e.twoMonthsDisplay
},
e.calendarTwoAreaClass
),
children: [
e.weekDaysJSX || /* @__PURE__ */ t(
w,
{
...e,
weekDaysNameColor: e.weekDaysNameColor,
weekDaysType: e.weekDaysType,
locale: e.locale,
weekStartDay: e.weekStartDay
}
),
/* @__PURE__ */ t(
g,
{
...e,
month: r,
year: d,
nextMonth: !0
}
)
]
}
)
] })
]
}
);
};
export {
$ as C
};