- Refactor to use Date for state instead of custom date data objects.

- Localize month picker button.
StenaIT · Jun 27, 2024 · 77b3355 · 77b3355
1 parent 51376ec
commit 77b3355
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 62 deletions.
diff --git a/packages/calendar/src/components/input-types/travel-date-input/TravelDateInput.tsx b/packages/calendar/src/components/input-types/travel-date-input/TravelDateInput.tsx
@@ -14,19 +14,17 @@ import {
 import {
   DayData,
   getMonthInYear,
-  MonthData,
   WeekData,
 } from "../../../util/calendar/CalendarDataFactory";
-import { enGB } from "date-fns/locale";
 import styles from "./TravelDateInput.module.css";
 import { MonthPicker } from "../../../features/month-picker/MonthPicker";
-import { getNextMonth, getPrevMonth } from "./util/MonthStepper";
 import { TravelDateCell } from "./components/TravelDateCell";
 import { useToday } from "./util/UseToday";
 import { getLocaleForLocaleCode } from "../../../features/localize-date-format/LocaleMapper";
 import { parseLocalizedDateString } from "../../../features/localize-date-format/LocalizedDateParser";
-import { isBefore } from "date-fns";
+import { addMonths, format, isBefore, subMonths } from "date-fns";
 import { formatLocalizedDate } from "../../../features/localize-date-format/LocalizedDateFormatter";
+import { startCase } from "lodash-es";
 
 type VisiblePanel = "calendar" | "month-picker";
 
@@ -40,6 +38,7 @@ export interface TravelDateInputProps
   localeCode?: string;
   startDateLabel?: string;
   endDateLabel?: string;
+  initialMonthInFocus?: Date;
 }
 
 export const TravelDateInput: React.FC<TravelDateInputProps> = ({
@@ -48,59 +47,70 @@ export const TravelDateInput: React.FC<TravelDateInputProps> = ({
   startDateLabel,
   endDateLabel,
   localeCode = "sv",
+  initialMonthInFocus,
 }) => {
   const locale = getLocaleForLocaleCode(localeCode);
 
-  const [visibleMonth, setVisibleMonth] = useState<MonthData>(() =>
-    getMonthInYear(2024, 5, locale)
+  const selectedStartDate = useMemo(
+    () =>
+      value?.startDate
+        ? parseLocalizedDateString(value.startDate, localeCode)
+        : undefined,
+    [localeCode, value?.startDate]
+  );
+
+  const selectedEndDate = useMemo(
+    () =>
+      value?.endDate
+        ? parseLocalizedDateString(value.endDate, localeCode)
+        : undefined,
+    [localeCode, value?.endDate]
+  );
+
+  const [visibleMonth, setVisibleMonth] = useState<Date>(
+    initialMonthInFocus ?? selectedStartDate ?? new Date()
   );
 
+  const visibleMonthData = useMemo(
+    () =>
+      getMonthInYear(
+        visibleMonth.getFullYear(),
+        visibleMonth.getMonth(),
+        locale
+      ),
+    [locale, visibleMonth]
+  );
+
+  const monthPickerButtonLabel = useMemo(() => {
+    return startCase(format(visibleMonth, "MMMM yyyy", { locale }));
+  }, [locale, visibleMonth]);
+
   const today = useToday();
 
   const [hoverDate, setHoverDate] = useState<Date | undefined>();
 
   const [visiblePanel, setVisiblePanel] = useState<VisiblePanel>("calendar");
 
-  const setVisibleMonthDate = useCallback(
-    (d: Date) => {
-      setVisibleMonth(getMonthInYear(d.getFullYear(), d.getMonth(), locale));
-    },
-    [locale]
-  );
+  const setVisibleMonthDate = useCallback((d: Date) => {
+    setVisibleMonth(d);
+  }, []);
 
   const onValueChangeHandler = useCallback<
     (value: TravelDateInputValue) => void
   >(
     (v) => {
       if (!value?.startDate && !value?.endDate && v.startDate?.length === 10) {
-        const d = parseLocalizedDateString(v.startDate, localeCode);
-        setVisibleMonth(getMonthInYear(d.getFullYear(), d.getMonth(), locale));
+        setVisibleMonth(parseLocalizedDateString(v.startDate, localeCode));
       }
       onValueChange?.(v);
     },
-    [value?.startDate, value?.endDate, onValueChange, locale]
-  );
-
-  const selectedStartDate = useMemo(
-    () =>
-      value?.startDate
-        ? parseLocalizedDateString(value.startDate, localeCode)
-        : undefined,
-    [value?.startDate]
-  );
-
-  const selectedEndDate = useMemo(
-    () =>
-      value?.endDate
-        ? parseLocalizedDateString(value.endDate, localeCode)
-        : undefined,
-    [value?.endDate]
+    [value?.startDate, value?.endDate, onValueChange, localeCode, locale]
   );
 
   const onClickDate = (date: Date) => {
     const isSameMonthAndYear =
-      date.getFullYear() === visibleMonth.year &&
-      date.getMonth() === visibleMonth.monthInYear;
+      date.getFullYear() === visibleMonth.getFullYear() &&
+      date.getMonth() === visibleMonth.getMonth();
 
     if (isSameMonthAndYear) {
       if (selectedStartDate && selectedEndDate == null) {
@@ -136,7 +146,7 @@ export const TravelDateInput: React.FC<TravelDateInputProps> = ({
       />
       <Row alignSelf={"center"} justifyContent={"space-between"} width={"100%"}>
         <FlatButton
-          label={"TODO format: " + visibleMonth.name + " " + visibleMonth.year}
+          label={monthPickerButtonLabel}
           rightIcon={
             visiblePanel === "calendar" ? stenaAngleDown : stenaAngleUp
           }
@@ -149,11 +159,11 @@ export const TravelDateInput: React.FC<TravelDateInputProps> = ({
         <Row alignItems={"center"} gap={2}>
           <SecondaryButton
             leftIcon={stenaArrowLeft}
-            onClick={() => setVisibleMonth((p) => getPrevMonth(p, locale))}
+            onClick={() => setVisibleMonth((p) => subMonths(p, 1))}
           />
           <SecondaryButton
             leftIcon={stenaArrowRight}
-            onClick={() => setVisibleMonth((p) => getNextMonth(p, locale))}
+            onClick={() => setVisibleMonth((p) => addMonths(p, 1))}
           />
         </Row>
       </Row>
@@ -162,13 +172,13 @@ export const TravelDateInput: React.FC<TravelDateInputProps> = ({
         <table>
           <tbody>
             <tr>
-              {visibleMonth.weeks[0].days.map((day: DayData) => (
+              {visibleMonthData.weeks[0].days.map((day: DayData) => (
                 <th key={day.name}>
                   <Text>{day.name}</Text>
                 </th>
               ))}
             </tr>
-            {visibleMonth.weeks.map((week: WeekData) => (
+            {visibleMonthData.weeks.map((week: WeekData) => (
               <React.Fragment key={week.weekNumber}>
                 <tr key={week.weekNumber}>
                   {week.days.map((day) => (
@@ -200,9 +210,12 @@ export const TravelDateInput: React.FC<TravelDateInputProps> = ({
         <MonthPicker
           firstMonth={new Date()}
           numMonths={12}
-          value={{ month: visibleMonth.monthInYear, year: visibleMonth.year }}
+          value={{
+            month: visibleMonth.getMonth(),
+            year: visibleMonth.getFullYear(),
+          }}
           onValueChange={(v) => {
-            setVisibleMonth(getMonthInYear(v.year, v.month, enGB));
+            setVisibleMonth(new Date(v.year, v.month));
             setVisiblePanel("calendar");
           }}
         />

diff --git a/packages/calendar/src/components/input-types/travel-date-input/components/TravelDateCell.tsx b/packages/calendar/src/components/input-types/travel-date-input/components/TravelDateCell.tsx
@@ -1,10 +1,7 @@
 import * as React from "react";
 import { KeyboardEventHandler, useCallback } from "react";
 import { Box, Row, Text } from "@stenajs-webui/core";
-import {
-  DayData,
-  MonthData,
-} from "../../../../util/calendar/CalendarDataFactory";
+import { DayData } from "../../../../util/calendar/CalendarDataFactory";
 import styles from "./TravelDateCell.module.css";
 import cx from "classnames";
 import { isSameDay, isSameMonth } from "date-fns";
@@ -15,7 +12,7 @@ import { createDayId, getDateToFocusOn } from "../util/KeyboardNavigation";
 export interface TravelDateCellProps {
   onClick: () => void;
   day: DayData;
-  visibleMonth: MonthData;
+  visibleMonth: Date;
   selectedStartDate: Date | undefined;
   selectedEndDate: Date | undefined;
   onChangeVisibleMonth: (visibleMonth: Date) => void;
@@ -52,7 +49,7 @@ export const TravelDateCell: React.FC<TravelDateCellProps> = ({
     [day.date, onChangeVisibleMonth]
   );
 
-  const dayIsInMonth = day.month === visibleMonth.monthInYear;
+  const dayIsInMonth = day.month === visibleMonth.getMonth();
   const isSelectionStart = selectedStartDate
     ? isSameDay(selectedStartDate, day.date)
     : false;
@@ -102,7 +99,7 @@ export const TravelDateCell: React.FC<TravelDateCellProps> = ({
             isSelectionEnd && styles.isSelectionEnd
           )}
         >
-          <Text>{day.dayOfMonth}</Text>
+          <Text variant={"bold"}>{day.dayOfMonth}</Text>
         </div>
       )}
     </td>

diff --git a/packages/calendar/src/components/input-types/travel-date-input/util/MonthStepper.ts b/packages/calendar/src/components/input-types/travel-date-input/util/MonthStepper.ts