From ab1e4de1733ba0a2473daf916003039d7da6e529 Mon Sep 17 00:00:00 2001 From: Neil Gabbadon Date: Thu, 4 Feb 2016 17:09:56 -0500 Subject: [PATCH] Removes style-propable mixin from toolbar components Signed-off-by: Neil Gabbadon --- src/toolbar/toolbar-group.jsx | 173 +++++++++++++++--------------- src/toolbar/toolbar-separator.jsx | 61 +++++------ src/toolbar/toolbar-title.jsx | 56 +++++----- src/toolbar/toolbar.jsx | 64 +++++------ 4 files changed, 172 insertions(+), 182 deletions(-) diff --git a/src/toolbar/toolbar-group.jsx b/src/toolbar/toolbar-group.jsx index 871b5eb9e85165..1d23aa9394d0c2 100644 --- a/src/toolbar/toolbar-group.jsx +++ b/src/toolbar/toolbar-group.jsx @@ -1,8 +1,72 @@ import React from 'react'; import Colors from '../styles/colors'; -import StylePropable from '../mixins/style-propable'; import getMuiTheme from '../styles/getMuiTheme'; +function getStyles(props, state) { + const { + firstChild, + float, + lastChild, + } = props; + + const { + baseTheme, + button, + toolbar, + } = state.muiTheme; + + const marginHorizontal = baseTheme.spacing.desktopGutter; + const marginVertical = (toolbar.height - button.height) / 2; + + const styles = { + root: { + float, + position: 'relative', + marginLeft: firstChild ? -marginHorizontal : undefined, + marginRight: lastChild ? -marginHorizontal : undefined, + }, + dropDownMenu: { + root: { + float: 'left', + color: Colors.lightBlack, // removes hover color change, we want to keep it + display: 'inline-block', + marginRight: baseTheme.spacing.desktopGutter, + }, + controlBg: { + backgroundColor: toolbar.menuHoverColor, + borderRadius: 0, + }, + underline: { + display: 'none', + }, + }, + button: { + float: 'left', + margin: marginVertical + 'px ' + marginHorizontal + 'px', + position: 'relative', + }, + icon: { + root: { + float: 'left', + cursor: 'pointer', + color: toolbar.iconColor, + lineHeight: toolbar.height + 'px', + paddingLeft: baseTheme.spacing.desktopGutter, + }, + hover: { + color: Colors.darkBlack, + }, + }, + span: { + float: 'left', + color: toolbar.iconColor, + lineHeight: toolbar.height + 'px', + }, + }; + + return styles; +} + const ToolbarGroup = React.createClass({ propTypes: { /** @@ -42,13 +106,10 @@ const ToolbarGroup = React.createClass({ muiTheme: React.PropTypes.object, }, - //for passing default theme context to children childContextTypes: { muiTheme: React.PropTypes.object, }, - mixins: [StylePropable], - getDefaultProps() { return { firstChild: false, @@ -69,87 +130,20 @@ const ToolbarGroup = React.createClass({ }; }, - //to update theme inside state whenever a new theme is passed down - //from the parent / owner using context componentWillReceiveProps(nextProps, nextContext) { - const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); + this.setState({ + muiTheme: nextContext.muiTheme || this.state.muiTheme, + }); }, - getTheme() { - return this.state.muiTheme.toolbar; + _handleMouseEnterFontIcon: (style) => (e) => { + e.target.style.zIndex = style.hover.zIndex; + e.target.style.color = style.hover.color; }, - getSpacing() { - return this.state.muiTheme.rawTheme.spacing; - }, - - getStyles() { - const { - firstChild, - float, - lastChild, - } = this.props; - - const marginHorizontal = this.getSpacing().desktopGutter; - const marginVertical = (this.getTheme().height - this.state.muiTheme.button.height) / 2; - const styles = { - root: { - float, - position: 'relative', - marginLeft: firstChild ? -marginHorizontal : undefined, - marginRight: lastChild ? -marginHorizontal : undefined, - }, - dropDownMenu: { - root: { - float: 'left', - color: Colors.lightBlack, // removes hover color change, we want to keep it - display: 'inline-block', - marginRight: this.getSpacing().desktopGutter, - }, - controlBg: { - backgroundColor: this.getTheme().menuHoverColor, - borderRadius: 0, - }, - underline: { - display: 'none', - }, - }, - button: { - float: 'left', - margin: marginVertical + 'px ' + marginHorizontal + 'px', - position: 'relative', - }, - icon: { - root: { - float: 'left', - cursor: 'pointer', - color: this.getTheme().iconColor, - lineHeight: this.getTheme().height + 'px', - paddingLeft: this.getSpacing().desktopGutter, - }, - hover: { - color: Colors.darkBlack, - }, - }, - span: { - float: 'left', - color: this.getTheme().iconColor, - lineHeight: this.getTheme().height + 'px', - }, - }; - - return styles; - }, - - _handleMouseEnterFontIcon(e) { - e.target.style.zIndex = this.getStyles().icon.hover.zIndex; - e.target.style.color = this.getStyles().icon.hover.color; - }, - - _handleMouseLeaveFontIcon(e) { + _handleMouseLeaveFontIcon: (style) => (e) => { e.target.style.zIndex = 'auto'; - e.target.style.color = this.getStyles().icon.root.color; + e.target.style.color = style.root.color; }, render() { @@ -160,7 +154,12 @@ const ToolbarGroup = React.createClass({ ...other, } = this.props; - const styles = this.getStyles(); + const { + prepareStyles, + } = this.state.muiTheme; + + const styles = getStyles(this.props, this.state); + const newChildren = React.Children.map(children, currentChild => { if (!currentChild) { return null; @@ -171,25 +170,25 @@ const ToolbarGroup = React.createClass({ switch (currentChild.type.displayName) { case 'DropDownMenu' : return React.cloneElement(currentChild, { - style: this.mergeStyles(styles.dropDownMenu.root, currentChild.props.style), + style: Object.assign({}, styles.dropDownMenu.root, currentChild.props.style), styleControlBg: styles.dropDownMenu.controlBg, styleUnderline: styles.dropDownMenu.underline, }); case 'RaisedButton' : case 'FlatButton' : return React.cloneElement(currentChild, { - style: this.mergeStyles(styles.button, currentChild.props.style), + style: Object.assign({}, styles.button, currentChild.props.style), }); case 'FontIcon' : return React.cloneElement(currentChild, { - style: this.mergeStyles(styles.icon.root, currentChild.props.style), - onMouseEnter: this._handleMouseEnterFontIcon, - onMouseLeave: this._handleMouseLeaveFontIcon, + style: Object.assign({}, styles.icon.root, currentChild.props.style), + onMouseEnter: this._handleMouseEnterFontIcon(styles.icon), + onMouseLeave: this._handleMouseLeaveFontIcon(styles.icon), }); case 'ToolbarSeparator' : case 'ToolbarTitle' : return React.cloneElement(currentChild, { - style: this.mergeStyles(styles.span, currentChild.props.style), + style: Object.assign({}, styles.span, currentChild.props.style), }); default: return currentChild; @@ -197,7 +196,7 @@ const ToolbarGroup = React.createClass({ }, this); return ( -
+
{newChildren}
); diff --git a/src/toolbar/toolbar-separator.jsx b/src/toolbar/toolbar-separator.jsx index 3bc1f00b3dbc0a..662b15fefcc0f0 100644 --- a/src/toolbar/toolbar-separator.jsx +++ b/src/toolbar/toolbar-separator.jsx @@ -1,7 +1,25 @@ import React from 'react'; -import StylePropable from '../mixins/style-propable'; import getMuiTheme from '../styles/getMuiTheme'; +function getStyles(props, state) { + const { + baseTheme, + toolbar, + } = state.muiTheme; + + return { + root: { + backgroundColor: toolbar.separatorColor, + display: 'inline-block', + height: baseTheme.spacing.desktopGutterMore, + marginLeft: baseTheme.spacing.desktopGutter, + position: 'relative', + top: ((toolbar.height - baseTheme.spacing.desktopGutterMore) / 2), + width: 1, + }, + }; +} + const ToolbarSeparator = React.createClass({ propTypes: { @@ -20,13 +38,10 @@ const ToolbarSeparator = React.createClass({ muiTheme: React.PropTypes.object, }, - //for passing default theme context to children childContextTypes: { muiTheme: React.PropTypes.object, }, - mixins: [StylePropable], - getInitialState() { return { muiTheme: this.context.muiTheme || getMuiTheme(), @@ -39,47 +54,27 @@ const ToolbarSeparator = React.createClass({ }; }, - //to update theme inside state whenever a new theme is passed down - //from the parent / owner using context componentWillReceiveProps(nextProps, nextContext) { - const 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: { - backgroundColor: this.getTheme().separatorColor, - display: 'inline-block', - height: this.getSpacing().desktopGutterMore, - marginLeft: this.getSpacing().desktopGutter, - position: 'relative', - top: ((this.getTheme().height - this.getSpacing().desktopGutterMore) / 2), - width: 1, - }, - }; + this.setState({ + muiTheme: nextContext.muiTheme || this.state.muiTheme, + }); }, render() { - const { className, style, ...other, } = this.props; - const styles = this.getStyles(); + const { + prepareStyles, + } = this.state.muiTheme; + + const styles = getStyles(this.props, this.state); return ( - + ); }, diff --git a/src/toolbar/toolbar-title.jsx b/src/toolbar/toolbar-title.jsx index 333e9b69cf1ef8..a343240c272a17 100644 --- a/src/toolbar/toolbar-title.jsx +++ b/src/toolbar/toolbar-title.jsx @@ -1,7 +1,23 @@ import React from 'react'; -import StylePropable from '../mixins/style-propable'; import getMuiTheme from '../styles/getMuiTheme'; +function getStyles(props, state) { + const { + baseTheme, + toolbar, + } = state.muiTheme; + + return { + root: { + paddingRight: baseTheme.spacing.desktopGutterLess, + lineHeight: toolbar.height + 'px', + fontSize: toolbar.titleFontSize + 'px', + display: 'inline-block', + position: 'relative', + }, + }; +} + const ToolbarTitle = React.createClass({ propTypes: { @@ -25,13 +41,10 @@ const ToolbarTitle = React.createClass({ muiTheme: React.PropTypes.object, }, - //for passing default theme context to children childContextTypes: { muiTheme: React.PropTypes.object, }, - mixins: [StylePropable], - getInitialState() { return { muiTheme: this.context.muiTheme || getMuiTheme(), @@ -44,31 +57,10 @@ const ToolbarTitle = React.createClass({ }; }, - //to update theme inside state whenever a new theme is passed down - //from the parent / owner using context componentWillReceiveProps(nextProps, nextContext) { - const 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: { - paddingRight: this.getSpacing().desktopGutterLess, - lineHeight: this.getTheme().height + 'px', - fontSize: this.getTheme().titleFontSize + 'px', - display: 'inline-block', - position: 'relative', - }, - }; + this.setState({ + muiTheme: nextContext.muiTheme || this.state.muiTheme, + }); }, render() { @@ -79,10 +71,14 @@ const ToolbarTitle = React.createClass({ ...other, } = this.props; - const styles = this.getStyles(); + const { + prepareStyles, + } = this.state.muiTheme; + + const styles = getStyles(this.props, this.state); return ( - + {text} ); diff --git a/src/toolbar/toolbar.jsx b/src/toolbar/toolbar.jsx index 87961f63438bce..622646689374f7 100644 --- 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 || 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 ( -
+
{children}
); }, - }); export default Toolbar;