@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
36 lines (33 loc) • 2.32 kB
JavaScript
import React, { useRef } from 'react';
import { CalendarDayPickerDay as MemoizedComponent } from './CalendarDayPickerDay.js';
import { format, isSameDay } from 'date-fns';
import { getWeekDays, getMonthDaysByWeeks } from '../utils.js';
function isDisabled(day, firstAvailableDate, lastAvailableDate) {
return (day.getTime() < firstAvailableDate.getTime() ||
(lastAvailableDate != null && day.getTime() > lastAvailableDate.getTime()));
}
function areEqualDays(date1, date2) {
return date1 != null && date2 != null && 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 (React.createElement("div", { className: "cobalt-CalendarDayPicker__month", "data-month": format(month, "yyyy-MM") },
React.createElement("div", { className: "cobalt-CalendarDayPicker__month-header" }, format(month, "MMMM yyyy", { locale })),
React.createElement("div", { className: "cobalt-CalendarDayPicker__month__weeks-container" },
React.createElement("div", { className: "cobalt-CalendarDayPicker__month__week-header" }, weekdays.map((weekday) => (React.createElement("div", { key: weekday.getTime(), className: "cobalt-CalendarDayPicker__month__day-header" }, format(weekday, "iiiiii", { locale }))))),
byWeeks.current.map((week, index) => (React.createElement("div", { key: index, className: "cobalt-CalendarDayPicker__month__week" }, week.map((day) => {
return (React.createElement(MemoizedComponent, { key: day.getTime(), onMouseEnter: onMouseEnter, onMouseLeave: onLeaveDate, date: day, onSelect: onSelect, isToday: isSameDay(day, today), disabled: isDisabled(day, firstAvailableDate, lastAvailableDate), selected: areEqualDays(day, selectedDate) }));
})))))));
}
export { CalendarDayPickerMonth };
//# sourceMappingURL=CalendarDayPickerMonth.js.map