[transitions] Improve the style override logic

mui · Jan 13, 2018 · 17d5bd3 · 17d5bd3
1 parent 1302c96
commit 17d5bd3
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 23 deletions.
diff --git a/src/transitions/Fade.js b/src/transitions/Fade.js
@@ -61,16 +61,34 @@ class Fade extends React.Component {
   };
 
   render() {
-    const { appear, children, onEnter, onEntering, onExit, theme, ...other } = this.props;
+    const {
+      appear,
+      children,
+      onEnter,
+      onEntering,
+      onExit,
+      style: styleProp,
+      theme,
+      ...other
+    } = this.props;
+
+    let style = {};
 
     // For server side rendering.
-    const styleServer =
-      !this.props.in && !this.state.mounted && appear ? { style: { opacity: '0' } } : null;
+    if (!this.props.in && !this.state.mounted && appear) {
+      style.opacity = '0';
+    }
+
+    style = {
+      ...style,
+      ...styleProp,
+      ...(React.isValidElement(children) ? children.props.style : {}),
+    };
 
     return (
       <Transition
         appear={appear}
-        {...styleServer}
+        style={style}
         onEnter={this.handleEnter}
         onEntering={this.handleEntering}
         onExit={this.handleExit}

diff --git a/src/transitions/Fade.spec.js b/src/transitions/Fade.spec.js
@@ -88,7 +88,7 @@ describe('<Fade />', () => {
           <div>Foo</div>
         </Fade>,
       );
-      assert.equal(wrapper.find(Transition).props().style, undefined);
+      assert.deepEqual(wrapper.find(Transition).props().style, {});
     });
   });
 });
diff --git a/src/transitions/Grow.js b/src/transitions/Grow.js
@@ -104,14 +104,25 @@ class Grow extends React.Component {
       onEnter,
       onEntering,
       onExit,
+      style: styleProp,
       theme,
       timeout,
       transitionClasses = {},
       ...other
     } = this.props;
 
+    let style = {};
+
     // For server side rendering.
-    const styleServer = !this.props.in || appear ? { style: { opacity: '0' } } : null;
+    if (!this.props.in || appear) {
+      style.opacity = '0';
+    }
+
+    style = {
+      ...style,
+      ...styleProp,
+      ...(React.isValidElement(children) ? children.props.style : {}),
+    };
 
     return (
       <CSSTransition
@@ -121,7 +132,7 @@ class Grow extends React.Component {
         onExit={this.handleExit}
         addEndListener={this.addEndListener}
         appear={appear}
-        {...styleServer}
+        style={style}
         timeout={timeout === 'auto' ? null : timeout}
         {...other}
       >

diff --git a/src/transitions/Slide.js b/src/transitions/Slide.js
@@ -173,13 +173,31 @@ class Slide extends React.Component {
   };
 
   render() {
-    const { children, onEnter, onEntering, onExit, onExited, theme, ...other } = this.props;
+    const {
+      children,
+      onEnter,
+      onEntering,
+      onExit,
+      onExited,
+      style: styleProp,
+      theme,
+      ...other
+    } = this.props;
+
+    let style = {};
 
     // We use this state to handle the server-side rendering.
     // We don't know the width of the children ahead of time.
     // We need to render it.
-    const styleServer =
-      !this.props.in && !this.state.mounted ? { style: { visibility: 'hidden' } } : null;
+    if (!this.props.in && !this.state.mounted) {
+      style.visibility = 'hidden';
+    }
+
+    style = {
+      ...style,
+      ...styleProp,
+      ...(React.isValidElement(children) ? children.props.style : {}),
+    };
 
     return (
       <EventListener target="window" onResize={this.handleResize}>
@@ -189,7 +207,7 @@ class Slide extends React.Component {
           onExit={this.handleExit}
           onExited={this.handleExited}
           appear
-          {...styleServer}
+          style={style}
           ref={node => {
             this.transition = node;
           }}

diff --git a/src/transitions/Slide.spec.js b/src/transitions/Slide.spec.js
@@ -35,20 +35,24 @@ describe('<Slide />', () => {
   });
 
   it('should not override children styles', () => {
-    const style = { color: 'blue' };
-    const wrapper = shallow(
-      <Slide {...defaultProps}>
-        <div style={style} />
-      </Slide>,
+    const wrapper = mount(
+      <SlideNaked
+        {...defaultProps}
+        style={{ color: 'red', backgroundColor: 'yellow' }}
+        theme={createMuiTheme()}
+      >
+        <div style={{ color: 'blue' }} />
+      </SlideNaked>,
     );
-    assert.strictEqual(wrapper.name(), 'EventListener');
-    assert.strictEqual(wrapper.childAt(0).name(), 'Transition');
     assert.deepEqual(
       wrapper
         .childAt(0)
         .childAt(0)
         .props().style,
-      style,
+      {
+        backgroundColor: 'yellow',
+        color: 'blue',
+      },
     );
   });
 

diff --git a/src/transitions/Zoom.js b/src/transitions/Zoom.js
@@ -69,18 +69,28 @@ class Zoom extends React.Component {
       onEnter,
       onEntering,
       onExit,
+      style: styleProp,
       theme,
       ...other
     } = this.props;
 
+    let style = {};
+
     // For server side rendering.
-    const styleServer =
-      !this.props.in && !this.state.mounted && appear ? { style: { transform: 'scale(0)' } } : null;
+    if (!this.props.in && !this.state.mounted && appear) {
+      style.transform = 'scale(0)';
+    }
+
+    style = {
+      ...style,
+      ...styleProp,
+      ...(React.isValidElement(children) ? children.props.style : {}),
+    };
 
     return (
       <Transition
         appear={appear}
-        {...styleServer}
+        style={style}
         onEnter={this.handleEnter}
         onEntering={this.handleEntering}
         onExit={this.handleExit}

diff --git a/src/transitions/Zoom.spec.js b/src/transitions/Zoom.spec.js
@@ -100,7 +100,7 @@ describe('<Zoom />', () => {
           <div>Foo</div>
         </Zoom>,
       );
-      assert.equal(wrapper.find(Transition).props().style, undefined);
+      assert.deepEqual(wrapper.find(Transition).props().style, {});
     });
   });
 });