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

Opinionated design system for Drivy's projects.

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

function CalendarDayPicker({ firstMonthDate = new Date(), numberOfMonths = 1, hint, firstAvailableDate = new Date(), lastAvailableDate, selectedDate, onChangeDate, onLeaveDate, onSelectDate, locale, }) {
    const isFirstRender = useRef(true);
    firstMonthDate.setHours(0, 0, 0, 0);
    firstAvailableDate.setHours(0, 0, 0, 0);
    const [internalSelectedDate, setInternalSelectedDate] = useState(selectedDate != null ? selectedDate : null);
    useEffect(() => {
        if (isFirstRender.current) {
            isFirstRender.current = false;
            return;
        }
        selectedDate !== internalSelectedDate &&
            setInternalSelectedDate(selectedDate);
    }, [selectedDate]);
    const handleSelectDate = (date) => {
        setInternalSelectedDate(date);
        onSelectDate && onSelectDate(date);
    };
    const handleChangeDate = (date, disabled) => {
        const processChange = onChangeDate
            ? onChangeDate(date, disabled) !== false
            : true;
        if (!processChange || disabled)
            return;
    };
    const months = [firstMonthDate];
    for (let i = 0; i < numberOfMonths - 1; i++) {
        months.push(addMonths(months[months.length - 1], 1));
    }
    return (React.createElement("div", { className: "cobalt-CalendarDayPicker" },
        React.createElement("div", { className: "cobalt-CalendarDayPicker__months-container" }, months.map((monthDate) => (React.createElement(CalendarDayPickerMonth, { key: monthDate.getTime(), month: monthDate, selectedDate: internalSelectedDate, onSelectDate: handleSelectDate, onChangeDate: handleChangeDate, onLeaveDate: onLeaveDate, firstAvailableDate: firstAvailableDate, lastAvailableDate: lastAvailableDate, locale: locale })))),
        React.createElement("div", { className: cx("cobalt-CalendarDayPicker__message", {
                "cobalt-CalendarDayPicker__message--show": !!hint,
            }) }, hint && React.createElement(Hint, { status: hint.status }, hint.html))));
}

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