refactor(datepickers): use context rather than prop drilling

zendeskgarden · Apr 1, 2022 · cf29945 · cf29945
1 parent 3577320
commit cf29945
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 57 deletions.
diff --git a/packages/datepickers/.size-snapshot.json b/packages/datepickers/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "index.cjs.js": {
-    "bundled": 137973,
-    "minified": 77745,
-    "gzipped": 17268
+    "bundled": 137339,
+    "minified": 77485,
+    "gzipped": 17213
   },
   "index.esm.js": {
-    "bundled": 134810,
-    "minified": 75058,
-    "gzipped": 17087,
+    "bundled": 134176,
+    "minified": 74798,
+    "gzipped": 17033,
     "treeshaked": {
       "rollup": {
-        "code": 55704,
+        "code": 55444,
         "import_statements": 546
       },
       "webpack": {
-        "code": 65130
+        "code": 64870
       }
     }
   }

diff --git a/packages/datepickers/src/elements/DatepickerRange/components/Calendar.tsx b/packages/datepickers/src/elements/DatepickerRange/components/Calendar.tsx
@@ -16,8 +16,7 @@ import { Month } from './Month';
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export const Calendar = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {
-  const { state, dispatch, locale, isCompact, minValue, maxValue, startValue, endValue } =
-    useDatepickerRangeContext();
+  const { state } = useDatepickerRangeContext();
 
   return (
     <StyledRangeCalendar
@@ -27,30 +26,8 @@ export const Calendar = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement
       data-test-id="range-calendar"
       {...props}
     >
-      <Month
-        locale={locale}
-        displayDate={state.previewDate}
-        isCompact={isCompact}
-        isNextHidden
-        dispatch={dispatch}
-        minValue={minValue}
-        maxValue={maxValue}
-        startValue={startValue}
-        endValue={endValue}
-        hoverDate={state.hoverDate}
-      />
-      <Month
-        locale={locale}
-        displayDate={addMonths(state.previewDate, 1)}
-        isCompact={isCompact}
-        isPreviousHidden
-        dispatch={dispatch}
-        minValue={minValue}
-        maxValue={maxValue}
-        startValue={startValue}
-        endValue={endValue}
-        hoverDate={state.hoverDate}
-      />
+      <Month displayDate={state.previewDate} isNextHidden />
+      <Month displayDate={addMonths(state.previewDate, 1)} isPreviousHidden />
     </StyledRangeCalendar>
   );
 });

diff --git a/packages/datepickers/src/elements/DatepickerRange/components/Month.tsx b/packages/datepickers/src/elements/DatepickerRange/components/Month.tsx
@@ -33,41 +33,27 @@ import {
   StyledHighlight
 } from '../../../styled';
 import { getStartOfWeek } from '../../../utils/calendar-utils';
-import { DatepickerRangeAction } from '../utils/datepicker-range-reducer';
 import useDatepickerRangeContext from '../utils/useDatepickerRangeContext';
 
 interface IMonthProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  locale?: string;
   displayDate: Date;
-  isCompact?: boolean;
   isPreviousHidden?: boolean;
   isNextHidden?: boolean;
-  dispatch: React.Dispatch<DatepickerRangeAction>;
-  minValue?: Date;
-  maxValue?: Date;
-  startValue?: Date;
-  endValue?: Date;
-  hoverDate?: Date;
 }
 
 export const Month = forwardRef<HTMLDivElement, IMonthProps>(
-  (
-    {
+  ({ displayDate, isPreviousHidden, isNextHidden }, ref) => {
+    const {
+      state,
+      dispatch,
       locale,
-      displayDate,
       isCompact,
-      isPreviousHidden,
-      isNextHidden,
-      dispatch,
       minValue,
       maxValue,
       startValue,
       endValue,
-      hoverDate
-    },
-    ref
-  ) => {
-    const { state, onChange } = useDatepickerRangeContext();
+      onChange
+    } = useDatepickerRangeContext();
 
     const headerLabelFormatter = useCallback(
       date => {
@@ -173,18 +159,18 @@ export const Month = forwardRef<HTMLDivElement, IMonthProps>(
           (isAfter(date, startValue) || isSameDay(date, startValue)) &&
           (isBefore(date, endValue) || isSameDay(date, endValue)) &&
           !isSameDay(startValue, endValue);
-      } else if (startValue !== undefined && hoverDate !== undefined) {
+      } else if (startValue !== undefined && state.hoverDate !== undefined) {
         isHighlighted =
           (isAfter(date, startValue) || isSameDay(date, startValue)) &&
-          (isBefore(date, hoverDate) || isSameDay(date, hoverDate));
+          (isBefore(date, state.hoverDate) || isSameDay(date, state.hoverDate));
       }
 
       const isHighlightStart =
         (isHighlighted && startValue && isSameDay(date, startValue)) || false;
 
       const isHighlightEnd =
         (isHighlighted && endValue && isSameDay(date, endValue)) ||
-        (hoverDate && isSameDay(date, hoverDate) && !isBefore(date, endValue!)) ||
+        (state.hoverDate && isSameDay(date, state.hoverDate) && !isBefore(date, endValue!)) ||
         false;
 
       let isInvalidDateRange =