From ad3ed4a15dc816ccfd3dbd1645bc3e41b918d292 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Fri, 10 Jul 2020 18:23:36 +0300 Subject: [PATCH] [DateRangePicker] Fix not working `renderDay` prop (#1953) * [DateRangePicker] Properly call `renderDayProp` * Omit base calendar renderDay from props * Make renderDay optional --- docs/prop-types.json | 26 +++++++------- .../DateRangePicker/DateRangePickerDay.tsx | 2 +- .../DateRangePicker/DateRangePickerView.tsx | 2 +- .../DateRangePickerViewDesktop.tsx | 34 +++++++++++-------- .../DateRangePickerViewMobile.tsx | 29 +++++++++------- lib/src/__tests__/DateRangePicker.test.tsx | 17 +++++++++- 6 files changed, 67 insertions(+), 43 deletions(-) diff --git a/docs/prop-types.json b/docs/prop-types.json index 0ccc3a5d18dece..5f1b20f77ee23b 100644 --- a/docs/prop-types.json +++ b/docs/prop-types.json @@ -3183,19 +3183,6 @@ "name": "(date: any) => void" } }, - "renderDay": { - "defaultValue": null, - "description": "Custom renderer for day. Check [DayComponentProps api](https://material-ui-pickers.dev/api/Day).", - "name": "renderDay", - "parent": { - "fileName": "material-ui-pickers/lib/src/views/Calendar/Calendar.tsx", - "name": "ExportedCalendarProps" - }, - "required": false, - "type": { - "name": "(day: DateIOType, selectedDates: DateIOType[], DayComponentProps: DayProps) => Element" - } - }, "allowKeyboardControl": { "defaultValue": { "value": "currentWrapper !== 'static'" @@ -3269,6 +3256,19 @@ "name": "2 | 3 | 1" } }, + "renderDay": { + "defaultValue": null, + "description": "Custom renderer for `` days.\n@example (date, DateRangeDayProps) => ", + "name": "renderDay", + "parent": { + "fileName": "material-ui-pickers/lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx", + "name": "ExportedDesktopDateRangeCalendarProps" + }, + "required": false, + "type": { + "name": "(date: any, DateRangeDayProps: DateRangeDayProps) => Element" + } + }, "className": { "defaultValue": null, "description": "className applied to the root component.", diff --git a/lib/src/DateRangePicker/DateRangePickerDay.tsx b/lib/src/DateRangePicker/DateRangePickerDay.tsx index e88057ae3e9e5c..92d2cc43476d0f 100644 --- 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 index 0412d6c7883ac0..b27cd6526174d0 100644 --- a/lib/src/DateRangePicker/DateRangePickerView.tsx +++ b/lib/src/DateRangePicker/DateRangePickerView.tsx @@ -21,7 +21,7 @@ import { ExportedDesktopDateRangeCalendarProps, } from './DateRangePickerViewDesktop'; -type BaseCalendarPropsToReuse = Omit; +type BaseCalendarPropsToReuse = Omit; export interface ExportedDateRangePickerViewProps extends BaseCalendarPropsToReuse, diff --git a/lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx b/lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx index a896b599a052fb..58876cf9bd5c73 100644 --- 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 `` days. + * @example (date, DateRangeDayProps) => + */ + renderDay?: (date: MaterialUiPickersDate, DateRangeDayProps: DateRangeDayProps) => JSX.Element; } interface DesktopDateRangeCalendarProps extends ExportedDesktopDateRangeCalendarProps, - CalendarProps, + Omit, DateValidationProps, ExportedArrowSwitcherProps { date: DateRange; @@ -93,6 +98,7 @@ export const DateRangePickerViewDesktop: React.FC maxDate: __maxDate, currentlySelectingRangeEnd, currentMonth, + renderDay = (_, props) => , ...other }) => { const utils = useUtils(); @@ -175,18 +181,18 @@ export const DateRangePickerViewDesktop: React.FC onChange={handleDayChange} currentMonth={monthOnIteration} TransitionProps={CalendarTransitionProps} - renderDay={(day, _, DayProps) => ( - 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, + }) + } /> ); diff --git a/lib/src/DateRangePicker/DateRangePickerViewMobile.tsx b/lib/src/DateRangePicker/DateRangePickerViewMobile.tsx index f5304d3d19479f..c108a1186b8aa9 100644 --- a/lib/src/DateRangePicker/DateRangePickerViewMobile.tsx +++ b/lib/src/DateRangePicker/DateRangePickerViewMobile.tsx @@ -7,6 +7,7 @@ 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, @@ -14,11 +15,12 @@ import { DateValidationProps, } from '../_helpers/date-utils'; -export interface ExportedMobileDateRangeCalendarProps {} +export interface ExportedMobileDateRangeCalendarProps + extends Pick {} interface DesktopDateRangeCalendarProps extends ExportedMobileDateRangeCalendarProps, - CalendarProps, + Omit, DateValidationProps, ExportedArrowSwitcherProps { date: DateRange; @@ -39,6 +41,7 @@ export const DateRangePickerViewMobile: React.FC rightArrowButtonProps, rightArrowButtonText, rightArrowIcon, + renderDay = (_, props) => , ...other }) => { const utils = useUtils(); @@ -67,17 +70,17 @@ export const DateRangePickerViewMobile: React.FC {...other} date={date} onChange={onChange} - renderDay={(day, _, 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, + }) + } /> ); diff --git a/lib/src/__tests__/DateRangePicker.test.tsx b/lib/src/__tests__/DateRangePicker.test.tsx index f8ecaa98b0fa80..8ea9674c39bf3c 100644 --- 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('', () => { await waitFor(() => screen.getByRole('tooltip')); expect(screen.getByRole('tooltip')).toBeInTheDocument(); }); + + it('prop – `renderDay` should be called and render days', async () => { + render( +
} + value={[null, null]} + /> + ); + + await waitFor(() => screen.getByRole('tooltip')); + expect(getAllByMuiTest('renderDayCalled').length).not.toBe(0); + }); });