Remove style-propable from floating-action-button

mui · Feb 9, 2016 · a5a3322 · a5a3322
1 parent ea2001c
commit a5a3322
Showing 1 changed file with 79 additions and 88 deletions.
diff --git a/src/floating-action-button.jsx b/src/floating-action-button.jsx
@@ -1,6 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import StylePropable from './mixins/style-propable';
 import Transitions from './styles/transitions';
 import Colors from './styles/colors';
 import ColorManipulator from './utils/color-manipulator';
@@ -11,6 +9,63 @@ import Children from './utils/children';
 import getMuiTheme from './styles/getMuiTheme';
 import warning from 'warning';
 
+function getStyles(props, state) {
+  const {
+    floatingActionButton,
+  } = state.muiTheme;
+
+  let backgroundColor = props.backgroundColor || floatingActionButton.color;
+  let iconColor = floatingActionButton.iconColor;
+
+  if (props.disabled) {
+    backgroundColor = props.disabledColor || floatingActionButton.disabledColor;
+    iconColor = floatingActionButton.disabledTextColor;
+  } else if (props.secondary) {
+    backgroundColor = floatingActionButton.secondaryColor;
+    iconColor = floatingActionButton.secondaryIconColor;
+  }
+
+  return {
+    root: {
+      transition: Transitions.easeOut(),
+      display: 'inline-block',
+    },
+    container: {
+      backgroundColor,
+      transition: Transitions.easeOut(),
+      position: 'relative',
+      height: floatingActionButton.buttonSize,
+      width: floatingActionButton.buttonSize,
+      padding: 0,
+      overflow: 'hidden',
+      borderRadius: '50%',
+      textAlign: 'center',
+      verticalAlign: 'bottom',
+    },
+    containerWhenMini: {
+      height: floatingActionButton.miniSize,
+      width: floatingActionButton.miniSize,
+    },
+    overlay: {
+      transition: Transitions.easeOut(),
+      top: 0,
+    },
+    overlayWhenHovered: {
+      backgroundColor: ColorManipulator.fade(iconColor, 0.4),
+    },
+    icon: {
+      height: floatingActionButton.buttonSize,
+      lineHeight: `${floatingActionButton.buttonSize}px`,
+      fill: floatingActionButton.iconColor,
+      color: iconColor,
+    },
+    iconWhenMini: {
+      height: floatingActionButton.miniSize,
+      lineHeight: `${floatingActionButton.miniSize}px`,
+    },
+  };
+}
+
 const FloatingActionButton = React.createClass({
 
   propTypes: {
@@ -115,15 +170,10 @@ const FloatingActionButton = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
-  mixins: [
-    StylePropable,
-  ],
-
   getDefaultProps() {
     return {
       disabled: false,
@@ -158,81 +208,18 @@ const FloatingActionButton = React.createClass({
       'icons to FloatingActionButtons.');
   },
 
-  componentWillReceiveProps(newProps, nextContext) {
-    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
-    this.setState({muiTheme: newMuiTheme});
-
-    if (newProps.disabled !== this.props.disabled) {
-      const zDepth = newProps.disabled ? 0 : 2;
+  componentWillReceiveProps(nextProps, nextContext) {
+    const newState = {
+      muiTheme: nextContext.muiTheme || this.state.muiTheme,
+    };
 
-      this.setState({
-        zDepth: zDepth,
-        initialZDepth: zDepth,
-      });
+    if (nextProps.disabled !== this.props.disabled) {
+      const zDepth = nextProps.disabled ? 0 : 2;
+      newState.zDepth = zDepth;
+      newState.initialZDepth = zDepth;
     }
-  },
-
-  _getBackgroundColor() {
-    return this.props.disabled ? ( this.props.disabledColor || this.getTheme().disabledColor) :
-      this.props.backgroundColor ? this.props.backgroundColor :
-      this.props.secondary ? this.getTheme().secondaryColor :
-      this.getTheme().color;
-  },
 
-
-  getTheme() {
-    return this.state.muiTheme.floatingActionButton;
-  },
-
-  _getIconColor() {
-    return this.props.disabled ? this.getTheme().disabledTextColor :
-      (this.props.secondary ? this.getTheme().secondaryIconColor :
-      this.getTheme().iconColor);
-  },
-
-  getStyles() {
-    let themeVariables = this.state.muiTheme.floatingActionButton;
-
-    let styles = {
-      root: {
-        transition: Transitions.easeOut(),
-        display: 'inline-block',
-      },
-      container: {
-        transition: Transitions.easeOut(),
-        position: 'relative',
-        height: themeVariables.buttonSize,
-        width: themeVariables.buttonSize,
-        padding: 0,
-        overflow: 'hidden',
-        backgroundColor: this._getBackgroundColor(),
-        borderRadius: '50%',
-        textAlign: 'center',
-        verticalAlign: 'bottom',
-      },
-      containerWhenMini: {
-        height: themeVariables.miniSize,
-        width: themeVariables.miniSize,
-      },
-      overlay: {
-        transition: Transitions.easeOut(),
-        top: 0,
-      },
-      overlayWhenHovered: {
-        backgroundColor: ColorManipulator.fade(this._getIconColor(), 0.4),
-      },
-      icon: {
-        height: themeVariables.buttonSize,
-        lineHeight: `${themeVariables.buttonSize}px`,
-        fill: themeVariables.iconColor,
-        color: this._getIconColor(),
-      },
-      iconWhenMini: {
-        height: themeVariables.miniSize,
-        lineHeight: `${themeVariables.miniSize}px`,
-      },
-    };
-    return styles;
+    this.setState(newState);
   },
 
   _handleMouseDown(e) {
@@ -276,11 +263,11 @@ const FloatingActionButton = React.createClass({
   _handleKeyboardFocus(e, keyboardFocused) {
     if (keyboardFocused && !this.props.disabled) {
       this.setState({zDepth: this.state.initialZDepth + 1});
-      ReactDOM.findDOMNode(this.refs.overlay).style.backgroundColor =
+      this.refs.overlay.style.backgroundColor =
         ColorManipulator.fade(this.getStyles().icon.color, 0.4);
     } else if (!this.state.hovered) {
       this.setState({zDepth: this.state.initialZDepth});
-      ReactDOM.findDOMNode(this.refs.overlay).style.backgroundColor = 'transparent';
+      this.refs.overlay.style.backgroundColor = 'transparent';
     }
   },
 
@@ -294,14 +281,18 @@ const FloatingActionButton = React.createClass({
       iconClassName,
       ...other} = this.props;
 
-    let styles = this.getStyles();
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
+
+    const styles = getStyles(this.props, this.state);
 
     let iconElement;
     if (iconClassName) {
       iconElement = (
         <FontIcon
           className={iconClassName}
-          style={this.mergeStyles(
+          style={Object.assign({},
             styles.icon,
             mini && styles.iconWhenMini,
             iconStyle)}
@@ -310,7 +301,7 @@ const FloatingActionButton = React.createClass({
     }
 
     let children = Children.extend(this.props.children, {
-      style: this.mergeStyles(
+      style: Object.assign({},
         styles.icon,
         mini && styles.iconWhenMini,
         iconStyle),
@@ -329,7 +320,7 @@ const FloatingActionButton = React.createClass({
     return (
       <Paper
         className={className}
-        style={this.mergeStyles(styles.root, this.props.style)}
+        style={Object.assign(styles.root, this.props.style)}
         zDepth={this.state.zDepth}
         circle={true}
       >
@@ -338,7 +329,7 @@ const FloatingActionButton = React.createClass({
           {...buttonEventHandlers}
           ref="container"
           disabled={disabled}
-          style={this.mergeStyles(
+          style={Object.assign(
             styles.container,
             this.props.mini && styles.containerWhenMini,
             iconStyle
@@ -348,10 +339,10 @@ const FloatingActionButton = React.createClass({
         >
           <div
             ref="overlay"
-            style={this.prepareStyles(
+            style={prepareStyles(Object.assign(
               styles.overlay,
               (this.state.hovered && !this.props.disabled) && styles.overlayWhenHovered
-            )}
+            ))}
           >
             {iconElement}
             {children}