@qite/tide-booking-component 1.4.122 → 1.4.124

package/src/qsm/components/date-range-picker/calendar.tsx

@@ -1,211 +1,211 @@
-import React from 'react';
-
-// date-fns
-import { addWeeks, eachDayOfInterval, endOfMonth, endOfWeek, format, getMonth, getYear, isSameMonth, startOfDay, startOfMonth, startOfWeek } from 'date-fns';
-import { Locale } from 'date-fns';
-import { enUS } from 'date-fns/locale';
-import { nl } from 'date-fns/locale';
-import { fr } from 'date-fns/locale';
-
-// redux
-import { useSelector } from 'react-redux';
-import { QSMRootState } from '../../store/qsm-store';
-
-// internal component
-import CalendarDay from './calendar-day';
-
-// Props interface
-interface CalendarProps {
-  year?: number;
-  month?: number;
-  hasPreviousButton?: boolean;
-  hasNextButton?: boolean;
-  hasFixedHeight?: boolean;
-  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  isStartDate?: (date: Date) => boolean;
-  isEndDate?: (date: Date) => boolean;
-  isInRange?: (date: Date) => boolean;
-  onDayClick?: (date: Date) => void;
-  onDayMouseOver?: (date: Date) => void;
-  onNextClick?: (year: number, month: number) => void;
-  onPreviousClick?: (year: number, month: number) => void;
-  locale?: Locale;
-  extraClassNamesFunction?: (date: Date) => string[];
-  isMobile?: boolean;
-  minDate?: Date;
-  maxDate?: Date;
-}
-
-const Calendar: React.FC<CalendarProps> = ({
-  year = getYear(new Date()),
-  month = getMonth(new Date()),
-  hasPreviousButton = true,
-  hasNextButton = true,
-  hasFixedHeight = true,
-  weekStartsOn = 1,
-  isStartDate,
-  isEndDate,
-  isInRange,
-  onDayClick,
-  onDayMouseOver,
-  onNextClick,
-  onPreviousClick,
-  extraClassNamesFunction,
-  isMobile = false,
-  minDate,
-  maxDate
-}) => {
-  const language = useSelector((state: QSMRootState) => state.qsm.language);
-  const languageCode = language.split('-')[0];
-
-  const localeMap: Record<string, Locale> = {
-    en: enUS,
-    nl: nl,
-    fr: fr
-  };
-  const currentLocale = localeMap[languageCode] || enUS;
-
-  // Date range setup
-  const focusDate = new Date(year, month);
-  const firstDay = startOfWeek(startOfMonth(focusDate), {
-    weekStartsOn
-  });
-  const lastDay = hasFixedHeight ? endOfWeek(addWeeks(firstDay, 5), { weekStartsOn }) : endOfWeek(endOfMonth(focusDate), { weekStartsOn });
-
-  const calendarDays = eachDayOfInterval({
-    start: firstDay,
-    end: lastDay
-  });
-
-  // Event handlers
-  const handleDayClick = (day: Date) => onDayClick?.(day);
-  const handleDayMouseOver = (day: Date) => onDayMouseOver?.(day);
-
-  const handlePreviousClick = () => {
-    const prevMonth = (month - 1 + 12) % 12;
-    const prevYear = prevMonth > month ? year - 1 : year;
-    onPreviousClick?.(prevYear, prevMonth);
-  };
-
-  const handleNextClick = () => {
-    const baseMonth = isMobile ? month + 2 : month + 1;
-    const nextMonth = baseMonth % 12;
-    const nextYear = nextMonth < month ? year + 1 : year;
-    onNextClick?.(nextYear, nextMonth);
-  };
-
-  const isBeforeMin = (date: Date) => (minDate ? startOfDay(date) < startOfDay(minDate) : false);
-  const isAfterMax = (date: Date) => (maxDate ? startOfDay(date) > startOfDay(maxDate) : false);
-  const isOutOfBounds = (date: Date) => isBeforeMin(date) || isAfterMax(date);
-
-  // Build weeks for rendering
-  const weekRows = [];
-  for (let i = 0; i < calendarDays.length; i += 7) {
-    weekRows.push(calendarDays.slice(i, i + 7));
-  }
-
-  return (
-    <div className="calendar">
-      {/* Header */}
-      <div className="calendar__header">
-        <div className="calendar__pager">
-          {hasPreviousButton && (
-            <svg
-              onClick={handlePreviousClick}
-              className="calendar__pager-icon"
-              width={16}
-              height={10.667}
-              id="datepicker-arrow-left-icon"
-              viewBox="0 0 16 10.667">
-              <path
-                id="Path_60"
-                data-name="Path 60"
-                d="M202.667-661.333l-1.417-1.417,2.917-2.917H192v-2h12.167l-2.917-2.917L202.667-672,208-666.667Z"
-                transform="translate(208 -661.333) rotate(180)"
-                fill="#abd5d9"
-              />
-            </svg>
-          )}
-
-          <div className="calendar__current-month">
-            {format(focusDate, 'MMMM yyyy', {
-              locale: currentLocale
-            }).replace(/^(.)(.*)$/, (_, a, b) => `${a.toUpperCase()}${b}`)}
-          </div>
-
-          {hasNextButton && (
-            <svg
-              onClick={handleNextClick}
-              className="calendar__pager-icon calendar__pager-icon--right"
-              width={16}
-              height={10.667}
-              id="datepicker-arrow-left-icon"
-              viewBox="0 0 16 10.667">
-              <path
-                id="Path_60"
-                data-name="Path 60"
-                d="M202.667-661.333l-1.417-1.417,2.917-2.917H192v-2h12.167l-2.917-2.917L202.667-672,208-666.667Z"
-                transform="translate(208 -661.333) rotate(180)"
-                fill="#abd5d9"
-              />
-            </svg>
-          )}
-        </div>
-
-        {/* Week day labels */}
-        <div className="calendar__day-labels">
-          {[0, 1, 2, 3, 4, 5, 6].map((i) => (
-            <div className="calendar__day-label" key={`label-${i}`}>
-              {format(calendarDays[i], 'eee', {
-                locale: currentLocale
-              })
-                .slice(0, 2)
-                .replace(/^(.)(.)$/, (_, a, b) => `${a.toUpperCase()}${b.toLowerCase()}`)}
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Calendar grid */}
-      <div className="calendar__body">
-        {weekRows.map((week, index) => (
-          <div className="calendar__week" key={`week-${index}`}>
-            {week.map((day) => {
-              const isDisabled = isOutOfBounds(day);
-
-              const isSelected = isStartDate?.(day) || isEndDate?.(day);
-              const inRange = isInRange?.(day) ?? false;
-              const isOutsideMonth = !isSameMonth(day, focusDate);
-
-              let extraClassNames: string[] = [];
-              if (inRange) extraClassNames.push('calendar__day--range');
-              if (isSelected) extraClassNames.push('calendar__day--selected');
-
-              if (extraClassNamesFunction) {
-                const additional = extraClassNamesFunction(day);
-                if (Array.isArray(additional)) {
-                  extraClassNames = extraClassNames.concat(additional);
-                }
-              }
-
-              return (
-                <CalendarDay
-                  key={day.toISOString()}
-                  day={day}
-                  isSelected={isSelected || false}
-                  isDisabled={isDisabled}
-                  isOutsideMonth={isOutsideMonth}
-                  extraClassNames={extraClassNames}
-                  onClick={handleDayClick}
-                  onMouseOver={handleDayMouseOver}
-                />
-              );
-            })}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default Calendar;
+import React from 'react';
+
+// date-fns
+import { addWeeks, eachDayOfInterval, endOfMonth, endOfWeek, format, getMonth, getYear, isSameMonth, startOfDay, startOfMonth, startOfWeek } from 'date-fns';
+import { Locale } from 'date-fns';
+import { enUS } from 'date-fns/locale';
+import { nl } from 'date-fns/locale';
+import { fr } from 'date-fns/locale';
+
+// redux
+import { useSelector } from 'react-redux';
+import { QSMRootState } from '../../store/qsm-store';
+
+// internal component
+import CalendarDay from './calendar-day';
+
+// Props interface
+interface CalendarProps {
+  year?: number;
+  month?: number;
+  hasPreviousButton?: boolean;
+  hasNextButton?: boolean;
+  hasFixedHeight?: boolean;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  isStartDate?: (date: Date) => boolean;
+  isEndDate?: (date: Date) => boolean;
+  isInRange?: (date: Date) => boolean;
+  onDayClick?: (date: Date) => void;
+  onDayMouseOver?: (date: Date) => void;
+  onNextClick?: (year: number, month: number) => void;
+  onPreviousClick?: (year: number, month: number) => void;
+  locale?: Locale;
+  extraClassNamesFunction?: (date: Date) => string[];
+  isMobile?: boolean;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+const Calendar: React.FC<CalendarProps> = ({
+  year = getYear(new Date()),
+  month = getMonth(new Date()),
+  hasPreviousButton = true,
+  hasNextButton = true,
+  hasFixedHeight = true,
+  weekStartsOn = 1,
+  isStartDate,
+  isEndDate,
+  isInRange,
+  onDayClick,
+  onDayMouseOver,
+  onNextClick,
+  onPreviousClick,
+  extraClassNamesFunction,
+  isMobile = false,
+  minDate,
+  maxDate
+}) => {
+  const language = useSelector((state: QSMRootState) => state.qsm.language);
+  const languageCode = language.split('-')[0];
+
+  const localeMap: Record<string, Locale> = {
+    en: enUS,
+    nl: nl,
+    fr: fr
+  };
+  const currentLocale = localeMap[languageCode] || enUS;
+
+  // Date range setup
+  const focusDate = new Date(year, month);
+  const firstDay = startOfWeek(startOfMonth(focusDate), {
+    weekStartsOn
+  });
+  const lastDay = hasFixedHeight ? endOfWeek(addWeeks(firstDay, 5), { weekStartsOn }) : endOfWeek(endOfMonth(focusDate), { weekStartsOn });
+
+  const calendarDays = eachDayOfInterval({
+    start: firstDay,
+    end: lastDay
+  });
+
+  // Event handlers
+  const handleDayClick = (day: Date) => onDayClick?.(day);
+  const handleDayMouseOver = (day: Date) => onDayMouseOver?.(day);
+
+  const handlePreviousClick = () => {
+    const prevMonth = (month - 1 + 12) % 12;
+    const prevYear = prevMonth > month ? year - 1 : year;
+    onPreviousClick?.(prevYear, prevMonth);
+  };
+
+  const handleNextClick = () => {
+    const baseMonth = isMobile ? month + 2 : month + 1;
+    const nextMonth = baseMonth % 12;
+    const nextYear = nextMonth < month ? year + 1 : year;
+    onNextClick?.(nextYear, nextMonth);
+  };
+
+  const isBeforeMin = (date: Date) => (minDate ? startOfDay(date) < startOfDay(minDate) : false);
+  const isAfterMax = (date: Date) => (maxDate ? startOfDay(date) > startOfDay(maxDate) : false);
+  const isOutOfBounds = (date: Date) => isBeforeMin(date) || isAfterMax(date);
+
+  // Build weeks for rendering
+  const weekRows = [];
+  for (let i = 0; i < calendarDays.length; i += 7) {
+    weekRows.push(calendarDays.slice(i, i + 7));
+  }
+
+  return (
+    <div className="calendar">
+      {/* Header */}
+      <div className="calendar__header">
+        <div className="calendar__pager">
+          {hasPreviousButton && (
+            <svg
+              onClick={handlePreviousClick}
+              className="calendar__pager-icon"
+              width={16}
+              height={10.667}
+              id="datepicker-arrow-left-icon"
+              viewBox="0 0 16 10.667">
+              <path
+                id="Path_60"
+                data-name="Path 60"
+                d="M202.667-661.333l-1.417-1.417,2.917-2.917H192v-2h12.167l-2.917-2.917L202.667-672,208-666.667Z"
+                transform="translate(208 -661.333) rotate(180)"
+                fill="#abd5d9"
+              />
+            </svg>
+          )}
+
+          <div className="calendar__current-month">
+            {format(focusDate, 'MMMM yyyy', {
+              locale: currentLocale
+            }).replace(/^(.)(.*)$/, (_, a, b) => `${a.toUpperCase()}${b}`)}
+          </div>
+
+          {hasNextButton && (
+            <svg
+              onClick={handleNextClick}
+              className="calendar__pager-icon calendar__pager-icon--right"
+              width={16}
+              height={10.667}
+              id="datepicker-arrow-left-icon"
+              viewBox="0 0 16 10.667">
+              <path
+                id="Path_60"
+                data-name="Path 60"
+                d="M202.667-661.333l-1.417-1.417,2.917-2.917H192v-2h12.167l-2.917-2.917L202.667-672,208-666.667Z"
+                transform="translate(208 -661.333) rotate(180)"
+                fill="#abd5d9"
+              />
+            </svg>
+          )}
+        </div>
+
+        {/* Week day labels */}
+        <div className="calendar__day-labels">
+          {[0, 1, 2, 3, 4, 5, 6].map((i) => (
+            <div className="calendar__day-label" key={`label-${i}`}>
+              {format(calendarDays[i], 'eee', {
+                locale: currentLocale
+              })
+                .slice(0, 2)
+                .replace(/^(.)(.)$/, (_, a, b) => `${a.toUpperCase()}${b.toLowerCase()}`)}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Calendar grid */}
+      <div className="calendar__body">
+        {weekRows.map((week, index) => (
+          <div className="calendar__week" key={`week-${index}`}>
+            {week.map((day) => {
+              const isDisabled = isOutOfBounds(day);
+
+              const isSelected = isStartDate?.(day) || isEndDate?.(day);
+              const inRange = isInRange?.(day) ?? false;
+              const isOutsideMonth = !isSameMonth(day, focusDate);
+
+              let extraClassNames: string[] = [];
+              if (inRange) extraClassNames.push('calendar__day--range');
+              if (isSelected) extraClassNames.push('calendar__day--selected');
+
+              if (extraClassNamesFunction) {
+                const additional = extraClassNamesFunction(day);
+                if (Array.isArray(additional)) {
+                  extraClassNames = extraClassNames.concat(additional);
+                }
+              }
+
+              return (
+                <CalendarDay
+                  key={day.toISOString()}
+                  day={day}
+                  isSelected={isSelected || false}
+                  isDisabled={isDisabled}
+                  isOutsideMonth={isOutsideMonth}
+                  extraClassNames={extraClassNames}
+                  onClick={handleDayClick}
+                  onMouseOver={handleDayMouseOver}
+                />
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Calendar;