@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
64 lines (63 loc) • 2.89 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import { differenceInCalendarWeeks, endOfMonth, format, getDaysInMonth, getISODay, isPast, isToday, setDate } from "date-fns";
import { useCallback, useMemo } from "react";
const CalendarViewMonth = ({ monthName, monthStart, statusByDate = {}, isSundayFirstDayOfWeek = false })=>{
const getMonthByWeek = useCallback(()=>{
const daysInMonth = getDaysInMonth(monthStart);
const weeksInMonth = differenceInCalendarWeeks(endOfMonth(monthStart), monthStart, {
weekStartsOn: isSundayFirstDayOfWeek ? 0 : 1
}) + 1;
const weekDay = isSundayFirstDayOfWeek ? getISODay(monthStart) % 7 + 1 : getISODay(monthStart);
const month = [];
let cursor = 0;
let date = 0;
for(let week = 0; week < weeksInMonth; week++){
month[week] = [];
for(let day = 0; day < 7; day++){
month[week][day] = {
date: null
};
if (cursor >= weekDay - 1 && date < daysInMonth) {
month[week][day].date = ++date;
const currentDate = setDate(monthStart, date);
month[week][day].status = isPast(currentDate) && !isToday(currentDate) ? "past" : statusByDate[format(currentDate, "yyyy-MM-dd")];
}
cursor++;
}
}
return month;
}, [
monthStart,
isSundayFirstDayOfWeek,
statusByDate
]);
const monthByWeek = useMemo(()=>getMonthByWeek(), [
getMonthByWeek
]);
return /*#__PURE__*/ jsxs("div", {
className: "cobalt-CalendarView__month",
children: [
/*#__PURE__*/ jsx("div", {
className: "cobalt-CalendarView__monthName",
children: monthName
}),
/*#__PURE__*/ jsx("div", {
className: "c-flex c-flex-col c-gap-2xs",
children: monthByWeek.map((week, weekIndex)=>/*#__PURE__*/ jsx("div", {
className: "cobalt-CalendarView__week",
children: week.map((day, dayIndex)=>/*#__PURE__*/ jsx("div", {
className: classnames("cobalt-CalendarView__day", {
[`cobalt-CalendarView__day--${day.status}`]: day.status
}),
children: day.date
}, `day-${weekIndex}-${dayIndex + 1}-${day.date}`))
}, `week-${weekIndex}-${week.map((day)=>day.date).join("-")}`))
})
]
});
};
CalendarViewMonth.displayName = "CalendarViewMonth";
const CalendarView_CalendarViewMonth = CalendarViewMonth;
export default CalendarView_CalendarViewMonth;
//# sourceMappingURL=CalendarViewMonth.js.map