@qite/tide-booking-component 1.2.5 → 1.3.0

package/src/booking-product/components/date-range-picker/calendar.tsx

@@ -1,178 +1,178 @@
-import {
-  addWeeks,
-  eachDayOfInterval,
-  endOfMonth,
-  endOfWeek,
-  format,
-  getISODay,
-  getISOWeek,
-  getMonth,
-  getYear,
-  isSameMonth,
-  startOfMonth,
-  startOfWeek,
-} from "date-fns";
-import { chunk, isFunction, range } from "lodash";
-import React, { useContext } from "react";
-import { buildClassName } from "../../../shared/utils/class-util";
-import { getLocale } from "../../../shared/utils/localization-util";
-import SettingsContext from "../../settings-context";
-import CalendarDay from "./calendar-day";
-import Icon from "../icon";
-
-interface CalendarProps {
-  year?: number;
-  month?: number;
-  hasPreviousButton?: boolean;
-  hasNextButton?: boolean;
-  hasFixedHeight?: boolean;
-  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  disabledDaysFunction?: (date: Date) => boolean;
-  selectedDaysFunction?: (date: Date) => boolean;
-  extraClassNamesFunction?: (date: Date) => string[];
-  dayContentFunction?: (date: Date) => JSX.Element | null | undefined;
-  onDayClick?: (date: Date) => void;
-  onDayMouseOver?: (date: Date) => void;
-  onNextClick?: (year: number, month: number) => void;
-  onPreviousClick?: (year: number, month: number) => void;
-}
-
-const Calendar: React.FC<CalendarProps> = ({
-  year = getYear(new Date()),
-  month = getMonth(new Date()),
-  hasPreviousButton = true,
-  hasNextButton = true,
-  hasFixedHeight = true,
-  weekStartsOn = 1,
-  disabledDaysFunction,
-  selectedDaysFunction,
-  extraClassNamesFunction,
-  dayContentFunction,
-  onDayClick,
-  onDayMouseOver,
-  onNextClick,
-  onPreviousClick,
-}) => {
-  const { language } = useContext(SettingsContext);
-
-  const locale = getLocale(language);
-  const handleDayClick = (day: Date) => {
-    if (onDayClick) {
-      onDayClick(day);
-    }
-  };
-
-  const handleDayMouseOver = (day: Date) => {
-    if (onDayMouseOver) {
-      onDayMouseOver(day);
-    }
-  };
-
-  const handleNextClick = () => {
-    const nextMonth = (month + 1) % 12;
-    const nextMonthsYear = nextMonth < month ? year + 1 : year;
-
-    if (onNextClick) {
-      onNextClick(nextMonthsYear, nextMonth);
-    }
-  };
-
-  const handlePreviousClick = () => {
-    const previousMonth = (month - 1) % 12;
-    const previousMonthsYear = previousMonth > month ? year - 1 : year;
-
-    if (onPreviousClick) {
-      onPreviousClick(previousMonthsYear, previousMonth);
-    }
-  };
-
-  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 });
-
-  const mapDay = (day: Date) => {
-    const isoDay = getISODay(day);
-    const isDisabled =
-      isFunction(disabledDaysFunction) && disabledDaysFunction(day);
-    const isSelected =
-      isFunction(selectedDaysFunction) && selectedDaysFunction(day);
-    const isOutsideMonth = !isSameMonth(day, focusDate);
-    const extraClassNames = isFunction(extraClassNamesFunction)
-      ? extraClassNamesFunction(day)
-      : undefined;
-
-    return (
-      <CalendarDay
-        key={`day_${isoDay}`}
-        day={day}
-        isSelected={isSelected}
-        isDisabled={isDisabled}
-        isOutsideMonth={isOutsideMonth}
-        extraClassNames={extraClassNames}
-        onClick={handleDayClick}
-        onMouseOver={handleDayMouseOver}
-      >
-        {isFunction(dayContentFunction) ? dayContentFunction(day) : undefined}
-      </CalendarDay>
-    );
-  };
-
-  const mapWeek = (weekDays: Date[]) => {
-    if (weekDays.length === 0) {
-      return null;
-    }
-
-    const isoWeek = getISOWeek(weekDays[0]);
-
-    return (
-      <div className="calendar__week" key={`week_${isoWeek}`}>
-        {weekDays.map(mapDay)}
-      </div>
-    );
-  };
-
-  return (
-    <div className="calendar">
-      <div className="calendar__header">
-        <div className="calendar__pager">
-          <div
-            className={buildClassName([
-              "calendar__previous",
-              !hasPreviousButton && "calendar__previous--disabled",
-            ])}
-            onClick={handlePreviousClick}
-          >
-            <Icon name="ui-chevron" />
-          </div>
-          <div className="calendar__current-month">
-            {format(focusDate, "MMMM yyyy", { locale })}
-          </div>
-          <div
-            className={buildClassName([
-              "calendar__next",
-              !hasNextButton && "calendar__next--disabled",
-            ])}
-            onClick={handleNextClick}
-          >
-            <Icon name="ui-chevron" />
-          </div>
-        </div>
-        <div className="calendar__day-labels">
-          {range(0, 7).map((i) => (
-            <div className="calendar__day-label" key={`day_${i}`}>
-              {format(calendarDays[i], "EEEEEE", { locale: locale })}
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className="calendar__body">
-        {chunk(calendarDays, 7).map(mapWeek)}
-      </div>
-    </div>
-  );
-};
-
-export default Calendar;
+import {
+  addWeeks,
+  eachDayOfInterval,
+  endOfMonth,
+  endOfWeek,
+  format,
+  getISODay,
+  getISOWeek,
+  getMonth,
+  getYear,
+  isSameMonth,
+  startOfMonth,
+  startOfWeek,
+} from "date-fns";
+import { chunk, isFunction, range } from "lodash";
+import React, { useContext } from "react";
+import { buildClassName } from "../../../shared/utils/class-util";
+import { getLocale } from "../../../shared/utils/localization-util";
+import SettingsContext from "../../settings-context";
+import CalendarDay from "./calendar-day";
+import Icon from "../icon";
+
+interface CalendarProps {
+  year?: number;
+  month?: number;
+  hasPreviousButton?: boolean;
+  hasNextButton?: boolean;
+  hasFixedHeight?: boolean;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  disabledDaysFunction?: (date: Date) => boolean;
+  selectedDaysFunction?: (date: Date) => boolean;
+  extraClassNamesFunction?: (date: Date) => string[];
+  dayContentFunction?: (date: Date) => JSX.Element | null | undefined;
+  onDayClick?: (date: Date) => void;
+  onDayMouseOver?: (date: Date) => void;
+  onNextClick?: (year: number, month: number) => void;
+  onPreviousClick?: (year: number, month: number) => void;
+}
+
+const Calendar: React.FC<CalendarProps> = ({
+  year = getYear(new Date()),
+  month = getMonth(new Date()),
+  hasPreviousButton = true,
+  hasNextButton = true,
+  hasFixedHeight = true,
+  weekStartsOn = 1,
+  disabledDaysFunction,
+  selectedDaysFunction,
+  extraClassNamesFunction,
+  dayContentFunction,
+  onDayClick,
+  onDayMouseOver,
+  onNextClick,
+  onPreviousClick,
+}) => {
+  const { language } = useContext(SettingsContext);
+
+  const locale = getLocale(language);
+  const handleDayClick = (day: Date) => {
+    if (onDayClick) {
+      onDayClick(day);
+    }
+  };
+
+  const handleDayMouseOver = (day: Date) => {
+    if (onDayMouseOver) {
+      onDayMouseOver(day);
+    }
+  };
+
+  const handleNextClick = () => {
+    const nextMonth = (month + 1) % 12;
+    const nextMonthsYear = nextMonth < month ? year + 1 : year;
+
+    if (onNextClick) {
+      onNextClick(nextMonthsYear, nextMonth);
+    }
+  };
+
+  const handlePreviousClick = () => {
+    const previousMonth = (month - 1) % 12;
+    const previousMonthsYear = previousMonth > month ? year - 1 : year;
+
+    if (onPreviousClick) {
+      onPreviousClick(previousMonthsYear, previousMonth);
+    }
+  };
+
+  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 });
+
+  const mapDay = (day: Date) => {
+    const isoDay = getISODay(day);
+    const isDisabled =
+      isFunction(disabledDaysFunction) && disabledDaysFunction(day);
+    const isSelected =
+      isFunction(selectedDaysFunction) && selectedDaysFunction(day);
+    const isOutsideMonth = !isSameMonth(day, focusDate);
+    const extraClassNames = isFunction(extraClassNamesFunction)
+      ? extraClassNamesFunction(day)
+      : undefined;
+
+    return (
+      <CalendarDay
+        key={`day_${isoDay}`}
+        day={day}
+        isSelected={isSelected}
+        isDisabled={isDisabled}
+        isOutsideMonth={isOutsideMonth}
+        extraClassNames={extraClassNames}
+        onClick={handleDayClick}
+        onMouseOver={handleDayMouseOver}
+      >
+        {isFunction(dayContentFunction) ? dayContentFunction(day) : undefined}
+      </CalendarDay>
+    );
+  };
+
+  const mapWeek = (weekDays: Date[]) => {
+    if (weekDays.length === 0) {
+      return null;
+    }
+
+    const isoWeek = getISOWeek(weekDays[0]);
+
+    return (
+      <div className="calendar__week" key={`week_${isoWeek}`}>
+        {weekDays.map(mapDay)}
+      </div>
+    );
+  };
+
+  return (
+    <div className="calendar">
+      <div className="calendar__header">
+        <div className="calendar__pager">
+          <div
+            className={buildClassName([
+              "calendar__previous",
+              !hasPreviousButton && "calendar__previous--disabled",
+            ])}
+            onClick={handlePreviousClick}
+          >
+            <Icon name="ui-chevron" />
+          </div>
+          <div className="calendar__current-month">
+            {format(focusDate, "MMMM yyyy", { locale })}
+          </div>
+          <div
+            className={buildClassName([
+              "calendar__next",
+              !hasNextButton && "calendar__next--disabled",
+            ])}
+            onClick={handleNextClick}
+          >
+            <Icon name="ui-chevron" />
+          </div>
+        </div>
+        <div className="calendar__day-labels">
+          {range(0, 7).map((i) => (
+            <div className="calendar__day-label" key={`day_${i}`}>
+              {format(calendarDays[i], "EEEEEE", { locale: locale })}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="calendar__body">
+        {chunk(calendarDays, 7).map(mapWeek)}
+      </div>
+    </div>
+  );
+};
+
+export default Calendar;