@drivy/cobalt/components/Calendar/CalendarDayPicker/CalendarDayPickerMonth.js

Opinionated design system for Drivy's projects.

import { jsxs, jsx } from 'react/jsx-runtime';
import { format, isSameDay } from 'date-fns';
import { useRef } from 'react';
import { getWeekDays, getMonthDaysByWeeks } from '../utils.js';
import { CalendarDayPickerDay as MemoizedComponent } from './CalendarDayPickerDay.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 (jsxs("div", { className: "cobalt-CalendarDayPicker__month", "data-month": format(month, "yyyy-MM"), children: [jsx("div", { className: "cobalt-CalendarDayPicker__month-header", children: format(month, "MMMM yyyy", { locale }) }), jsxs("div", { className: "cobalt-CalendarDayPicker__month__weeks-container", children: [jsx("div", { className: "cobalt-CalendarDayPicker__month__week-header", children: weekdays.map((weekday) => (jsx("div", { className: "cobalt-CalendarDayPicker__month__day-header", children: format(weekday, "iiiiii", { locale }) }, weekday.getTime()))) }), byWeeks.current.map((week, index) => (jsx("div", { className: "cobalt-CalendarDayPicker__month__week", children: week.map((day) => {
                            return (jsx(MemoizedComponent, { 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