Merge pull request #3202 from newoga/#2852/grid-list

[GridList] Remove style-propable mixin
mui · Feb 6, 2016 · 4cf79f4 · 4cf79f4
2 parents 2a57352 + a3d3662
commit 4cf79f4
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 107 deletions.
diff --git a/src/grid-list/grid-list.jsx b/src/grid-list/grid-list.jsx
@@ -1,7 +1,20 @@
 import React from 'react';
-import StylePropable from '../mixins/style-propable';
 import getMuiTheme from '../styles/getMuiTheme';
 
+function getStyles(props) {
+  return {
+    root: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      margin: -props.padding / 2,
+    },
+    item: {
+      boxSizing: 'border-box',
+      padding: props.padding / 2,
+    },
+  };
+}
+
 const GridList = React.createClass({
 
   propTypes: {
@@ -35,15 +48,10 @@ const GridList = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
-  mixins: [
-    StylePropable,
-  ],
-
   getDefaultProps() {
     return {
       cols: 2,
@@ -64,25 +72,10 @@ const GridList = 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: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        margin: -this.props.padding / 2,
-      },
-      item: {
-        boxSizing: 'border-box',
-        padding: this.props.padding / 2,
-      },
-    };
+    this.setState({
+      muiTheme: nextContext.muiTheme || this.state.muiTheme,
+    });
   },
 
   render() {
@@ -95,26 +88,30 @@ const GridList = React.createClass({
       ...other,
     } = this.props;
 
-    const styles = this.getStyles();
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
+
+    const styles = getStyles(this.props, this.state);
 
-    const mergedRootStyles = this.mergeStyles(styles.root, style);
+    const mergedRootStyles = Object.assign(styles.root, style);
 
     const wrappedChildren = React.Children.map(children, (currentChild) => {
       if (React.isValidElement(currentChild) && currentChild.type.displayName === 'Subheader') {
         return currentChild;
       }
       const childCols = currentChild.props.cols || 1;
       const childRows = currentChild.props.rows || 1;
-      const itemStyle = this.mergeStyles(styles.item, {
+      const itemStyle = Object.assign({}, styles.item, {
         width: (100 / cols * childCols) + '%',
         height: cellHeight * childRows + padding,
       });
 
-      return <div style={this.prepareStyles(itemStyle)}>{currentChild}</div>;
+      return <div style={prepareStyles(itemStyle)}>{currentChild}</div>;
     });
 
     return (
-      <div style={this.prepareStyles(mergedRootStyles)} {...other}>
+      <div style={prepareStyles(mergedRootStyles)} {...other}>
         {wrappedChildren}
       </div>
     );

diff --git a/src/grid-list/grid-tile.jsx b/src/grid-list/grid-tile.jsx
@@ -1,8 +1,63 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import StylePropable from '../mixins/style-propable';
 import getMuiTheme from '../styles/getMuiTheme';
 
+function getStyles(props, state) {
+  const {
+    baseTheme,
+    gridTile,
+  } = state.muiTheme;
+
+  const actionPos = props.actionIcon && props.actionPosition;
+
+  let styles = {
+    root: {
+      position: 'relative',
+      display: 'block',
+      height: '100%',
+      overflow: 'hidden',
+    },
+    titleBar: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      [props.titlePosition]: 0,
+      height: props.subtitle ? 68 : 48,
+      background: props.titleBackground,
+      display: 'flex',
+      alignItems: 'center',
+    },
+    titleWrap: {
+      flexGrow: 1,
+      marginLeft: actionPos !== 'left' ? baseTheme.spacing.desktopGutterLess : 0,
+      marginRight: actionPos === 'left' ? baseTheme.spacing.desktopGutterLess : 0,
+      color: gridTile.textColor,
+      overflow: 'hidden',
+    },
+    title: {
+      fontSize: '16px',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+    },
+    subtitle: {
+      fontSize: '12px',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+    },
+    actionIcon: {
+      order: actionPos === 'left' ? -1 : 1,
+    },
+    childImg: {
+      height: '100%',
+      transform: 'translateX(-50%)',
+      position: 'relative',
+      left: '50%',
+    },
+  };
+  return styles;
+}
+
 const GridTile = React.createClass({
 
   propTypes: {
@@ -77,15 +132,10 @@ const GridTile = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
-  mixins: [
-    StylePropable,
-  ],
-
   getDefaultProps() {
     return {
       titlePosition: 'bottom',
@@ -113,74 +163,18 @@ const GridTile = React.createClass({
     this._ensureImageCover();
   },
 
-  //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,
+    });
   },
 
-  getStyles() {
-    const spacing = this.state.muiTheme.rawTheme.spacing;
-    const themeVariables = this.state.muiTheme.gridTile;
-    const actionPos = this.props.actionIcon ? this.props.actionPosition : null;
-    const gutterLess = spacing.desktopGutterLess;
-
-    let styles = {
-      root: {
-        position: 'relative',
-        display: 'block',
-        height: '100%',
-        overflow: 'hidden',
-      },
-      titleBar: {
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        [this.props.titlePosition]: 0,
-        height: this.props.subtitle ? 68 : 48,
-        background: this.props.titleBackground,
-        display: 'flex',
-        alignItems: 'center',
-      },
-      titleWrap: {
-        flexGrow: 1,
-        marginLeft: actionPos !== 'left' ? gutterLess : 0,
-        marginRight: actionPos === 'left' ? gutterLess : 0,
-        color: themeVariables.textColor,
-        overflow: 'hidden',
-      },
-      title: {
-        fontSize: '16px',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-      },
-      subtitle: {
-        fontSize: '12px',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-      },
-      actionIcon: {
-        order: actionPos === 'left' ? -1 : 1,
-      },
-      childImg: {
-        height: '100%',
-        transform: 'translateX(-50%)',
-        position: 'relative',
-        left: '50%',
-      },
-    };
-    return styles;
-  },
-
-  componeneDidUpdate() {
+  componentDidUpdate() {
     this._ensureImageCover();
   },
 
   _ensureImageCover() {
-    let imgEl = ReactDOM.findDOMNode(this.refs.img);
+    let imgEl = this.refs.img;
 
     if (imgEl) {
       let fit = () => {
@@ -215,25 +209,29 @@ const GridTile = React.createClass({
       children,
       rootClass,
       ...other,
-      } = this.props;
+    } = this.props;
+
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
 
-    const styles = this.getStyles();
+    const styles = getStyles(this.props, this.state);
 
-    const mergedRootStyles = this.mergeStyles(styles.root, style);
+    const mergedRootStyles = Object.assign(styles.root, style);
 
     let titleBar = null;
 
     if (title) {
       titleBar = (
-        <div style={this.prepareStyles(styles.titleBar)}>
-          <div style={this.prepareStyles(styles.titleWrap)}>
-            <div style={this.prepareStyles(styles.title)}>{title}</div>
+        <div style={prepareStyles(styles.titleBar)}>
+          <div style={prepareStyles(styles.titleWrap)}>
+            <div style={prepareStyles(styles.title)}>{title}</div>
             {
-              subtitle ? (<div style={this.prepareStyles(styles.subtitle)}>{subtitle}</div>) : null
+              subtitle ? (<div style={prepareStyles(styles.subtitle)}>{subtitle}</div>) : null
             }
           </div>
           {
-            actionIcon ? (<div style={this.prepareStyles(styles.actionIcon)}>{actionIcon}</div>) : null
+            actionIcon ? (<div style={prepareStyles(styles.actionIcon)}>{actionIcon}</div>) : null
           }
         </div>
       );
@@ -248,7 +246,7 @@ const GridTile = React.createClass({
         if (child.type === 'img') {
           return React.cloneElement(child, {
             ref: 'img',
-            style: this.prepareStyles(styles.childImg, child.props.style),
+            style: prepareStyles(Object.assign({}, styles.childImg, child.props.style)),
           });
         } else {
           return child;
@@ -258,7 +256,7 @@ const GridTile = React.createClass({
 
     const RootTag = rootClass;
     return (
-      <RootTag style={this.prepareStyles(mergedRootStyles)} {...other}>
+      <RootTag style={prepareStyles(mergedRootStyles)} {...other}>
         {newChildren}
         {titleBar}
       </RootTag>