@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
63 lines (62 loc) • 3.13 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { format, isSameDay } from "date-fns";
import { useRef } from "react";
import { getMonthDaysByWeeks, getWeekDays } from "../utils.js";
import { CalendarDayPickerDay } from "./CalendarDayPickerDay.js";
function isDisabled(day, firstAvailableDate, lastAvailableDate) {
return day.getTime() < firstAvailableDate.getTime() || null != lastAvailableDate && day.getTime() > lastAvailableDate.getTime();
}
function areEqualDays(date1, date2) {
return null != date1 && null != date2 && isSameDay(date1, date2);
}
const weekdays = getWeekDays();
const today = new Date().setHours(0, 0, 0, 0);
function CalendarDayPickerMonth({ month, selectedDate, onSelectDate, onChangeDate, onLeaveDate, firstAvailableDate, lastAvailableDate, locale }) {
const byWeeks = useRef(getMonthDaysByWeeks(month));
const onMouseEnter = (day, disabled)=>{
onChangeDate(day, disabled);
};
const onSelect = (targetDate)=>{
if (!areEqualDays(targetDate, selectedDate)) onSelectDate(targetDate);
};
return /*#__PURE__*/ jsxs("div", {
className: "cobalt-CalendarDayPicker__month",
"data-month": format(month, "yyyy-MM"),
children: [
/*#__PURE__*/ jsx("div", {
className: "cobalt-CalendarDayPicker__month-header",
children: format(month, "MMMM yyyy", {
locale
})
}),
/*#__PURE__*/ jsxs("div", {
className: "cobalt-CalendarDayPicker__month__weeks-container",
children: [
/*#__PURE__*/ jsx("div", {
className: "cobalt-CalendarDayPicker__month__week-header",
children: weekdays.map((weekday)=>/*#__PURE__*/ jsx("div", {
className: "cobalt-CalendarDayPicker__month__day-header",
children: format(weekday, "iiiiii", {
locale
})
}, weekday.getTime()))
}),
byWeeks.current.map((week, index)=>/*#__PURE__*/ jsx("div", {
className: "cobalt-CalendarDayPicker__month__week",
children: week.map((day)=>/*#__PURE__*/ jsx(CalendarDayPickerDay, {
onMouseEnter: onMouseEnter,
onMouseLeave: onLeaveDate,
date: day,
onSelect: onSelect,
isToday: isSameDay(day, today),
disabled: isDisabled(day, firstAvailableDate, lastAvailableDate),
selected: areEqualDays(day, selectedDate)
}, day.getTime()))
}, `week-${index}-${week.map((day)=>day.getTime()).join("-")}`))
]
})
]
});
}
export { CalendarDayPickerMonth };
//# sourceMappingURL=CalendarDayPickerMonth.js.map