@drivy/cobalt/components/Calendar/CalendarRangePicker/CalendarRangePicker.js

Opinionated design system for Drivy's projects.

import { jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import addMonths from "date-fns/addMonths";
import startOfDay from "date-fns/startOfDay";
import { useEffect, useRef, useState } from "react";
import { Hint } from "../../Form/Hint.js";
import { CalendarRangePickerMonth } from "./CalendarRangePickerMonth.js";
function CalendarRangePicker({ rangeConstraints, firstMonthDate = new Date(), numberOfMonths = 1, hint, firstAvailableDate = new Date(), lastAvailableDate, isEditingStartDate, isEditingEndDate, startDate, endDate, onChangeDate, onLeaveDate, onSelectDate, isDayDisabledFn, hasDayNotificationFn, isDayInvalidForSelectionFn, dayHoverTooltipFn, isSundayFirstDayOfWeek, locale }) {
    const isFirstRender = useRef(true);
    firstMonthDate.setHours(0, 0, 0, 0);
    firstAvailableDate.setHours(0, 0, 0, 0);
    const [rangeDates, setRangeDates] = useState({
        startDate: startDate ? startOfDay(startDate) : void 0,
        endDate: endDate ? startOfDay(endDate) : void 0
    });
    useEffect(()=>{
        if (isFirstRender.current) {
            isFirstRender.current = false;
            return;
        }
        setRangeDates({
            startDate: startDate ? startOfDay(startDate) : void 0,
            endDate: endDate ? startOfDay(endDate) : void 0
        });
    }, [
        startDate,
        endDate
    ]);
    useEffect(()=>{
        if (!isEditingEndDate) return;
        if (rangeDates.startDate && !rangeDates.endDate) setRangeDates({
            ...rangeDates,
            endDate: rangeDates.startDate
        });
    }, [
        isEditingEndDate,
        rangeDates
    ]);
    useEffect(()=>{
        if (!isEditingStartDate) return;
        if (rangeDates.endDate && !rangeDates.startDate) setRangeDates({
            ...rangeDates,
            startDate: rangeDates.endDate
        });
    }, [
        isEditingStartDate,
        rangeDates
    ]);
    const handleSelectDate = (date, isDateOutOfRange)=>{
        if (isDateOutOfRange && isEditingEndDate) return;
        onSelectDate?.(date, !!isDateOutOfRange);
    };
    const handleChangeDate = (date, status)=>{
        const processChange = onChangeDate && (isEditingStartDate || isEditingEndDate) ? false !== onChangeDate(date, status) : true;
        if (!processChange || status.isDisabled) return;
        if (isEditingStartDate) setRangeDates((prev)=>({
                ...prev,
                startDate: date
            }));
        else if (isEditingEndDate) setRangeDates((prev)=>({
                ...prev,
                endDate: date
            }));
    };
    const months = [
        firstMonthDate
    ];
    for(let i = 0; i < numberOfMonths - 1; i++)months.push(addMonths(months[months.length - 1], 1));
    return /*#__PURE__*/ jsxs("div", {
        className: classnames("cobalt-CalendarRangePicker", {
            "cobalt-CalendarRangePicker--isEditing": isEditingStartDate || isEditingEndDate
        }),
        children: [
            /*#__PURE__*/ jsx("div", {
                className: "cobalt-CalendarRangePicker__months-container",
                children: months.map((monthDate)=>/*#__PURE__*/ jsx(CalendarRangePickerMonth, {
                        date: monthDate,
                        startDate: rangeDates.startDate,
                        endDate: rangeDates.endDate,
                        onSelectDate: handleSelectDate,
                        onChangeDate: handleChangeDate,
                        onLeaveDate: onLeaveDate,
                        isEditingStartDate: isEditingStartDate,
                        isEditingEndDate: isEditingEndDate,
                        rangeConstraints: rangeConstraints,
                        firstAvailableDate: firstAvailableDate,
                        lastAvailableDate: lastAvailableDate,
                        isDayDisabledFn: isDayDisabledFn,
                        hasDayNotificationFn: hasDayNotificationFn,
                        isDayInvalidForSelectionFn: isDayInvalidForSelectionFn,
                        isSundayFirstDayOfWeek: isSundayFirstDayOfWeek,
                        dayHoverTooltipFn: dayHoverTooltipFn,
                        locale: locale
                    }, monthDate.getTime()))
            }),
            /*#__PURE__*/ jsx("div", {
                className: classnames("cobalt-CalendarRangePicker__message", {
                    "cobalt-CalendarRangePicker__message--show": !!hint
                }),
                children: hint && /*#__PURE__*/ jsx(Hint, {
                    status: hint.status,
                    children: hint.html
                })
            })
        ]
    });
}
export { CalendarRangePicker };

//# sourceMappingURL=CalendarRangePicker.js.map