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 (