Merge pull request #3227 from newoga/#2852/table

[Table] Remove style-propable mixin
mui · Feb 8, 2016 · eb4435c · eb4435c
2 parents d88e943 + 12c9f6a
commit eb4435c
Show file tree

Hide file tree

Showing 7 changed files with 256 additions and 304 deletions.
diff --git a/src/table/table-body.jsx b/src/table/table-body.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import Checkbox from '../checkbox';
 import TableRowColumn from './table-row-column';
 import ClickAwayable from '../mixins/click-awayable';
-import StylePropable from '../mixins/style-propable';
 import getMuiTheme from '../styles/getMuiTheme';
 
 const TableBody = React.createClass({
@@ -118,14 +117,12 @@ const TableBody = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
   mixins: [
     ClickAwayable,
-    StylePropable,
   ],
 
   getDefaultProps() {
@@ -153,13 +150,10 @@ const TableBody = 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});
-
-    let newState = {};
+    const newState = {
+      muiTheme: nextContext.muiTheme || this.state.muiTheme,
+    };
 
     if (this.props.allRowsSelected && !nextProps.allRowsSelected) {
       newState.selectedRows = this.state.selectedRows.length > 0
@@ -417,10 +411,15 @@ const TableBody = React.createClass({
       style,
       ...other,
     } = this.props;
+
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
+
     let rows = this._createRows();
 
     return (
-      <tbody className={className} style={this.prepareStyles(style)}>
+      <tbody className={className} style={prepareStyles(Object.assign({}, style))}>
         {rows}
       </tbody>
     );

diff --git a/src/table/table-footer.jsx b/src/table/table-footer.jsx
@@ -1,8 +1,23 @@
 import React from 'react';
 import TableRowColumn from './table-row-column';
-import StylePropable from '../mixins/style-propable';
 import getMuiTheme from '../styles/getMuiTheme';
 
+function getStyles(props, state) {
+  const {
+    tableFooter,
+  } = state.muiTheme;
+
+  return {
+    cell: {
+      borderTop: `1px solid ${tableFooter.borderColor}`,
+      verticalAlign: 'bottom',
+      padding: 20,
+      textAlign: 'left',
+      whiteSpace: 'nowrap',
+    },
+  };
+}
+
 const TableFooter = React.createClass({
 
   propTypes: {
@@ -35,15 +50,10 @@ const TableFooter = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
-  mixins: [
-    StylePropable,
-  ],
-
   getDefaultProps() {
     return {
       adjustForCheckbox: true,
@@ -63,74 +73,48 @@ const TableFooter = 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});
-  },
-
-  getTheme() {
-    return this.state.muiTheme.tableFooter;
-  },
-
-  getStyles() {
-    const styles = {
-      cell: {
-        borderTop: '1px solid ' + this.getTheme().borderColor,
-        verticalAlign: 'bottom',
-        padding: 20,
-        textAlign: 'left',
-        whiteSpace: 'nowrap',
-      },
-    };
-
-    return styles;
-  },
-
-  _createRows() {
-    let rowNumber = 0;
-    return (
-      React.Children.map(this.props.children, (child) => {
-        return this._createRow(child, rowNumber++);
-      })
-    );
-  },
-
-  _createRow(child, rowNumber) {
-    let styles = this.getStyles();
-    let props = {
-      displayBorder: false,
-      key: 'f-' + rowNumber,
-      rowNumber: rowNumber,
-      style: this.mergeStyles(styles.cell, child.props.style),
-    };
-
-    let children = [this._getCheckboxPlaceholder(props)];
-    React.Children.forEach(child.props.children, (child) => {
-      children.push(child);
+    this.setState({
+      muiTheme: nextContext.muiTheme || this.state.muiTheme,
     });
-
-    return React.cloneElement(child, props, children);
-  },
-
-  _getCheckboxPlaceholder(props) {
-    if (!this.props.adjustForCheckbox) return null;
-
-    let key = 'fpcb' + props.rowNumber;
-    return <TableRowColumn key={key} style={{width: 24}} />;
   },
 
   render() {
-    let {
+    const {
+      adjustForCheckbox,
+      children,
       className,
       style,
       ...other,
     } = this.props;
-    let footerRows = this._createRows();
+
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
+
+    const styles = getStyles(this.props, this.state);
+
+    const footerRows = React.Children.map(children, (child, rowNumber) => {
+      const newChildProps = {
+        displayBorder: false,
+        key: `f-${rowNumber}`,
+        rowNumber: rowNumber,
+        style: Object.assign({}, styles.cell, child.props.style),
+      };
+
+      let newDescendants;
+      if (adjustForCheckbox) {
+        newDescendants = [
+          <TableRowColumn key={`fpcb${rowNumber}`} style={{width: 24}} />,
+          ...React.Children.toArray(child.props.children),
+        ];
+      }
+
+      return React.cloneElement(child, newChildProps, newDescendants);
+    });
 
     return (
-      <tfoot className={className} style={this.prepareStyles(style)} {...other}>
+      <tfoot className={className} style={prepareStyles(Object.assign({}, style))} {...other}>
         {footerRows}
       </tfoot>
     );

diff --git a/src/table/table-header-column.jsx b/src/table/table-header-column.jsx
@@ -1,8 +1,32 @@
 import React from 'react';
-import StylePropable from '../mixins/style-propable';
 import Tooltip from '../tooltip';
 import getMuiTheme from '../styles/getMuiTheme';
 
+function getStyles(props, state) {
+  const {
+    tableHeaderColumn,
+  } = state.muiTheme;
+
+  return {
+    root: {
+      fontWeight: 'normal',
+      fontSize: 12,
+      paddingLeft: tableHeaderColumn.spacing,
+      paddingRight: tableHeaderColumn.spacing,
+      height: tableHeaderColumn.height,
+      textAlign: 'left',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      color: tableHeaderColumn.textColor,
+      position: 'relative',
+    },
+    tooltip: {
+      boxSizing: 'border-box',
+      marginTop: tableHeaderColumn.height / 2,
+    },
+  };
+}
+
 const TableHeaderColumn = React.createClass({
 
   propTypes: {
@@ -50,13 +74,10 @@ const TableHeaderColumn = 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(),
@@ -70,39 +91,10 @@ const TableHeaderColumn = 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});
-  },
-
-  getTheme() {
-    return this.state.muiTheme.tableHeaderColumn;
-  },
-
-  getStyles() {
-    let theme = this.getTheme();
-    let styles = {
-      root: {
-        fontWeight: 'normal',
-        fontSize: 12,
-        paddingLeft: theme.spacing,
-        paddingRight: theme.spacing,
-        height: theme.height,
-        textAlign: 'left',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-        color: this.getTheme().textColor,
-        position: 'relative',
-      },
-      tooltip: {
-        boxSizing: 'border-box',
-        marginTop: theme.height / 2,
-      },
-    };
-
-    return styles;
+    this.setState({
+      muiTheme: nextContext.muiTheme || this.state.muiTheme,
+    });
   },
 
   _onMouseEnter() {
@@ -118,13 +110,8 @@ const TableHeaderColumn = React.createClass({
   },
 
   render() {
-    let styles = this.getStyles();
-    let handlers = {
-      onMouseEnter: this._onMouseEnter,
-      onMouseLeave: this._onMouseLeave,
-      onClick: this._onClick,
-    };
     let {
+      children,
       className,
       columnNumber,
       onClick,
@@ -133,12 +120,24 @@ const TableHeaderColumn = React.createClass({
       tooltipStyle,
       ...other,
     } = this.props;
+
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
+
+    const styles = getStyles(this.props, this.state);
+    let handlers = {
+      onMouseEnter: this._onMouseEnter,
+      onMouseLeave: this._onMouseLeave,
+      onClick: this._onClick,
+    };
+
     if (this.props.tooltip !== undefined) {
       tooltip = (
         <Tooltip
           label={this.props.tooltip}
           show={this.state.hovered}
-          style={this.mergeStyles(styles.tooltip, tooltipStyle)}
+          style={Object.assign(styles.tooltip, tooltipStyle)}
         />
       );
     }
@@ -147,12 +146,12 @@ const TableHeaderColumn = React.createClass({
       <th
         key={this.props.key}
         className={className}
-        style={this.prepareStyles(styles.root, style)}
+        style={prepareStyles(Object.assign(styles.root, style))}
         {...handlers}
         {...other}
       >
         {tooltip}
-        {this.props.children}
+        {children}
       </th>
     );
   },