Remove style-propable from menus components

mui · Feb 7, 2016 · d0b8ba9 · d0b8ba9
1 parent eb0cee4
commit d0b8ba9
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 42 deletions.
diff --git 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}
         <Popover

diff --git a/src/menus/menu-item.jsx b/src/menus/menu-item.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
-import StylePropable from '../mixins/style-propable';
 import Colors from '../styles/colors';
 import Popover from '../popover/popover';
 import CheckIcon from '../svg-icons/navigation/check';
@@ -97,14 +96,12 @@ const MenuItem = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
   mixins: [
     PureRenderMixin,
-    StylePropable,
   ],
 
   getDefaultProps() {
@@ -134,11 +131,10 @@ const MenuItem = React.createClass({
     this._applyFocusState();
   },
 
-  //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 (this.state.open && nextProps.focusState === 'none') {
       this._onRequestClose();
@@ -214,6 +210,10 @@ const MenuItem = React.createClass({
       ...other,
     } = this.props;
 
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
+
     const disabledColor = this.state.muiTheme.rawTheme.palette.disabledColor;
     const textColor = this.state.muiTheme.rawTheme.palette.textColor;
     const leftIndent = desktop ? 64 : 72;
@@ -252,21 +252,21 @@ const MenuItem = React.createClass({
       },
     };
 
-    let mergedRootStyles = this.mergeStyles(styles.root, style);
-    let mergedInnerDivStyles = this.mergeStyles(styles.innerDivStyle, innerDivStyle);
+    let mergedRootStyles = Object.assign(styles.root, style);
+    let mergedInnerDivStyles = Object.assign(styles.innerDivStyle, innerDivStyle);
 
     //Left Icon
     let leftIconElement = leftIcon ? leftIcon : checked ? <CheckIcon /> : 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});
     }
 
     //Right Icon
     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}) :
-        <div style={this.prepareStyles(styles.secondaryText)}>{secondaryText}</div>;
+        <div style={prepareStyles(styles.secondaryText)}>{secondaryText}</div>;
     }
     let childMenuPopover;
     if (menuItems) {

diff --git 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,15 +556,15 @@ const Menu = React.createClass({
       if (!childIsADivider && !childIsDisabled) menuItemIndex++;
 
       return animated ? (
-        <div style={this.prepareStyles(childrenContainerStyles)}>{clonedChild}</div>
+        <div style={prepareStyles(childrenContainerStyles)}>{clonedChild}</div>
       ) : clonedChild;
 
     });
 
     return (
       <div
         onKeyDown={this._handleKeyDown}
-        style={this.prepareStyles(mergedRootStyles)}
+        style={prepareStyles(mergedRootStyles)}
       >
         <Paper
           ref="scrollContainer"