mobile-react-infinite-calendar
Version:
A mobile-optimized infinite scroll calendar component for React
28 lines (27 loc) • 2.55 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useMemo, useCallback } from 'react';
import { format } from 'date-fns';
import { cn } from '../utils/cn';
import { getDateFnsLocale, getTodayButtonText, isKoreanLocale } from '../utils/localeUtils';
const CalendarHeader = memo(function CalendarHeader({ activeMonth, locale, headerOptions, classNames, isCurrentMonthVisible, onTodayClick, onDatePickerClick }) {
// 로케일 처리
const currentLocale = getDateFnsLocale(locale);
const todayButtonText = getTodayButtonText(locale);
// 날짜 포맷 함수 (메모이제이션)
const formatMonthYear = useCallback((date) => {
if (isKoreanLocale(locale)) {
return format(date, 'yyyy년 MM월');
}
return format(date, 'MMMM yyyy', { locale: currentLocale });
}, [locale, currentLocale]);
// 클래스네임들 (메모이제이션)
const headerClassName = useMemo(() => cn("flex-shrink-0", classNames === null || classNames === void 0 ? void 0 : classNames.header), [classNames === null || classNames === void 0 ? void 0 : classNames.header]);
const monthTitleClassName = useMemo(() => cn("text-lg font-semibold transition-all duration-300 cursor-pointer hover:text-blue-600", !isCurrentMonthVisible && "text-orange-600", classNames === null || classNames === void 0 ? void 0 : classNames.monthTitle), [isCurrentMonthVisible, classNames === null || classNames === void 0 ? void 0 : classNames.monthTitle]);
const todayButtonClassName = useMemo(() => cn("text-sm text-gray-600 hover:text-blue-600 transition-colors flex items-center gap-1 touch-manipulation px-2 py-1", classNames === null || classNames === void 0 ? void 0 : classNames.todayButton), [classNames === null || classNames === void 0 ? void 0 : classNames.todayButton]);
if (!headerOptions.show) {
return null;
}
return (_jsx("div", { className: headerClassName, children: _jsxs("div", { className: "flex items-center justify-between", children: [headerOptions.monthTitle && (_jsx("h2", { className: monthTitleClassName, onClick: headerOptions.datePicker ? onDatePickerClick : undefined, children: formatMonthYear(activeMonth) })), !headerOptions.monthTitle && _jsx("div", {}), headerOptions.todayButton && (_jsxs("button", { onClick: onTodayClick, className: todayButtonClassName, style: { WebkitTapHighlightColor: 'transparent' }, children: ["\uD83C\uDFAF", todayButtonText] }))] }) }));
});
CalendarHeader.displayName = 'CalendarHeader';
export { CalendarHeader };