[DateRangePicker] Fix not working renderDay prop (mui#1953)

* [DateRangePicker] Properly call `renderDayProp` * Omit base calendar renderDay from props * Make renderDay optional
mnajdova · Jul 10, 2020 · ad3ed4a · ad3ed4a
1 parent 7d75a2c
commit ad3ed4a
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 43 deletions.
diff --git a/docs/prop-types.json b/docs/prop-types.json
diff --git a/lib/src/DateRangePicker/DateRangePickerDay.tsx b/lib/src/DateRangePicker/DateRangePickerDay.tsx
@@ -5,7 +5,7 @@ import { useUtils } from '../_shared/hooks/useUtils';
 import { makeStyles, fade } from '@material-ui/core/styles';
 import { Day, DayProps, areDayPropsEqual } from '../views/Calendar/Day';
 
-interface DateRangeDayProps extends DayProps {
+export interface DateRangeDayProps extends DayProps {
   isHighlighting: boolean;
   isEndOfHighlighting: boolean;
   isStartOfHighlighting: boolean;

diff --git a/lib/src/DateRangePicker/DateRangePickerView.tsx b/lib/src/DateRangePicker/DateRangePickerView.tsx
@@ -21,7 +21,7 @@ import {
   ExportedDesktopDateRangeCalendarProps,
 } from './DateRangePickerViewDesktop';
 
-type BaseCalendarPropsToReuse = Omit<ExportedCalendarViewProps, 'onYearChange'>;
+type BaseCalendarPropsToReuse = Omit<ExportedCalendarViewProps, 'onYearChange' | 'renderDay'>;
 
 export interface ExportedDateRangePickerViewProps
   extends BaseCalendarPropsToReuse,

diff --git a/lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx b/lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { DateRange } from './RangeTypes';
-import { DateRangeDay } from './DateRangePickerDay';
 import { useUtils } from '../_shared/hooks/useUtils';
 import { makeStyles } from '@material-ui/core/styles';
 import { MaterialUiPickersDate } from '../typings/date';
 import { calculateRangePreview } from './date-range-manager';
 import { Calendar, CalendarProps } from '../views/Calendar/Calendar';
+import { DateRangeDay, DateRangeDayProps } from './DateRangePickerDay';
 import { defaultMinDate, defaultMaxDate } from '../constants/prop-types';
 import { ArrowSwitcher, ExportedArrowSwitcherProps } from '../_shared/ArrowSwitcher';
 import {
@@ -25,11 +25,16 @@ export interface ExportedDesktopDateRangeCalendarProps {
    * @default 2
    */
   calendars?: 1 | 2 | 3;
+  /**
+   * Custom renderer for `<DateRangePicker />` days.
+   * @example (date, DateRangeDayProps) => <DateRangePickerDay {...DateRangeDayProps} />
+   */
+  renderDay?: (date: MaterialUiPickersDate, DateRangeDayProps: DateRangeDayProps) => JSX.Element;
 }
 
 interface DesktopDateRangeCalendarProps
   extends ExportedDesktopDateRangeCalendarProps,
-    CalendarProps,
+    Omit<CalendarProps, 'renderDay'>,
     DateValidationProps,
     ExportedArrowSwitcherProps {
   date: DateRange;
@@ -93,6 +98,7 @@ export const DateRangePickerViewDesktop: React.FC<DesktopDateRangeCalendarProps>
   maxDate: __maxDate,
   currentlySelectingRangeEnd,
   currentMonth,
+  renderDay = (_, props) => <DateRangeDay {...props} />,
   ...other
 }) => {
   const utils = useUtils();
@@ -175,18 +181,18 @@ export const DateRangePickerViewDesktop: React.FC<DesktopDateRangeCalendarProps>
               onChange={handleDayChange}
               currentMonth={monthOnIteration}
               TransitionProps={CalendarTransitionProps}
-              renderDay={(day, _, DayProps) => (
-                <DateRangeDay
-                  isPreviewing={isWithinRange(utils, day, previewingRange)}
-                  isStartOfPreviewing={isStartOfRange(utils, day, previewingRange)}
-                  isEndOfPreviewing={isEndOfRange(utils, day, previewingRange)}
-                  isHighlighting={isWithinRange(utils, day, date)}
-                  isStartOfHighlighting={isStartOfRange(utils, day, date)}
-                  isEndOfHighlighting={isEndOfRange(utils, day, date)}
-                  onMouseEnter={() => handlePreviewDayChange(day)}
-                  {...DayProps}
-                />
-              )}
+              renderDay={(day, _, DayProps) =>
+                renderDay(day, {
+                  isPreviewing: isWithinRange(utils, day, previewingRange),
+                  isStartOfPreviewing: isStartOfRange(utils, day, previewingRange),
+                  isEndOfPreviewing: isEndOfRange(utils, day, previewingRange),
+                  isHighlighting: isWithinRange(utils, day, date),
+                  isStartOfHighlighting: isStartOfRange(utils, day, date),
+                  isEndOfHighlighting: isEndOfRange(utils, day, date),
+                  onMouseEnter: () => handlePreviewDayChange(day),
+                  ...DayProps,
+                })
+              }
             />
           </div>
         );

diff --git a/lib/src/DateRangePicker/DateRangePickerViewMobile.tsx b/lib/src/DateRangePicker/DateRangePickerViewMobile.tsx
@@ -7,18 +7,20 @@ import { MaterialUiPickersDate } from '../typings/date';
 import { Calendar, CalendarProps } from '../views/Calendar/Calendar';
 import { ExportedArrowSwitcherProps } from '../_shared/ArrowSwitcher';
 import { defaultMinDate, defaultMaxDate } from '../constants/prop-types';
+import { ExportedDesktopDateRangeCalendarProps } from './DateRangePickerViewDesktop';
 import {
   isWithinRange,
   isStartOfRange,
   isEndOfRange,
   DateValidationProps,
 } from '../_helpers/date-utils';
 
-export interface ExportedMobileDateRangeCalendarProps {}
+export interface ExportedMobileDateRangeCalendarProps
+  extends Pick<ExportedDesktopDateRangeCalendarProps, 'renderDay'> {}
 
 interface DesktopDateRangeCalendarProps
   extends ExportedMobileDateRangeCalendarProps,
-    CalendarProps,
+    Omit<CalendarProps, 'renderDay'>,
     DateValidationProps,
     ExportedArrowSwitcherProps {
   date: DateRange;
@@ -39,6 +41,7 @@ export const DateRangePickerViewMobile: React.FC<DesktopDateRangeCalendarProps>
   rightArrowButtonProps,
   rightArrowButtonText,
   rightArrowIcon,
+  renderDay = (_, props) => <DateRangeDay {...props} />,
   ...other
 }) => {
   const utils = useUtils();
@@ -67,17 +70,17 @@ export const DateRangePickerViewMobile: React.FC<DesktopDateRangeCalendarProps>
         {...other}
         date={date}
         onChange={onChange}
-        renderDay={(day, _, DayProps) => (
-          <DateRangeDay
-            isPreviewing={false}
-            isStartOfPreviewing={false}
-            isEndOfPreviewing={false}
-            isHighlighting={isWithinRange(utils, day, date)}
-            isStartOfHighlighting={isStartOfRange(utils, day, date)}
-            isEndOfHighlighting={isEndOfRange(utils, day, date)}
-            {...DayProps}
-          />
-        )}
+        renderDay={(day, _, DayProps) =>
+          renderDay(day, {
+            isPreviewing: false,
+            isStartOfPreviewing: false,
+            isEndOfPreviewing: false,
+            isHighlighting: isWithinRange(utils, day, date),
+            isStartOfHighlighting: isStartOfRange(utils, day, date),
+            isEndOfHighlighting: isEndOfRange(utils, day, date),
+            ...DayProps,
+          })
+        }
       />
     </React.Fragment>
   );

diff --git a/lib/src/__tests__/DateRangePicker.test.tsx b/lib/src/__tests__/DateRangePicker.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { utilsToUse } from './test-utils';
 import { DesktopDateRangePicker } from '../';
 import { screen, waitFor } from '@testing-library/react';
+import { utilsToUse, getAllByMuiTest } from './test-utils';
 import { TextField, TextFieldProps } from '@material-ui/core';
 import { createClientRender, fireEvent } from './createClientRender';
 
@@ -31,4 +31,19 @@ describe('<DateRangePicker />', () => {
     await waitFor(() => screen.getByRole('tooltip'));
     expect(screen.getByRole('tooltip')).toBeInTheDocument();
   });
+
+  it('prop – `renderDay` should be called and render days', async () => {
+    render(
+      <DesktopDateRangePicker
+        open
+        renderInput={defaultRangeRenderInput}
+        onChange={jest.fn()}
+        renderDay={day => <div key={String(day)} data-mui-test="renderDayCalled" />}
+        value={[null, null]}
+      />
+    );
+
+    await waitFor(() => screen.getByRole('tooltip'));
+    expect(getAllByMuiTest('renderDayCalled').length).not.toBe(0);
+  });
 });