[pickers] Migrate PickersTransition to emotion

Author: siriwatknp

packages/material-ui-lab/src/CalendarPicker/PickersFadeTransitionGroup.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { MuiStyles, WithStyles, withStyles, StyleRules } from '@material-ui/core/styles';
+import { experimentalStyled as 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';
 
 interface FadeTransitionProps {
   children: React.ReactElement;
@@ -10,52 +12,55 @@ interface FadeTransitionProps {
   transKey: React.Key;
 }
 
-export type PickersFadeTransitionGroupClassKey =
-  | 'root'
-  | 'fadeEnter'
-  | 'fadeEnterActive'
-  | 'fadeExit'
-  | 'fadeExitActive';
+const classes = generateUtilityClasses('PrivatePickersFadeTransitionGroup', [
+  'root',
+  'fadeEnter',
+  'fadeEnterActive',
+  'fadeExit',
+  'fadeExitActive',
+]);
 
 const animationDuration = 500;
-export const styles: MuiStyles<PickersFadeTransitionGroupClassKey> = (
-  theme,
-): StyleRules<PickersFadeTransitionGroupClassKey> => ({
-  root: {
-    display: 'block',
-    position: 'relative',
+
+const PickersFadeTransitionGroupRoot = styled(
+  TransitionGroup,
+  {},
+  {
+    skipSx: true,
   },
-  fadeEnter: {
+)<TransitionGroupProps>(({ theme }) => ({
+  display: 'block',
+  position: 'relative',
+  [`& .${classes.fadeEnter}`]: {
     willChange: 'transform',
     opacity: 0,
   },
-  fadeEnterActive: {
+  [`& .${classes.fadeEnterActive}`]: {
     opacity: 1,
     transition: theme.transitions.create('opacity', {
       duration: animationDuration,
     }),
   },
-  fadeExit: {
+  [`& .${classes.fadeExit}`]: {
     opacity: 1,
   },
-  fadeExitActive: {
+  [`& .${classes.fadeExitActive}`]: {
     opacity: 0,
     transition: theme.transitions.create('opacity', {
       duration: animationDuration / 2,
     }),
   },
-});
+}));
 
 /**
  * @ignore - do not document.
  */
-const FadeTransitionGroup: React.FC<FadeTransitionProps & WithStyles<typeof styles>> = ({
-  classes,
+const PickersFadeTransitionGroup = ({
   children,
   className,
   reduceAnimations,
   transKey,
-}) => {
+}: FadeTransitionProps) => {
   if (reduceAnimations) {
     return children;
   }
@@ -68,7 +73,7 @@ const FadeTransitionGroup: React.FC<FadeTransitionProps & WithStyles<typeof styl
   };
 
   return (
-    <TransitionGroup
+    <PickersFadeTransitionGroupRoot
       className={clsx(classes.root, className)}
       childFactory={(element) =>
         React.cloneElement(element, {
@@ -85,10 +90,8 @@ const FadeTransitionGroup: React.FC<FadeTransitionProps & WithStyles<typeof styl
       >
         {children}
       </CSSTransition>
-    </TransitionGroup>
+    </PickersFadeTransitionGroupRoot>
   );
 };
 
-export default withStyles(styles, { name: 'PrivatePickersFadeTransitionGroup' })(
-  FadeTransitionGroup,
-);
+export default PickersFadeTransitionGroup;

packages/material-ui-lab/src/CalendarPicker/PickersSlideTransition.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import { generateUtilityClasses } from '@material-ui/unstyled';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { TransitionGroupProps } from 'react-transition-group/TransitionGroup';
 
 export type SlideDirection = 'right' | 'left';
 export interface SlideTransitionProps extends Omit<CSSTransitionProps, 'timeout'> {
@@ -13,81 +15,81 @@ export interface SlideTransitionProps extends Omit<CSSTransitionProps, 'timeout'
   transKey: React.Key;
 }
 
-export type PickersSlideTransitionClassKey =
-  | 'root'
-  | 'slideEnter-left'
-  | 'slideEnter-right'
-  | 'slideEnterActive'
-  | 'slideEnterActive'
-  | 'slideExit'
-  | 'slideExitActiveLeft-left'
-  | 'slideExitActiveLeft-right';
+const classes = generateUtilityClasses('PrivatePickersSlideTransition', [
+  'root',
+  'slideEnter-left',
+  'slideEnter-right',
+  'slideEnterActive',
+  'slideEnterActive',
+  'slideExit',
+  'slideExitActiveLeft-left',
+  'slideExitActiveLeft-right',
+]);
 
 export const slideAnimationDuration = 350;
-export const styles: MuiStyles<PickersSlideTransitionClassKey> = (
-  theme,
-): StyleRules<PickersSlideTransitionClassKey> => {
+
+const PickersSlideTransitionRoot = styled(
+  TransitionGroup,
+  {},
+  { skipSx: true },
+)<TransitionGroupProps>(({ theme }) => {
   const slideTransition = theme.transitions.create('transform', {
     duration: slideAnimationDuration,
     easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)',
   });
-
   return {
-    root: {
-      display: 'block',
-      position: 'relative',
-      overflowX: 'hidden',
-      '& > *': {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        left: 0,
-      },
+    display: 'block',
+    position: 'relative',
+    overflowX: 'hidden',
+    '& > *': {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      left: 0,
     },
-    'slideEnter-left': {
+    [`& .${classes['slideEnter-left']}`]: {
       willChange: 'transform',
       transform: 'translate(100%)',
       zIndex: 1,
     },
-    'slideEnter-right': {
+    [`& .${classes['slideEnter-right']}`]: {
       willChange: 'transform',
       transform: 'translate(-100%)',
       zIndex: 1,
     },
-    slideEnterActive: {
+    [`& .${classes.slideEnterActive}`]: {
       transform: 'translate(0%)',
       transition: slideTransition,
     },
-    slideExit: {
+    [`& .${classes.slideExit}`]: {
       transform: 'translate(0%)',
     },
-    'slideExitActiveLeft-left': {
+    [`& .${classes['slideExitActiveLeft-left']}`]: {
       willChange: 'transform',
       transform: 'translate(-100%)',
       transition: slideTransition,
       zIndex: 0,
     },
-    'slideExitActiveLeft-right': {
+    [`& .${classes['slideExitActiveLeft-right']}`]: {
       willChange: 'transform',
       transform: 'translate(100%)',
       transition: slideTransition,
       zIndex: 0,
     },
   };
-};
+});
 
 /**
  * @ignore - do not document.
  */
-const SlideTransition: React.FC<SlideTransitionProps & WithStyles<typeof styles>> = ({
+const PickersSlideTransition = ({
   children,
-  classes,
   className,
   reduceAnimations,
   slideDirection,
   transKey,
   ...other
-}) => {
+}: SlideTransitionProps) => {
   if (reduceAnimations) {
     return <div className={clsx(classes.root, className)}>{children}</div>;
   }
@@ -105,7 +107,7 @@ const SlideTransition: React.FC<SlideTransitionProps & WithStyles<typeof styles>
   };
 
   return (
-    <TransitionGroup
+    <PickersSlideTransitionRoot
       className={clsx(classes.root, className)}
       childFactory={(element) =>
         React.cloneElement(element, {
@@ -123,8 +125,8 @@ const SlideTransition: React.FC<SlideTransitionProps & WithStyles<typeof styles>
       >
         {children}
       </CSSTransition>
-    </TransitionGroup>
+    </PickersSlideTransitionRoot>
   );
 };
 
-export default withStyles(styles, { name: 'PrivatePickersSlideTransition' })(SlideTransition);
+export default PickersSlideTransition;