fix(DatePicker, react-datepicker-compat): Make year picker react to g…

…o to today button (#28907) * fix(DatePicker): Make year picker react to go to today. * fix: Make year picker react to go to today. * change fileS * Update packages/react/src/components/Calendar/CalendarYear/CalendarYear.base.tsx Co-authored-by: Makoto Morimoto <[email protected]> * Update packages/react-components/react-datepicker-compat/src/components/CalendarYear/CalendarYear.tsx Co-authored-by: Makoto Morimoto <[email protected]> --------- Co-authored-by: Makoto Morimoto <[email protected]>
microsoft · Aug 17, 2023 · d73590f · d73590f
1 parent 63595d2
commit d73590f
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 36 deletions.
diff --git a/change/@fluentui-react-a941c131-ba0e-40bc-a4b1-a87cd8554cff.json b/change/@fluentui-react-a941c131-ba0e-40bc-a4b1-a87cd8554cff.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(DatePicker): Make year picker react to go to today.",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-datepicker-compat-6fee3389-c01e-423e-850b-b84ef0aefd05.json b/change/@fluentui-react-datepicker-compat-6fee3389-c01e-423e-850b-b84ef0aefd05.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Make year picker react to go to today.",
+  "packageName": "@fluentui/react-datepicker-compat",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/...s/react-components/react-datepicker-compat/src/components/CalendarMonth/CalendarMonth.tsx b/...s/react-components/react-datepicker-compat/src/components/CalendarMonth/CalendarMonth.tsx
@@ -177,6 +177,7 @@ export const CalendarMonth: React.FunctionComponent<CalendarMonthProps> = props
         selectedYear={
           selectedDate ? selectedDate.getFullYear() : navigatedDate ? navigatedDate.getFullYear() : undefined
         }
+        navigatedYear={navigatedDate.getFullYear()}
         onRenderYear={onRenderYear}
         strings={yearStrings}
         componentRef={calendarYearRef}

diff --git a/...ges/react-components/react-datepicker-compat/src/components/CalendarYear/CalendarYear.tsx b/...ges/react-components/react-datepicker-compat/src/components/CalendarYear/CalendarYear.tsx
@@ -377,26 +377,26 @@ function useAnimateBackwards({ selectedYear, navigatedYear }: CalendarYearProps)
   }
 }
 
-const NavigationDirection = {
-  Previous: 0 as const,
-  Next: 1 as const,
-};
-
 function useYearRangeState({ selectedYear, navigatedYear }: CalendarYearProps) {
-  const [fromYear, navigate] = React.useReducer(
-    (state: number, action: (typeof NavigationDirection)[keyof typeof NavigationDirection]): number => {
-      return state + (action === NavigationDirection.Next ? CELL_COUNT : -CELL_COUNT);
-    },
-    undefined,
-    () => {
-      const rangeYear = selectedYear || navigatedYear || new Date().getFullYear();
-      return Math.floor(rangeYear / 10) * 10;
-    },
-  );
-  const toYear = fromYear + CELL_COUNT - 1;
+  const rangeYear = React.useMemo(() => {
+    return selectedYear || navigatedYear || Math.floor(new Date().getFullYear() / 10) * 10;
+  }, [navigatedYear, selectedYear]);
 
-  const onNavNext = () => navigate(NavigationDirection.Next);
-  const onNavPrevious = () => navigate(NavigationDirection.Previous);
+  const [fromYear, setFromYear] = React.useState<number>(rangeYear);
+
+  const onNavNext = () => {
+    setFromYear(year => year + CELL_COUNT);
+  };
+
+  const onNavPrevious = () => {
+    setFromYear(year => year - CELL_COUNT);
+  };
+
+  React.useEffect(() => {
+    setFromYear(rangeYear);
+  }, [rangeYear]);
+
+  const toYear = fromYear + CELL_COUNT - 1;
 
   return [fromYear, toYear, onNavNext, onNavPrevious] as const;
 }

diff --git a/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.base.tsx b/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.base.tsx
@@ -183,6 +183,7 @@ export const CalendarMonthBase: React.FunctionComponent<ICalendarMonthProps> = p
         selectedYear={
           selectedDate ? selectedDate.getFullYear() : navigatedDate ? navigatedDate.getFullYear() : undefined
         }
+        navigatedYear={navigatedDate.getFullYear()}
         onRenderYear={onRenderYear}
         strings={yearStrings}
         componentRef={calendarYearRef}

diff --git a/packages/react/src/components/Calendar/CalendarYear/CalendarYear.base.tsx b/packages/react/src/components/Calendar/CalendarYear/CalendarYear.base.tsx
@@ -398,26 +398,26 @@ function useAnimateBackwards({ selectedYear, navigatedYear }: ICalendarYearProps
   }
 }
 
-const enum NavigationDirection {
-  Previous,
-  Next,
-}
-
 function useYearRangeState({ selectedYear, navigatedYear }: ICalendarYearProps) {
-  const [fromYear, navigate] = React.useReducer(
-    (state: number, action: NavigationDirection): number => {
-      return state + (action === NavigationDirection.Next ? CELL_COUNT : -CELL_COUNT);
-    },
-    undefined,
-    () => {
-      const rangeYear = selectedYear || navigatedYear || new Date().getFullYear();
-      return Math.floor(rangeYear / 10) * 10;
-    },
-  );
-  const toYear = fromYear + CELL_COUNT - 1;
+  const rangeYear = React.useMemo(() => {
+    return selectedYear || navigatedYear || Math.floor(new Date().getFullYear() / 10) * 10;
+  }, [navigatedYear, selectedYear]);
 
-  const onNavNext = () => navigate(NavigationDirection.Next);
-  const onNavPrevious = () => navigate(NavigationDirection.Previous);
+  const [fromYear, setFromYear] = React.useState<number>(rangeYear);
+
+  const onNavNext = () => {
+    setFromYear(year => year + CELL_COUNT);
+  };
+
+  const onNavPrevious = () => {
+    setFromYear(year => year - CELL_COUNT);
+  };
+
+  React.useEffect(() => {
+    setFromYear(rangeYear);
+  }, [rangeYear]);
+
+  const toYear = fromYear + CELL_COUNT - 1;
 
   return [fromYear, toYear, onNavNext, onNavPrevious] as const;
 }