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