mobile-react-infinite-calendar/dist/components/MonthRow.js

A mobile-optimized infinite scroll calendar component for React

import { jsx as _jsx } from "react/jsx-runtime";
import { memo, useMemo } from 'react';
import { format, isSameMonth } from 'date-fns';
import { cn } from '../utils/cn';
import { DayCell } from './DayCell';
const MonthRow = memo(function MonthRow({ monthData, monthIndex, activeMonth, classNames, onDayClick }) {
    // 월별 클래스네임 계산 (메모이제이션)
    const monthClassName = useMemo(() => cn("transition-all duration-300", !activeMonth || !monthData.month ||
        !isSameMonth(monthData.month, activeMonth) && "opacity-50 grayscale-[0.5]"), [activeMonth, monthData.month]);
    return (_jsx("div", { "data-month-index": monthIndex, className: monthClassName, children: monthData.weeks.map((week, weekIndex) => (_jsx("div", { className: "grid grid-cols-7", children: week.map((day, dayIndex) => {
                // 날짜별 데이터 계산 (직접 계산)
                const dateKey = day ? format(day, 'yyyy-MM-dd') : '';
                const dayEvents = dateKey ? (monthData.eventsByDate[dateKey] || []) : [];
                const dayHolidays = dateKey ? (monthData.holidaysByDate[dateKey] || []) : [];
                return (_jsx(DayCell, { day: day, activeMonth: activeMonth, dayEvents: dayEvents, dayHolidays: dayHolidays, classNames: classNames, onDayClick: onDayClick }, day ? day.toISOString() : `empty-${weekIndex}-${dayIndex}`));
            }) }, `${monthData.month.toISOString()}-week-${weekIndex}`))) }, monthData.month.toISOString()));
});
MonthRow.displayName = 'MonthRow';
export { MonthRow };