Merge pull request #3198 from newoga/#2852/card

[Card] Remove style-propable mixin
mui · Feb 8, 2016 · d88e943 · d88e943
2 parents c13ac65 + 19223f0
commit d88e943
Show file tree

Hide file tree

Showing 7 changed files with 212 additions and 252 deletions.
diff --git a/src/card/card-actions.jsx b/src/card/card-actions.jsx
@@ -1,7 +1,18 @@
 import React from 'react';
-import StylePropable from '../mixins/style-propable';
 import getMuiTheme from '../styles/getMuiTheme';
 
+function getStyles() {
+  return {
+    root: {
+      padding: 8,
+      position: 'relative',
+    },
+    action: {
+      marginRight: 8,
+    },
+  };
+}
+
 const CardActions = React.createClass({
 
   propTypes: {
@@ -20,15 +31,10 @@ const CardActions = 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(),
@@ -41,35 +47,29 @@ const CardActions = 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});
-  },
-
-  getStyles() {
-    return {
-      root: {
-        padding: 8,
-        position: 'relative',
-      },
-    };
+    this.setState({
+      muiTheme: nextContext.muiTheme || this.state.muiTheme,
+    });
   },
 
   render() {
-    let styles = this.getStyles();
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
+
+    const styles = getStyles(this.props, this.state);
 
     let children = React.Children.map(this.props.children, (child) => {
       if (React.isValidElement(child)) {
         return React.cloneElement(child, {
-          style: this.mergeStyles({marginRight: 8}, child.props.style),
+          style: Object.assign({}, styles.action, child.props.style),
         });
       }
     });
 
     return (
-      <div {...this.props} style={this.prepareStyles(styles.root, this.props.style)}>
+      <div {...this.props} style={prepareStyles(Object.assign(styles.root, this.props.style))}>
         {children}
       </div>
     );

diff --git a/src/card/card-expandable.jsx b/src/card/card-expandable.jsx
@@ -2,10 +2,21 @@ import React from 'react';
 import OpenIcon from '../svg-icons/hardware/keyboard-arrow-up';
 import CloseIcon from '../svg-icons/hardware/keyboard-arrow-down';
 import IconButton from '../icon-button';
-import StylePropable from '../mixins/style-propable';
 import getMuiTheme from '../styles/getMuiTheme';
 import ContextPure from '../mixins/context-pure';
 
+function getStyles() {
+  return {
+    root: {
+      top: 0,
+      bottom: 0,
+      right: 4,
+      margin: 'auto',
+      position: 'absolute',
+    },
+  };
+}
+
 const CardExpandable = React.createClass({
 
   propTypes: {
@@ -22,22 +33,15 @@ const CardExpandable = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
   mixins: [
-    StylePropable,
     ContextPure,
   ],
 
   statics: {
-    getRelevantContextKeys(muiTheme) {
-      return {
-        isRtl: muiTheme.isRtl,
-      };
-    },
     getChildrenClasses() {
       return [
         IconButton,
@@ -57,54 +61,23 @@ const CardExpandable = 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});
-  },
-
-  getStyles() {
-    const contextKeys = this.constructor.getRelevantContextKeys(this.state.muiTheme);
-
-    const directionStyle = contextKeys.isRtl ? {
-      left: 4,
-    } : {
-      right: 4,
-    };
-
-    return {
-      root: this.mergeStyles({
-        top: 0,
-        bottom: 0,
-        margin: 'auto',
-        position: 'absolute',
-      }, directionStyle),
-    };
+    this.setState({
+      muiTheme: nextContext.muiTheme || this.state.muiTheme,
+    });
   },
 
   render() {
-    let styles = this.getStyles();
+    const styles = getStyles(this.props, this.state);
 
-    let expandable;
-    if (this.props.expanded === true)
-      expandable = <OpenIcon/>;
-    else
-      expandable = <CloseIcon/>;
-
-    let mergedStyles = this.mergeStyles(styles.root, this.props.style);
-
-    let expandableBtn = (
+    return (
       <IconButton
-        style={mergedStyles}
+        style={Object.assign(styles.root, this.props.style)}
         onTouchTap={this.props.onExpanding}
       >
-        {expandable}
+        {this.props.expanded ? <OpenIcon/> : <CloseIcon/>}
       </IconButton>
     );
-
-
-    return expandableBtn;
   },
 });
 

diff --git a/src/card/card-header.jsx b/src/card/card-header.jsx
@@ -1,8 +1,36 @@
 import React from 'react';
-import Styles from '../styles';
 import Avatar from '../avatar';
-import StylePropable from '../mixins/style-propable';
 import getMuiTheme from '../styles/getMuiTheme';
+import typography from '../styles/typography';
+
+function getStyles(props) {
+  return {
+    root: {
+      height: 72,
+      padding: 16,
+      fontWeight: typography.fontWeightMedium,
+      boxSizing: 'border-box',
+      position: 'relative',
+    },
+    text: {
+      display: 'inline-block',
+      verticalAlign: 'top',
+    },
+    avatar: {
+      marginRight: 16,
+    },
+    title: {
+      color: props.titleColor,
+      display: 'block',
+      fontSize: 15,
+    },
+    subtitle: {
+      color: props.subtitleColor,
+      display: 'block',
+      fontSize: 14,
+    },
+  };
+}
 
 const CardHeader = React.createClass({
 
@@ -30,19 +58,14 @@ const CardHeader = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
-  mixins: [
-    StylePropable,
-  ],
-
   getDefaultProps() {
     return {
-      titleColor: Styles.Colors.darkBlack,
-      subtitleColor: Styles.Colors.lightBlack,
+      titleColor: typography.textDarkBlack,
+      subtitleColor: typography.textLightBlack,
       avatar: null,
     };
   },
@@ -59,63 +82,38 @@ const CardHeader = 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});
-  },
-
-  getStyles() {
-    return {
-      root: {
-        height: 72,
-        padding: 16,
-        fontWeight: Styles.Typography.fontWeightMedium,
-        boxSizing: 'border-box',
-        position: 'relative',
-      },
-      text: {
-        display: 'inline-block',
-        verticalAlign: 'top',
-      },
-      avatar: {
-        marginRight: 16,
-      },
-      title: {
-        color: this.props.titleColor,
-        display: 'block',
-        fontSize: 15,
-      },
-      subtitle: {
-        color: this.props.subtitleColor,
-        display: 'block',
-        fontSize: 14,
-      },
-    };
+    this.setState({
+      muiTheme: nextContext.muiTheme || this.state.muiTheme,
+    });
   },
 
   render() {
-    let styles = this.getStyles();
-    let rootStyle = this.mergeStyles(styles.root, this.props.style);
-    let textStyle = this.mergeStyles(styles.text, this.props.textStyle);
-    let titleStyle = this.mergeStyles(styles.title, this.props.titleStyle);
-    let subtitleStyle = this.mergeStyles(styles.subtitle, this.props.subtitleStyle);
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
+
+    const styles = getStyles(this.props, this.state);
+    const rootStyle = Object.assign(styles.root, this.props.style);
+    const textStyle = Object.assign(styles.text, this.props.textStyle);
+    const titleStyle = Object.assign(styles.title, this.props.titleStyle);
+    const subtitleStyle = Object.assign(styles.subtitle, this.props.subtitleStyle);
 
     let avatar = this.props.avatar;
     if (React.isValidElement(this.props.avatar)) {
-      let avatarMergedStyle = this.mergeStyles(styles.avatar, avatar.props.style);
-      avatar = React.cloneElement(avatar, {style: avatarMergedStyle});
+      avatar = React.cloneElement(avatar, {
+        style: Object.assign(styles.avatar, avatar.props.style),
+      });
     } else if (avatar !== null) {
       avatar = <Avatar src={this.props.avatar} style={styles.avatar}/>;
     }
 
     return (
-      <div {...this.props} style={this.prepareStyles(rootStyle)}>
+      <div {...this.props} style={prepareStyles(rootStyle)}>
         {avatar}
-        <div style={this.prepareStyles(textStyle)}>
-          <span style={this.prepareStyles(titleStyle)}>{this.props.title}</span>
-          <span style={this.prepareStyles(subtitleStyle)}>{this.props.subtitle}</span>
+        <div style={prepareStyles(textStyle)}>
+          <span style={prepareStyles(titleStyle)}>{this.props.title}</span>
+          <span style={prepareStyles(subtitleStyle)}>{this.props.subtitle}</span>
         </div>
         {this.props.children}
       </div>