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

Opinionated design system for Drivy's projects.

import React, { useRef, useState, useEffect } from 'react';
import { CalendarRangePickerMonth } from './CalendarRangePickerMonth.js';
import cx from 'classnames';
import { Hint } from '../../Form/Hint.js';
import addMonths from 'date-fns/addMonths';
import startOfDay from 'date-fns/startOfDay';

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) : undefined,
        endDate: endDate ? startOfDay(endDate) : undefined,
    });
    useEffect(() => {
        if (isFirstRender.current) {
            isFirstRender.current = false;
            return;
        }
        setRangeDates({
            startDate: startDate ? startOfDay(startDate) : undefined,
            endDate: endDate ? startOfDay(endDate) : undefined,
        });
    }, [startDate, endDate]);
    useEffect(() => {
        if (rangeDates.startDate && !rangeDates.endDate) {
            setRangeDates({ ...rangeDates, endDate: rangeDates.startDate });
        }
    }, [isEditingEndDate]);
    useEffect(() => {
        if (rangeDates.endDate && !rangeDates.startDate) {
            setRangeDates({ ...rangeDates, startDate: rangeDates.endDate });
        }
    }, [isEditingStartDate]);
    const handleSelectDate = (date, isDateOutOfRange) => {
        if (isDateOutOfRange && isEditingEndDate)
            return;
        onSelectDate && onSelectDate(date, !!isDateOutOfRange);
    };
    const handleChangeDate = (date, status) => {
        const processChange = onChangeDate && (isEditingStartDate || isEditingEndDate)
            ? onChangeDate(date, status) !== false
            : 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 (React.createElement("div", { className: cx("cobalt-CalendarRangePicker", {
            "cobalt-CalendarRangePicker--isEditing": isEditingStartDate || isEditingEndDate,
        }) },
        React.createElement("div", { className: "cobalt-CalendarRangePicker__months-container" }, months.map((monthDate) => (React.createElement(CalendarRangePickerMonth, { key: monthDate.getTime(), 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 })))),
        React.createElement("div", { className: cx("cobalt-CalendarRangePicker__message", {
                "cobalt-CalendarRangePicker__message--show": !!hint,
            }) }, hint && React.createElement(Hint, { status: hint.status }, hint.html))));
}

export { CalendarRangePicker };
//# sourceMappingURL=CalendarRangePicker.js.map