Merge pull request #2909 from newoga/#2852-transition-groups

[Core] Remove style-propable mixin from transition-groups
mui · Feb 4, 2016 · fc57430 · fc57430
2 parents 70b4e0f + 91c12ea
commit fc57430
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 50 deletions.
diff --git a/src/transition-groups/scale-in-child.jsx b/src/transition-groups/scale-in-child.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
-import StylePropable from '../mixins/style-propable';
 import autoPrefix from '../styles/auto-prefix';
 import Transitions from '../styles/transitions';
 import getMuiTheme from '../styles/getMuiTheme';
 
-
 const ScaleInChild = React.createClass({
 
   propTypes: {
@@ -25,14 +23,12 @@ const ScaleInChild = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
   mixins: [
     PureRenderMixin,
-    StylePropable,
   ],
 
   getDefaultProps: function() {
@@ -55,10 +51,8 @@ const ScaleInChild = React.createClass({
     };
   },
 
-  //to update theme inside state whenever a new theme is passed down
-  //from the parent / owner using context
   componentWillReceiveProps(nextProps, nextContext) {
-    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
+    const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
     this.setState({muiTheme: newMuiTheme});
   },
 
@@ -79,7 +73,7 @@ const ScaleInChild = React.createClass({
   },
 
   componentWillLeave(callback) {
-    let style = ReactDOM.findDOMNode(this).style;
+    const style = ReactDOM.findDOMNode(this).style;
 
     style.opacity = '0';
     autoPrefix.set(style, 'transform', 'scale(' + this.props.minScale + ')', this.state.muiTheme);
@@ -90,14 +84,14 @@ const ScaleInChild = React.createClass({
   },
 
   _animate() {
-    let style = ReactDOM.findDOMNode(this).style;
+    const style = ReactDOM.findDOMNode(this).style;
 
     style.opacity = '1';
     autoPrefix.set(style, 'transform', 'scale(' + this.props.maxScale + ')', this.state.muiTheme);
   },
 
   _initializeAnimation(callback) {
-    let style = ReactDOM.findDOMNode(this).style;
+    const style = ReactDOM.findDOMNode(this).style;
 
     style.opacity = '0';
     autoPrefix.set(style, 'transform', 'scale(0)', this.state.muiTheme);
@@ -115,7 +109,11 @@ const ScaleInChild = React.createClass({
       ...other,
     } = this.props;
 
-    const mergedRootStyles = this.mergeStyles({
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
+
+    const mergedRootStyles = Object.assign({}, {
       position: 'absolute',
       height: '100%',
       width: '100%',
@@ -125,7 +123,7 @@ const ScaleInChild = React.createClass({
     }, style);
 
     return (
-      <div {...other} style={this.prepareStyles(mergedRootStyles)}>
+      <div {...other} style={prepareStyles(mergedRootStyles)}>
         {children}
       </div>
     );

diff --git a/src/transition-groups/scale-in.jsx b/src/transition-groups/scale-in.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import ReactTransitionGroup from 'react-addons-transition-group';
-import StylePropable from '../mixins/style-propable';
 import ScaleInChild from './scale-in-child';
 import getMuiTheme from '../styles/getMuiTheme';
 
@@ -24,14 +23,12 @@ const ScaleIn = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
   mixins: [
     PureRenderMixin,
-    StylePropable,
   ],
 
   getDefaultProps() {
@@ -52,10 +49,8 @@ const ScaleIn = React.createClass({
     };
   },
 
-  //to update theme inside state whenever a new theme is passed down
-  //from the parent / owner using context
   componentWillReceiveProps(nextProps, nextContext) {
-    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
+    const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
     this.setState({muiTheme: newMuiTheme});
   },
 
@@ -70,7 +65,11 @@ const ScaleIn = React.createClass({
       ...other,
     } = this.props;
 
-    const mergedRootStyles = this.mergeStyles({
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
+
+    const mergedRootStyles = Object.assign({}, {
       position: 'relative',
       overflow: 'hidden',
       height: '100%',
@@ -93,7 +92,7 @@ const ScaleIn = React.createClass({
     return (
       <ReactTransitionGroup
         {...other}
-        style={this.prepareStyles(mergedRootStyles)}
+        style={prepareStyles(mergedRootStyles)}
         component="div"
       >
         {newChildren}

diff --git a/src/transition-groups/slide-in-child.jsx b/src/transition-groups/slide-in-child.jsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import StylePropable from '../mixins/style-propable';
 import autoPrefix from '../styles/auto-prefix';
 import Transitions from '../styles/transitions';
 import getMuiTheme from '../styles/getMuiTheme';
 
-
 const SlideInChild = React.createClass({
 
   propTypes: {
@@ -26,13 +24,10 @@ const SlideInChild = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
-  mixins: [StylePropable],
-
   getDefaultProps: function() {
     return {
       enterDelay: 0,
@@ -51,18 +46,16 @@ const SlideInChild = React.createClass({
     };
   },
 
-  //to update theme inside state whenever a new theme is passed down
-  //from the parent / owner using context
   componentWillReceiveProps(nextProps, nextContext) {
-    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
+    const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
     this.setState({muiTheme: newMuiTheme});
   },
 
   componentWillEnter(callback) {
-    let style = ReactDOM.findDOMNode(this).style;
-    let x = this.props.direction === 'left' ? '100%' :
+    const style = ReactDOM.findDOMNode(this).style;
+    const x = this.props.direction === 'left' ? '100%' :
       this.props.direction === 'right' ? '-100%' : '0';
-    let y = this.props.direction === 'up' ? '100%' :
+    const y = this.props.direction === 'up' ? '100%' :
       this.props.direction === 'down' ? '-100%' : '0';
 
     style.opacity = '0';
@@ -74,17 +67,17 @@ const SlideInChild = React.createClass({
   },
 
   componentDidEnter() {
-    let style = ReactDOM.findDOMNode(this).style;
+    const style = ReactDOM.findDOMNode(this).style;
     style.opacity = '1';
     autoPrefix.set(style, 'transform', 'translate3d(0,0,0)', this.state.muiTheme);
   },
 
   componentWillLeave(callback) {
-    let style = ReactDOM.findDOMNode(this).style;
-    let direction = this.props.getLeaveDirection();
-    let x = direction === 'left' ? '-100%' :
+    const style = ReactDOM.findDOMNode(this).style;
+    const direction = this.props.getLeaveDirection();
+    const x = direction === 'left' ? '-100%' :
       direction === 'right' ? '100%' : '0';
-    let y = direction === 'up' ? '-100%' :
+    const y = direction === 'up' ? '-100%' :
       direction === 'down' ? '100%' : '0';
 
     style.opacity = '0';
@@ -96,15 +89,19 @@ const SlideInChild = React.createClass({
   },
 
   render() {
-    let {
+    const {
       children,
       enterDelay,
       getLeaveDirection,
       style,
       ...other,
     } = this.props;
 
-    let mergedRootStyles = this.mergeStyles({
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
+
+    const mergedRootStyles = Object.assign({}, {
       position: 'absolute',
       height: '100%',
       width: '100%',
@@ -114,7 +111,7 @@ const SlideInChild = React.createClass({
     }, style);
 
     return (
-      <div {...other} style={this.prepareStyles(mergedRootStyles)}>
+      <div {...other} style={prepareStyles(mergedRootStyles)}>
         {children}
       </div>
     );

diff --git a/src/transition-groups/slide-in.jsx b/src/transition-groups/slide-in.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactTransitionGroup from 'react-addons-transition-group';
-import StylePropable from '../mixins/style-propable';
 import SlideInChild from './slide-in-child';
 import getMuiTheme from '../styles/getMuiTheme';
 
@@ -22,13 +21,10 @@ const SlideIn = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
-  mixins: [StylePropable],
-
   getDefaultProps() {
     return {
       enterDelay: 0,
@@ -48,10 +44,8 @@ const SlideIn = React.createClass({
     };
   },
 
-  //to update theme inside state whenever a new theme is passed down
-  //from the parent / owner using context
   componentWillReceiveProps(nextProps, nextContext) {
-    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
+    const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
     this.setState({muiTheme: newMuiTheme});
   },
 
@@ -60,7 +54,7 @@ const SlideIn = React.createClass({
   },
 
   render() {
-    let {
+    const {
       enterDelay,
       children,
       childStyle,
@@ -69,13 +63,17 @@ const SlideIn = React.createClass({
       ...other,
     } = this.props;
 
-    let mergedRootStyles = this.mergeStyles({
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
+
+    const mergedRootStyles = Object.assign({}, {
       position: 'relative',
       overflow: 'hidden',
       height: '100%',
     }, style);
 
-    let newChildren = React.Children.map(children, (child) => {
+    const newChildren = React.Children.map(children, (child) => {
       return (
         <SlideInChild
           key={child.key}
@@ -92,7 +90,7 @@ const SlideIn = React.createClass({
     return (
       <ReactTransitionGroup
         {...other}
-        style={this.prepareStyles(mergedRootStyles)}
+        style={prepareStyles(mergedRootStyles)}
         component="div"
       >
         {newChildren}