diff --git a/src/menus/icon-menu.jsx b/src/menus/icon-menu.jsx index c0ea31eaecce75..8b7ccdedc1da4d 100644 --- a/src/menus/icon-menu.jsx +++ b/src/menus/icon-menu.jsx @@ -1,6 +1,5 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import StylePropable from '../mixins/style-propable'; import Events from '../utils/events'; import PropTypes from '../utils/prop-types'; import Menu from '../menus/menu'; @@ -120,15 +119,10 @@ const IconMenu = React.createClass({ muiTheme: React.PropTypes.object, }, - //for passing default theme context to children childContextTypes: { muiTheme: React.PropTypes.object, }, - mixins: [ - StylePropable, - ], - getDefaultProps() { return { open: null, @@ -167,11 +161,10 @@ const IconMenu = 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}); + this.setState({ + muiTheme: nextContext.muiTheme || this.state.muiTheme, + }); if (nextProps.open === true || nextProps.open === false) { this.setState({open: nextProps.open}); @@ -260,6 +253,10 @@ const IconMenu = React.createClass({ ...other, } = this.props; + const { + prepareStyles, + } = this.state.muiTheme; + const {open, anchorEl} = this.state; let styles = { @@ -273,12 +270,12 @@ const IconMenu = React.createClass({ }, }; - let mergedRootStyles = this.mergeStyles(styles.root, style); - let mergedMenuStyles = this.mergeStyles(styles.menu, menuStyle); + let mergedRootStyles = Object.assign(styles.root, style); + let mergedMenuStyles = Object.assign(styles.menu, menuStyle); let iconButton = React.cloneElement(iconButtonElement, { onKeyboardFocus: this.props.onKeyboardFocus, - iconStyle: this.mergeStyles(iconStyle, iconButtonElement.props.iconStyle), + iconStyle: Object.assign(iconStyle, iconButtonElement.props.iconStyle), onTouchTap: (e) => { this.open(Events.isKeyboard(e) ? 'keyboard' : 'iconTap', e); if (iconButtonElement.props.onTouchTap) iconButtonElement.props.onTouchTap(e); @@ -308,7 +305,7 @@ const IconMenu = React.createClass({ onMouseEnter={onMouseEnter} onMouseUp={onMouseUp} onTouchTap={onTouchTap} - style={this.prepareStyles(mergedRootStyles)} + style={prepareStyles(mergedRootStyles)} > {iconButton} : null; if (leftIconElement && desktop) { - const mergedLeftIconStyles = this.mergeStyles(styles.leftIconDesktop, leftIconElement.props.style); + const mergedLeftIconStyles = Object.assign(styles.leftIconDesktop, leftIconElement.props.style); leftIconElement = React.cloneElement(leftIconElement, {style: mergedLeftIconStyles}); } @@ -266,7 +266,7 @@ const MenuItem = React.createClass({ let rightIconElement; if (rightIcon) { const mergedRightIconStyles = desktop ? - this.mergeStyles(styles.rightIconDesktop, rightIcon.props.style) : rightIcon.props.style; + Object.assign(styles.rightIconDesktop, rightIcon.props.style) : rightIcon.props.style; rightIconElement = React.cloneElement(rightIcon, {style: mergedRightIconStyles}); } @@ -275,11 +275,11 @@ const MenuItem = React.createClass({ if (secondaryText) { const secondaryTextIsAnElement = React.isValidElement(secondaryText); const mergedSecondaryTextStyles = secondaryTextIsAnElement ? - this.mergeStyles(styles.secondaryText, secondaryText.props.style) : null; + Object.assign(styles.secondaryText, secondaryText.props.style) : null; secondaryTextElement = secondaryTextIsAnElement ? React.cloneElement(secondaryText, {style: mergedSecondaryTextStyles}) : -
{secondaryText}
; +
{secondaryText}
; } let childMenuPopover; if (menuItems) { diff --git a/src/menus/menu.jsx b/src/menus/menu.jsx index 8ade41f3bd77a8..9454a4daa4758f 100644 --- a/src/menus/menu.jsx +++ b/src/menus/menu.jsx @@ -1,7 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import update from 'react-addons-update'; -import StylePropable from '../mixins/style-propable'; import ClickAwayable from '../mixins/click-awayable'; import autoPrefix from '../styles/auto-prefix'; import Transitions from '../styles/transitions'; @@ -128,13 +127,11 @@ const Menu = React.createClass({ muiTheme: React.PropTypes.object, }, - //for passing default theme context to children childContextTypes: { muiTheme: React.PropTypes.object, }, mixins: [ - StylePropable, ClickAwayable, ], @@ -182,12 +179,11 @@ const Menu = React.createClass({ componentWillReceiveProps(nextProps, nextContext) { const filteredChildren = this._getFilteredChildren(nextProps.children); let selectedIndex = this._getSelectedIndex(nextProps, filteredChildren); - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; this.setState({ focusIndex: selectedIndex >= 0 ? selectedIndex : 0, keyWidth: nextProps.desktop ? 64 : 56, - muiTheme: newMuiTheme, + muiTheme: nextContext.muiTheme || this.state.muiTheme, }); }, @@ -249,13 +245,10 @@ const Menu = React.createClass({ let selectedChildrenStyles = {}; if (selected) { - selectedChildrenStyles = this.mergeStyles(styles.selectedMenuItem, selectedMenuItemStyle); + selectedChildrenStyles = Object.assign(styles.selectedMenuItem, selectedMenuItemStyle); } - let mergedChildrenStyles = this.mergeStyles( - child.props.style || {}, - selectedChildrenStyles - ); + const mergedChildrenStyles = Object.assign({}, child.props.style, selectedChildrenStyles); let isFocused = childIndex === this.state.focusIndex; let focusState = 'none'; @@ -466,6 +459,10 @@ const Menu = React.createClass({ ...other, } = this.props; + const { + prepareStyles, + } = this.state.muiTheme; + let openDown = openDirection.split('-')[0] === 'bottom'; let openLeft = openDirection.split('-')[1] === 'left'; @@ -518,8 +515,8 @@ const Menu = React.createClass({ }, }; - let mergedRootStyles = this.mergeStyles(styles.root, style); - let mergedListStyles = this.mergeStyles(styles.list, listStyle); + let mergedRootStyles = Object.assign(styles.root, style); + let mergedListStyles = Object.assign(styles.list, listStyle); const filteredChildren = this._getFilteredChildren(children); @@ -547,7 +544,7 @@ const Menu = React.createClass({ transitionDelay = cumulativeDelay; } - childrenContainerStyles = this.mergeStyles(styles.menuItemContainer, { + childrenContainerStyles = Object.assign({}, styles.menuItemContainer, { transitionDelay: transitionDelay + 'ms', }); } @@ -559,7 +556,7 @@ const Menu = React.createClass({ if (!childIsADivider && !childIsDisabled) menuItemIndex++; return animated ? ( -
{clonedChild}
+
{clonedChild}
) : clonedChild; }); @@ -567,7 +564,7 @@ const Menu = React.createClass({ return (