fixup! Add prop to render elements after calendar (mui#1795)

BureauxLocaux · Sep 7, 2020 · 4b82dd0 · 4b82dd0
1 parent 3268735
commit 4b82dd0
Showing 1 changed file with 28 additions and 24 deletions.
diff --git a/lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx b/lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx
@@ -30,7 +30,12 @@ export interface ExportedDesktopDateRangeCalendarProps<TDate> {
    * @example (date, DateRangeDayProps) => <DateRangePickerDay {...DateRangeDayProps} />
    */
   renderDay?: (date: TDate, DateRangeDayProps: DateRangeDayProps<TDate>) => JSX.Element;
-  renderCalendarInfo?: React.ReactNode;
+  slotComponents?: {
+    Calendar?: React.ElementType;
+  };
+  slotProps?: {
+    Calendar?: CalendarProps<TDate>;
+  };
 }
 
 interface DesktopDateRangeCalendarProps<TDate>
@@ -103,7 +108,8 @@ export function DateRangePickerViewDesktop<TDate>(props: DesktopDateRangeCalenda
     currentlySelectingRangeEnd,
     currentMonth,
     renderDay = (_, dateRangeProps) => <DateRangeDay {...dateRangeProps} />,
-    renderCalendarInfo,
+    slotComponents = { Calendar },
+    slotProps = {},
     ...other
   } = props;
 
@@ -155,6 +161,25 @@ export function DateRangePickerViewDesktop<TDate>(props: DesktopDateRangeCalenda
     changeMonth(utils.getPreviousMonth(currentMonth));
   }, [changeMonth, currentMonth, utils]);
 
+  const CalendarComponent = slotComponents.Calendar || Calendar;
+  const calendarProps = slotProps.Calendar || {
+    ...other,
+    date,
+    className: classes.calendar,
+    onChange: handleDayChange,
+    TransitionProps: CalendarTransitionProps,
+    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,
+      })
+  };
+
   return (
     <div className={classes.root}>
       {getCalendarsArray(calendars).map((_, index) => {
@@ -178,28 +203,7 @@ export function DateRangePickerViewDesktop<TDate>(props: DesktopDateRangeCalenda
               rightArrowIcon={rightArrowIcon}
               text={utils.format(monthOnIteration, 'monthAndYear')}
             />
-            <Calendar<TDate>
-              {...other}
-              key={index}
-              date={date}
-              className={classes.calendar}
-              onChange={handleDayChange}
-              currentMonth={monthOnIteration}
-              TransitionProps={CalendarTransitionProps}
-              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,
-                })
-              }
-            />
-            {renderCalendarInfo}
+            <CalendarComponent key={index} currentMonth={monthOnIteration} {...calendarProps} />
           </div>
         );
       })}