[CalendarPicker] Use transition components from core instead of a cus…

…tom implementation (#27043)
mui · Jul 5, 2021 · bd64a49 · bd64a49
1 parent 699b5e9
commit bd64a49
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 60 deletions.
diff --git a/packages/material-ui-lab/src/CalendarPicker/CalendarPicker.test.tsx b/packages/material-ui-lab/src/CalendarPicker/CalendarPicker.test.tsx
@@ -19,8 +19,7 @@ describe('<CalendarPicker />', () => {
     clock.restore();
   });
 
-  // StrictModeViolation: Uses StrictMode incompatible API of `react-transition-group`
-  const render = createPickerRender({ strict: false });
+  const render = createPickerRender();
 
   describeConformanceV5(<CalendarPicker date={adapterToUse.date()} onChange={() => {}} />, () => ({
     classes,

diff --git a/packages/material-ui-lab/src/CalendarPicker/PickersCalendar.tsx b/packages/material-ui-lab/src/CalendarPicker/PickersCalendar.tsx
@@ -135,6 +135,8 @@ function PickersCalendar<TDate>(props: PickersCalendarProps<TDate>) {
     .filter(Boolean)
     .map((selectedDateItem) => selectedDateItem && utils.startOfDay(selectedDateItem));
 
+  const slideNodeRef = React.useRef(null);
+
   return (
     <React.Fragment>
       <PickersCalendarDayHeader>
@@ -155,8 +157,13 @@ function PickersCalendar<TDate>(props: PickersCalendarProps<TDate>) {
           slideDirection={slideDirection}
           className={className}
           {...TransitionProps}
+          nodeRef={slideNodeRef}
         >
-          <PickersCalendarWeekContainer data-mui-test="pickers-calendar" role="grid">
+          <PickersCalendarWeekContainer
+            data-mui-test="pickers-calendar"
+            ref={slideNodeRef}
+            role="grid"
+          >
             {utils.getWeekArray(currentMonth).map((week) => (
               <PickersCalendarWeek role="row" key={`week-${week[0]}`}>
                 {week.map((day) => {

diff --git a/packages/material-ui-lab/src/CalendarPicker/PickersFadeTransitionGroup.tsx b/packages/material-ui-lab/src/CalendarPicker/PickersFadeTransitionGroup.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import clsx from 'clsx';
+import Fade from '@material-ui/core/Fade';
 import { styled } from '@material-ui/core/styles';
 import { generateUtilityClasses } from '@material-ui/unstyled';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
-import { TransitionGroupProps } from 'react-transition-group/TransitionGroup';
+import { TransitionGroup } from 'react-transition-group';
 
 interface FadeTransitionProps {
   children: React.ReactElement;
@@ -12,40 +12,15 @@ interface FadeTransitionProps {
   transKey: React.Key;
 }
 
-const classes = generateUtilityClasses('PrivatePickersFadeTransitionGroup', [
-  'root',
-  'fadeEnter',
-  'fadeEnterActive',
-  'fadeExit',
-  'fadeExitActive',
-]);
+const classes = generateUtilityClasses('PrivatePickersFadeTransitionGroup', ['root']);
 
 const animationDuration = 500;
 
 const PickersFadeTransitionGroupRoot = styled(TransitionGroup, {
   skipSx: true,
-})<TransitionGroupProps>(({ theme }) => ({
+})(() => ({
   display: 'block',
   position: 'relative',
-  [`& .${classes.fadeEnter}`]: {
-    willChange: 'transform',
-    opacity: 0,
-  },
-  [`& .${classes.fadeEnterActive}`]: {
-    opacity: 1,
-    transition: theme.transitions.create('opacity', {
-      duration: animationDuration,
-    }),
-  },
-  [`& .${classes.fadeExit}`]: {
-    opacity: 1,
-  },
-  [`& .${classes.fadeExitActive}`]: {
-    opacity: 0,
-    transition: theme.transitions.create('opacity', {
-      duration: animationDuration / 2,
-    }),
-  },
 }));
 
 /**
@@ -61,31 +36,16 @@ const PickersFadeTransitionGroup = ({
     return children;
   }
 
-  const transitionClasses = {
-    exit: classes.fadeExit,
-    enterActive: classes.fadeEnterActive,
-    enter: classes.fadeEnter,
-    exitActive: classes.fadeExitActive,
-  };
-
   return (
-    <PickersFadeTransitionGroupRoot
-      className={clsx(classes.root, className)}
-      childFactory={(element) =>
-        React.cloneElement(element, {
-          classNames: transitionClasses,
-        })
-      }
-    >
-      <CSSTransition
+    <PickersFadeTransitionGroupRoot className={clsx(classes.root, className)}>
+      <Fade
         mountOnEnter
         unmountOnExit
         key={transKey}
         timeout={{ appear: animationDuration, enter: animationDuration / 2, exit: 0 }}
-        classNames={transitionClasses}
       >
         {children}
-      </CSSTransition>
+      </Fade>
     </PickersFadeTransitionGroupRoot>
   );
 };

diff --git a/packages/material-ui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx b/packages/material-ui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx
@@ -49,8 +49,7 @@ describe('<DesktopDatePicker />', () => {
   afterEach(() => {
     clock.restore();
   });
-  // StrictModeViolation: Uses CalendarPicker
-  const render = createPickerRender({ strict: false });
+  const render = createPickerRender();
 
   it('prop: components.OpenPickerIcon', () => {
     function HomeIcon(props: SvgIconProps) {

diff --git a/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx b/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx
@@ -30,8 +30,7 @@ describe('<DesktopDateRangePicker />', () => {
   afterEach(() => {
     clock.restore();
   });
-  // StrictModeViolation: Uses CalendarPicker
-  const render = createPickerRender({ strict: false });
+  const render = createPickerRender();
 
   describeConformance(
     <DesktopDateRangePicker

diff --git a/packages/material-ui-lab/src/MobileDatePicker/MobileDatePicker.test.tsx b/packages/material-ui-lab/src/MobileDatePicker/MobileDatePicker.test.tsx
@@ -23,8 +23,7 @@ describe('<MobileDatePicker />', () => {
   afterEach(() => {
     clock.restore();
   });
-  // StrictModeViolation: Uses CalendarPicker
-  const render = createPickerRender({ strict: false });
+  const render = createPickerRender();
 
   it('Accepts date on `OK` button click', () => {
     const onChangeMock = spy();

diff --git a/packages/material-ui-lab/src/MobileDateTimePicker/MobileDateTimePicker.test.tsx b/packages/material-ui-lab/src/MobileDateTimePicker/MobileDateTimePicker.test.tsx
@@ -17,8 +17,7 @@ describe('<MobileDateTimePicker />', () => {
     clock.restore();
   });
 
-  // StrictModeViolation: Uses CalendarPicker
-  const render = createPickerRender({ strict: false });
+  const render = createPickerRender();
 
   it('opens dialog on textField click for Mobile mode', () => {
     render(

diff --git a/packages/material-ui-lab/src/StaticDatePicker/StaticDatePicker.test.tsx b/packages/material-ui-lab/src/StaticDatePicker/StaticDatePicker.test.tsx
@@ -19,8 +19,7 @@ describe('<StaticDatePicker />', () => {
   afterEach(() => {
     clock.restore();
   });
-  // StrictModeViolation: Uses CalendarPicker
-  const render = createPickerRender({ strict: false });
+  const render = createPickerRender();
 
   it('render proper month', () => {
     render(