Demonstrate proposal for moving getStyles() function

Signed-off-by: Neil Gabbadon <[email protected]>
mui · Feb 4, 2016 · 9b8434e · 9b8434e
1 parent b218c2e
commit 9b8434e
Showing 1 changed file with 32 additions and 32 deletions.
diff --git a/src/toolbar/toolbar.jsx b/src/toolbar/toolbar.jsx
@@ -1,7 +1,28 @@
 import React from 'react';
-import StylePropable from '../mixins/style-propable';
 import getMuiTheme from '../styles/getMuiTheme';
 
+function getStyles(props, state) {
+  const {
+    noGutter,
+  } = props;
+
+  const {
+    baseTheme,
+    toolbar,
+  } = state.muiTheme;
+
+  return {
+    root: {
+      boxSizing: 'border-box',
+      WebkitTapHighlightColor: 'rgba(0,0,0,0)',
+      backgroundColor: toolbar.backgroundColor,
+      height: toolbar.height,
+      width: '100%',
+      padding: noGutter ? 0 : '0px ' + baseTheme.spacing.desktopGutter + 'px',
+    },
+  };
+}
+
 const Toolbar = React.createClass({
 
   propTypes: {
@@ -29,13 +50,11 @@ const Toolbar = React.createClass({
   contextTypes: {
     muiTheme: React.PropTypes.object,
   },
-  //for passing default theme context to children
+
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
-  mixins: [StylePropable],
-
   getDefaultProps() {
     return {
       noGutter: false,
@@ -54,32 +73,10 @@ const Toolbar = 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;
-    this.setState({muiTheme: newMuiTheme});
-  },
-
-  getTheme() {
-    return this.state.muiTheme.toolbar;
-  },
-
-  getSpacing() {
-    return this.state.muiTheme.rawTheme.spacing;
-  },
-
-  getStyles() {
-    return {
-      root: {
-        boxSizing: 'border-box',
-        WebkitTapHighlightColor: 'rgba(0,0,0,0)',
-        backgroundColor: this.getTheme().backgroundColor,
-        height: this.getTheme().height,
-        width: '100%',
-        padding: this.props.noGutter ? 0 : '0px ' + this.getSpacing().desktopGutter + 'px',
-      },
-    };
+    this.setState({
+      muiTheme: nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme,
+    });
   },
 
   render() {
@@ -90,15 +87,18 @@ const Toolbar = React.createClass({
       ...other,
     } = this.props;
 
-    const styles = this.getStyles();
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
+
+    const styles = getStyles(this.props, this.state);
 
     return (
-      <div {...other} className={className} style={this.prepareStyles(styles.root, style)}>
+      <div {...other} className={className} style={prepareStyles(styles.root, style)}>
         {children}
       </div>
     );
   },
-
 });
 
 export default Toolbar;