From a5a33220702bc30bd7414537396b343deba0400f Mon Sep 17 00:00:00 2001 From: Neil Gabbadon Date: Tue, 9 Feb 2016 03:17:50 -0500 Subject: [PATCH] Remove style-propable from floating-action-button --- src/floating-action-button.jsx | 167 ++++++++++++++++----------------- 1 file changed, 79 insertions(+), 88 deletions(-) diff --git a/src/floating-action-button.jsx b/src/floating-action-button.jsx index 29893a946c63ea..a5d8499e4c35ed 100644 --- 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 = ( @@ -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({ >
{iconElement} {children}