Remove style-propable from icon-button

mui · Feb 8, 2016 · 7357039 · 7357039
1 parent 484f038
commit 7357039
Showing 1 changed file with 45 additions and 52 deletions.
diff --git a/src/icon-button.jsx b/src/icon-button.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import StylePropable from './mixins/style-propable';
 import ContextPure from './mixins/context-pure';
 import Transitions from './styles/transitions';
 import PropTypes from './utils/prop-types';
@@ -9,6 +8,42 @@ import Tooltip from './tooltip';
 import Children from './utils/children';
 import getMuiTheme from './styles/getMuiTheme';
 
+function getStyles(props, state) {
+  const {
+    baseTheme,
+  } = state.muiTheme;
+
+  return {
+    root: {
+      position: 'relative',
+      boxSizing: 'border-box',
+      transition: Transitions.easeOut(),
+      padding: baseTheme.spacing.iconSize / 2,
+      width: baseTheme.spacing.iconSize * 2,
+      height: baseTheme.spacing.iconSize * 2,
+      fontSize: 0,
+    },
+    tooltip: {
+      boxSizing: 'border-box',
+    },
+    icon: {
+      color: baseTheme.palette.textColor,
+      fill: baseTheme.palette.textColor,
+    },
+    overlay: {
+      position: 'relative',
+      top: 0,
+      width: '100%',
+      height: '100%',
+      background: baseTheme.palette.disabledColor,
+    },
+    disabled: {
+      color: baseTheme.palette.disabledColor,
+      fill: baseTheme.palette.disabledColor,
+    },
+  };
+}
+
 const IconButton = React.createClass({
 
   propTypes: {
@@ -102,7 +137,6 @@ const IconButton = React.createClass({
   },
 
   mixins: [
-    StylePropable,
     ContextPure,
   ],
 
@@ -149,51 +183,10 @@ const IconButton = 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});
-  },
-
-  getStyles() {
-    const {
-      iconSize,
-      textColor,
-      disabledColor,
-    } = this.constructor.getRelevantContextKeys(this.state.muiTheme);
-
-    let styles = {
-      root: {
-        position: 'relative',
-        boxSizing: 'border-box',
-        transition: Transitions.easeOut(),
-        padding: iconSize / 2,
-        width: iconSize * 2,
-        height: iconSize * 2,
-        fontSize: 0,
-      },
-      tooltip: {
-        boxSizing: 'border-box',
-      },
-      icon: {
-        color: textColor,
-        fill: textColor,
-      },
-      overlay: {
-        position: 'relative',
-        top: 0,
-        width: '100%',
-        height: '100%',
-        background: disabledColor,
-      },
-      disabled: {
-        color: disabledColor,
-        fill: disabledColor,
-      },
-    };
-
-    return styles;
+    this.setState({
+      muiTheme: nextContext.muiTheme || this.state.muiTheme,
+    });
   },
 
   setKeyboardFocus() {
@@ -253,7 +246,7 @@ const IconButton = React.createClass({
     } = this.props;
     let fonticon;
 
-    let styles = this.getStyles();
+    const styles = getStyles(this.props, this.state);
     let tooltipPosition = this.props.tooltipPosition.split('-');
 
     let tooltipElement = tooltip ? (
@@ -262,7 +255,7 @@ const IconButton = React.createClass({
         label={tooltip}
         show={this.state.tooltipShown}
         touch={touch}
-        style={this.mergeStyles(styles.tooltip, this.props.tooltipStyles)}
+        style={Object.assign(styles.tooltip, this.props.tooltipStyles)}
         verticalPosition={tooltipPosition[0]}
         horizontalPosition={tooltipPosition[1]}
       />
@@ -278,9 +271,9 @@ const IconButton = React.createClass({
         <FontIcon
           className={iconClassName}
           hoverColor={disabled ? null : iconHoverColor}
-          style={this.mergeStyles(
+          style={Object.assign(
             styles.icon,
-            disabled ? styles.disabled : {},
+            disabled && styles.disabled,
             iconStyleFontIcon
           )}
         >
@@ -289,15 +282,15 @@ const IconButton = React.createClass({
       );
     }
 
-    let childrenStyle = disabled ? this.mergeStyles(iconStyle, styles.disabled) : iconStyle;
+    let childrenStyle = disabled ? Object.assign({}, iconStyle, styles.disabled) : iconStyle;
 
     return (
       <EnhancedButton
         {...other}
         ref="button"
         centerRipple={true}
         disabled={disabled}
-        style={this.mergeStyles(styles.root, this.props.style)}
+        style={Object.assign(styles.root, this.props.style)}
         onBlur={this._handleBlur}
         onFocus={this._handleFocus}
         onMouseLeave={this._handleMouseLeave}