@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
37 lines (34 loc) • 2.23 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import cx from 'classnames';
import addMonths from 'date-fns/addMonths';
import { useState, useEffect } from 'react';
import { Hint } from '../../Form/Hint.js';
import { CalendarDayPickerMonth } from './CalendarDayPickerMonth.js';
function CalendarDayPicker({ firstMonthDate = new Date(), numberOfMonths = 1, hint, firstAvailableDate = new Date(), lastAvailableDate, selectedDate, onChangeDate, onLeaveDate, onSelectDate, locale, }) {
firstMonthDate.setHours(0, 0, 0, 0);
firstAvailableDate.setHours(0, 0, 0, 0);
const [internalSelectedDate, setInternalSelectedDate] = useState(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null);
useEffect(() => {
setInternalSelectedDate(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null);
}, [selectedDate]);
const handleSelectDate = (date) => {
setInternalSelectedDate(date);
onSelectDate === null || onSelectDate === void 0 ? void 0 : 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 (jsxs("div", { className: "cobalt-CalendarDayPicker", children: [jsx("div", { className: "cobalt-CalendarDayPicker__months-container", children: months.map((monthDate) => (jsx(CalendarDayPickerMonth, { month: monthDate, selectedDate: internalSelectedDate, onSelectDate: handleSelectDate, onChangeDate: handleChangeDate, onLeaveDate: onLeaveDate, firstAvailableDate: firstAvailableDate, lastAvailableDate: lastAvailableDate, locale: locale }, monthDate.getTime()))) }), jsx("div", { className: cx("cobalt-CalendarDayPicker__message", {
"cobalt-CalendarDayPicker__message--show": !!hint,
}), children: hint && jsx(Hint, { status: hint.status, children: hint.html }) })] }));
}
export { CalendarDayPicker };
//# sourceMappingURL=CalendarDayPicker.js.map