[core] Normalize transitions child style implementation

mui · Feb 9, 2019 · af3d812 · af3d812
1 parent 5082f2f
commit af3d812
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 47 deletions.
diff --git a/packages/material-ui/src/Fade/Fade.js b/packages/material-ui/src/Fade/Fade.js
@@ -57,24 +57,22 @@ class Fade extends React.Component {
   render() {
     const { children, onEnter, onExit, style: styleProp, theme, ...other } = this.props;
 
-    const style = {
-      ...styleProp,
-      ...children.props.style,
-    };
-
     return (
       <Transition appear onEnter={this.handleEnter} onExit={this.handleExit} {...other}>
-        {(state, childProps) =>
-          React.cloneElement(children, {
-            style: {
-              opacity: 0,
-              ...styles[state],
-              ...style,
-            },
-            'aria-hidden': state === 'exited',
+        {(state, childProps) => {
+          const style = {
+            opacity: 0,
+            ...styles[state],
+            ...styleProp,
+            ...childProps.style,
+          };
+
+          return React.cloneElement(children, {
             ...childProps,
-          })
-        }
+            'aria-hidden': state === 'exited',
+            style,
+          });
+        }}
       </Transition>
     );
   }

diff --git a/packages/material-ui/src/Grow/Grow.js b/packages/material-ui/src/Grow/Grow.js
@@ -108,11 +108,6 @@ class Grow extends React.Component {
   render() {
     const { children, onEnter, onExit, style: styleProp, theme, timeout, ...other } = this.props;
 
-    const style = {
-      ...styleProp,
-      ...(React.isValidElement(children) ? children.props.style : {}),
-    };
-
     return (
       <Transition
         appear
@@ -122,18 +117,21 @@ class Grow extends React.Component {
         timeout={timeout === 'auto' ? null : timeout}
         {...other}
       >
-        {(state, childProps) =>
-          React.cloneElement(children, {
-            'aria-hidden': state === 'exited',
-            style: {
-              opacity: 0,
-              transform: getScale(0.75),
-              ...styles[state],
-              ...style,
-            },
+        {(state, childProps) => {
+          const style = {
+            opacity: 0,
+            transform: getScale(0.75),
+            ...styles[state],
+            ...styleProp,
+            ...children.props.style,
+          };
+
+          return React.cloneElement(children, {
             ...childProps,
-          })
-        }
+            'aria-hidden': state === 'exited',
+            style,
+          });
+        }}
       </Transition>
     );
   }

diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js
@@ -209,14 +209,15 @@ class Slide extends React.Component {
           }}
           {...other}
         >
-          {state => {
+          {(state, childProps) => {
             const style = {
               visibility: state === 'exited' ? 'hidden' : undefined,
               ...styleProp,
               ...children.props.style,
             };
 
             return React.cloneElement(children, {
+              ...childProps,
               'aria-hidden': state === 'exited',
               style,
             });

diff --git a/packages/material-ui/src/Zoom/Zoom.js b/packages/material-ui/src/Zoom/Zoom.js
@@ -56,24 +56,22 @@ class Zoom extends React.Component {
   render() {
     const { children, onEnter, onExit, style: styleProp, theme, ...other } = this.props;
 
-    const style = {
-      ...styleProp,
-      ...children.props.style,
-    };
-
     return (
       <Transition appear onEnter={this.handleEnter} onExit={this.handleExit} {...other}>
-        {(state, childProps) =>
-          React.cloneElement(children, {
-            'aria-hidden': state === 'exited',
-            style: {
-              transform: 'scale(0)',
-              ...styles[state],
-              ...style,
-            },
+        {(state, childProps) => {
+          const style = {
+            transform: 'scale(0)',
+            ...styles[state],
+            ...styleProp,
+            ...children.props.style,
+          };
+
+          return React.cloneElement(children, {
             ...childProps,
-          })
-        }
+            'aria-hidden': state === 'exited',
+            style,
+          });
+        }}
       </Transition>
     );
   }

diff --git a/packages/material-ui/src/Zoom/Zoom.test.js b/packages/material-ui/src/Zoom/Zoom.test.js
@@ -87,6 +87,7 @@ describe('<Zoom />', () => {
       );
       assert.deepEqual(wrapper.find('div').props().style, {
         transform: 'scale(0)',
+        visibility: 'hidden',
       });
     });
 
@@ -98,6 +99,7 @@ describe('<Zoom />', () => {
       );
       assert.deepEqual(wrapper.find('div').props().style, {
         transform: 'scale(0)',
+        visibility: 'hidden',
       });
     });
   });