Remove dependency on utils/styles from components

This commit removes the import of `mergeStyles` and `prepareStyles` from `utils/styles` for most components and files. The use of `mergeStyles` has been replaced with `Object.assign` and the `prepareStyles` function that is imported has been replaced with the `prepareStyles` implementation stored in context. As of this commit, there are only two files importing from `utils/styles`: 1. `menus/menu-divider.jsx` (which is planned for removal in PR #3108) 2. `mixins/style-propable.js` (which many components are still using, but the removal of this mixin is tracked in #2852) Signed-off-by: Neil Gabbadon <neil.gabbadon@emikra.com>
mui · Feb 4, 2016 · 3fa5894 · 3fa5894
1 parent 70b4e0f
commit 3fa5894
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 27 deletions.
diff --git a/src/DropDownMenu/DropDownMenu.jsx b/src/DropDownMenu/DropDownMenu.jsx
@@ -6,7 +6,6 @@ import ClearFix from '../clearfix';
 import getMuiTheme from '../styles/getMuiTheme';
 import Popover from '../popover/popover';
 import PopoverAnimationFromTop from '../popover/popover-animation-from-top';
-import {mergeStyles, prepareStyles} from '../utils/styles';
 
 const DropDownMenu = React.createClass({
 
@@ -256,6 +255,10 @@ const DropDownMenu = React.createClass({
       muiTheme,
     } = this.state;
 
+    const {
+      prepareStyles,
+    } = muiTheme;
+
     const styles = this.getStyles();
 
     let displayValue = '';
@@ -282,14 +285,16 @@ const DropDownMenu = React.createClass({
         {...other}
         ref="root"
         className={className}
-        style={prepareStyles(muiTheme, mergeStyles(styles.root, open && styles.rootWhenOpen, style))}
+        style={prepareStyles(Object.assign({}, styles.root, open && styles.rootWhenOpen, style))}
       >
-        <ClearFix style={mergeStyles(styles.control)} onTouchTap={this._onControlTouchTap}>
-          <div style={prepareStyles(muiTheme, mergeStyles(styles.label, open && styles.labelWhenOpen, labelStyle))}>
+        <ClearFix style={styles.control} onTouchTap={this._onControlTouchTap}>
+          <div
+            style={prepareStyles(Object.assign({}, styles.label, open && styles.labelWhenOpen, labelStyle))}
+          >
             {displayValue}
           </div>
-          <DropDownArrow style={mergeStyles(styles.icon, iconStyle)}/>
-          <div style={prepareStyles(muiTheme, mergeStyles(styles.underline, underlineStyle))}/>
+          <DropDownArrow style={Object.assign({}, styles.icon, iconStyle)}/>
+          <div style={prepareStyles(Object.assign({}, styles.underline, underlineStyle))}/>
         </ClearFix>
         <Popover
           anchorOrigin={{horizontal: 'left', vertical: 'top'}}

diff --git a/src/Subheader/Subheader.jsx b/src/Subheader/Subheader.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import muiThemeable from './../muiThemeable';
-import {mergeStyles, prepareStyles} from './../utils/styles';
 import Typography from '../styles/typography';
 
 const propTypes = {
@@ -39,6 +38,10 @@ let Subheader = (props) => {
     ...other,
   } = props;
 
+  const {
+    prepareStyles,
+  } = muiTheme;
+
   const styles = {
     root: {
       boxSizing: 'border-box',
@@ -52,7 +55,7 @@ let Subheader = (props) => {
   };
 
   return (
-    <div {...other} style={prepareStyles(muiTheme, mergeStyles(styles.root, style))}>
+    <div {...other} style={prepareStyles(Object.assign({}, styles.root, style))}>
       {children}
     </div>
   );

diff --git a/src/TextField/TextFieldHint.jsx b/src/TextField/TextFieldHint.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import Transitions from '../styles/transitions';
-import {mergeStyles, prepareStyles} from '../utils/styles';
 
 const propTypes = {
   /**
@@ -38,6 +37,7 @@ const TextFieldHint = (props) => {
   } = props;
 
   const {
+    prepareStyles,
     textField: {
       hintColor,
     },
@@ -54,7 +54,7 @@ const TextFieldHint = (props) => {
   };
 
   return (
-    <div style={prepareStyles(muiTheme, mergeStyles(styles.root, style))}>
+    <div style={prepareStyles(Object.assign({}, styles.root, style))}>
       {text}
     </div>
   );

diff --git a/src/TextField/TextFieldLabel.jsx b/src/TextField/TextFieldLabel.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import Transitions from '../styles/transitions';
-import {mergeStyles, prepareStyles} from '../utils/styles';
 
 const propTypes = {
   /**
@@ -79,10 +78,14 @@ const TextFieldLabel = (props) => {
     },
   };
 
+  const {
+    prepareStyles,
+  } = muiTheme;
+
   return (
     <label
       className={className}
-      style={prepareStyles(muiTheme, mergeStyles(styles.root, style))}
+      style={prepareStyles(Object.assign({}, styles.root, style))}
       htmlFor={htmlFor}
       onTouchTap={onTouchTap}
     >

diff --git a/src/TextField/TextFieldUnderline.jsx b/src/TextField/TextFieldUnderline.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import Transitions from '../styles/transitions';
-import {mergeStyles, prepareStyles} from '../utils/styles';
 
 const propTypes = {
   /**
@@ -72,6 +71,7 @@ const TextFieldUnderline = (props) => {
   } = errorStyle;
 
   const {
+    prepareStyles,
     textField: {
       borderColor,
       disabledTextColor,
@@ -108,17 +108,17 @@ const TextFieldUnderline = (props) => {
     },
   };
 
-  let underline = mergeStyles(styles.root, style);
-  let focusedUnderline = mergeStyles(underline, styles.focus, focusStyle);
+  let underline = Object.assign({}, styles.root, style);
+  let focusedUnderline = Object.assign({}, underline, styles.focus, focusStyle);
 
-  if (disabled) underline = mergeStyles(underline, styles.disabled, disabledStyle);
-  if (focus) focusedUnderline = mergeStyles(focusedUnderline, {transform: 'scaleX(1)'});
-  if (error) focusedUnderline = mergeStyles(focusedUnderline, styles.error);
+  if (disabled) underline = Object.assign({}, underline, styles.disabled, disabledStyle);
+  if (focus) focusedUnderline = Object.assign({}, focusedUnderline, {transform: 'scaleX(1)'});
+  if (error) focusedUnderline = Object.assign({}, focusedUnderline, styles.error);
 
   return (
     <div>
-      <hr style={prepareStyles(muiTheme, underline)}/>
-      <hr style={prepareStyles(muiTheme, focusedUnderline)}/>
+      <hr style={prepareStyles(underline)}/>
+      <hr style={prepareStyles(focusedUnderline)}/>
     </div>
   );
 };

diff --git a/src/divider.jsx b/src/divider.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import muiThemeable from './muiThemeable';
-import {mergeStyles, prepareStyles} from './utils/styles';
 
 const propTypes = {
   /**
@@ -37,6 +36,10 @@ let Divider = (props) => {
     ...other,
   } = props;
 
+  const {
+    prepareStyles,
+  } = muiTheme;
+
   const styles = {
     root: {
       margin: 0,
@@ -49,7 +52,7 @@ let Divider = (props) => {
   };
 
   return (
-    <hr {...other} style={prepareStyles(muiTheme, mergeStyles(styles.root, style))} />
+    <hr {...other} style={prepareStyles(Object.assign({}, styles.root, style))} />
   );
 };
 

diff --git a/src/flat-button.jsx b/src/flat-button.jsx
@@ -3,7 +3,6 @@ import ContextPure from './mixins/context-pure';
 import Transitions from './styles/transitions';
 import Children from './utils/children';
 import ColorManipulator from './utils/color-manipulator';
-import {mergeStyles} from './utils/styles';
 import Typography from './styles/typography';
 import EnhancedButton from './enhanced-button';
 import FlatButtonLabel from './buttons/flat-button-label';
@@ -258,7 +257,7 @@ const FlatButton = React.createClass({
     const buttonBackgroundColor = backgroundColor || buttonColor;
     const hovered = (this.state.hovered || this.state.isKeyboardFocused) && !disabled;
 
-    const mergedRootStyles = mergeStyles({
+    const mergedRootStyles = Object.assign({}, {
       color: defaultTextColor,
       transition: Transitions.easeOut(),
       fontSize: Typography.fontStyleButtonFontSize,
@@ -297,7 +296,7 @@ const FlatButton = React.createClass({
     }
 
     const labelElement = label ? (
-      <FlatButtonLabel label={label} style={mergeStyles(labelStyleIcon, labelStyle)} />
+      <FlatButtonLabel label={label} style={Object.assign({}, labelStyleIcon, labelStyle)} />
     ) : undefined;
 
     // Place label before or after children.

diff --git a/src/lists/nested-list.jsx b/src/lists/nested-list.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import {mergeStyles} from '../utils/styles';
 import List from './list';
 
 class NestedList extends React.Component {
@@ -35,7 +34,7 @@ class NestedList extends React.Component {
     };
 
     return (
-      <List style={mergeStyles(styles.root, style)}>
+      <List style={Object.assign({}, styles.root, style)}>
         {
           React.Children.map(children, (child) => {
             return React.isValidElement(child) ? (