removed withDataStyles. replaced it with a new implementation: <DataS…

…tyles>
gregnb · Dec 22, 2017 · b08a20b · b08a20b
1 parent 5f507aa
commit b08a20b
Show file tree

Hide file tree

Showing 16 changed files with 589 additions and 461 deletions.
diff --git a/example/index.js b/example/index.js
@@ -79,19 +79,26 @@ class Example extends React.Component {
 
             cell: {
               root: {
-                },
+              },
               sortLabel: {
               },
             }
 
           },
           body: {
 
-            row: {
+            main: {
+
+            },
 
+            row: {
+              root: {
+                color: "#FF0000"
+              }
             },
             cell: {
               root: {
+                color: "#000"
               }
             }
 
@@ -114,16 +121,10 @@ class Example extends React.Component {
           },
           iconActive: {
           },
-          search: {
-          },
           searchIcon: {
           },
-          searchText: {
-          },
-          clearIcon: {
-            color: "#000",
-            border: "solid 1px #000"
-          },
+        },
+        filterView: {
         },
         filterList: {
           root: {
@@ -134,7 +135,22 @@ class Example extends React.Component {
           },
         },
         pagination: {
+          root: {
+            border: "solid 1px #000"
+          }
+        },
+        viewColumns: {
 
+        },
+        search: {
+          main: {
+          },
+          searchIcon: {
+          },
+          searchText: {
+          },
+          clearIcon: {
+          },          
         }
       }
     };

diff --git a/package.json b/package.json
@@ -76,7 +76,8 @@
     "material-ui": "^1.0.0-beta.22",
     "material-ui-icons": "^1.0.0-beta.17",
     "prop-types": "^15.6.0",
-    "react": "^16.0.0"
+    "react": "^16.0.0",
+    "react-popper": "^0.7.4"
   },
   "side-effects": false,
   "nyc": {

diff --git a/src/DataStyles.js b/src/DataStyles.js
@@ -0,0 +1,65 @@
+import React from "react";
+import PropTypes from "prop-types";
+import merge from "lodash.merge";
+import get from "lodash.get";
+import { withStyles } from "material-ui/styles";
+
+const getStyle = (obj, name) => {
+  return get(obj, "styles." + name, null);
+};
+
+const stylePass = (displayName, setFn) => {
+  const result = class StylePass extends React.Component {
+    componentWillMount() {
+      setFn(this.props.classes);
+    }
+
+    componentWillReceieveProps(nextProps) {
+      if (this.props.classes !== nextprops.classes) setFn(nextProps.classes);
+    }
+
+    render() {
+      return this.props.children;
+    }
+  };
+  result.displayName = displayName;
+  return result;
+};
+
+class DataStyles extends React.Component {
+  state = {
+    data: null,
+  };
+
+  setStyleClass = data => {
+    this.setState(() => ({
+      styleData: data,
+    }));
+  };
+
+  constructor(props) {
+    super(props);
+    this.buildComponent(props);
+  }
+
+  componentWillReceieveProps(nextProps) {
+    if (nextProps.styles !== this.props.styles) this.buildComponent(nextProps);
+  }
+
+  buildComponent(props) {
+    const defaultStyles = props.defaultStyles ? props.defaultStyles : {};
+    const finalStyles = merge(defaultStyles, props.styles);
+
+    // just a pass-through
+    this.component = withStyles(finalStyles)(stylePass(props.name, this.setStyleClass));
+  }
+
+  render() {
+    const { children, defaultStyles } = this.props;
+    const WrappedComponent = this.component;
+
+    return <WrappedComponent>{this.state.styleData ? children(this.state.styleData) : false}</WrappedComponent>;
+  }
+}
+
+export { DataStyles, getStyle };
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
@@ -9,13 +9,12 @@ import MUIDataTableBody from "./MUIDataTableBody";
 import MUIDataTableHead from "./MUIDataTableHead";
 import MUIDataTablePagination from "./MUIDataTablePagination";
 import debounce from "lodash.debounce";
-import { getStyle, withDataStyles } from "./withDataStyles";
+import { getStyle, DataStyles } from "./DataStyles";
 
-const styles = theme => ({
-  table: {
-    fontFamily: "Roboto",
-  },
-});
+const defaultTableStyles = {
+  main: {
+  }
+};
 
 class MUIDataTable extends React.Component {
   static propTypes = {
@@ -38,8 +37,6 @@ class MUIDataTable extends React.Component {
     }),
     /** Pass and use className to style MUIDataTable as desired */
     className: PropTypes.string,
-    /** Extend the style applied to components */
-    classes: PropTypes.object,
   };
 
   state = {
@@ -325,7 +322,6 @@ class MUIDataTable extends React.Component {
         <MUIDataTableToolbar
           data={data}
           columns={columns}
-          classes={getStyle(this.options, "toolbar")}
           options={this.options}
           tableRef={() => this.tableRef}
           filterUpdate={this.filterUpdate}
@@ -335,45 +331,45 @@ class MUIDataTable extends React.Component {
           searchTextUpdate={this.searchTextUpdate}
           toggleViewColumn={this.toggleViewColumn}
         />
-        <MUIDataTableFilterList
-          classes={getStyle(this.options, "filterList")}
-          filterList={filterList}
-          filterUpdate={this.filterUpdate}
-        />
-        <Table ref={el => (this.tableRef = el)} className={classes.table}>
-          <MUIDataTableHead
-            columns={columns}
-            classes={getStyle(this.options, "table.head")}
-            toggleSort={this.toggleSortColumn}
-            options={this.options}
-          />
-          <MUIDataTableBody
-            data={this.state.displayData}
-            columns={columns}
-            classes={getStyle(this.options, "table.body")}
-            page={page}
-            rowsPerPage={rowsPerPage}
-            options={this.options}
-            searchText={searchText}
-            filterList={filterList}
-          />
-          {this.options.pagination ? (
-            <MUIDataTablePagination
-              count={displayData.length}
-              classes={getStyle(this.options, "pagination")}
-              page={page}
-              rowsPerPage={rowsPerPage}
-              changeRowsPerPage={this.changeRowsPerPage}
-              changePage={this.changePage}
-              options={this.options}
-            />
-          ) : (
-            false
+        <MUIDataTableFilterList options={this.options} filterList={filterList} filterUpdate={this.filterUpdate} />
+        <DataStyles
+          defaultStyles={defaultTableStyles}
+          name="MUIDataTable"
+          styles={getStyle(this.options, "table.main")}>
+          {tableStyles => (
+            <Table ref={el => (this.tableRef = el)} className={tableStyles.main}>
+              <MUIDataTableHead
+                columns={columns}
+                toggleSort={this.toggleSortColumn}
+                options={this.options}
+              />
+              <MUIDataTableBody
+                data={this.state.displayData}
+                columns={columns}
+                page={page}
+                rowsPerPage={rowsPerPage}
+                options={this.options}
+                searchText={searchText}
+                filterList={filterList}
+              />
+              {this.options.pagination ? (
+                <MUIDataTablePagination
+                  count={displayData.length}
+                  page={page}
+                  rowsPerPage={rowsPerPage}
+                  changeRowsPerPage={this.changeRowsPerPage}
+                  changePage={this.changePage}
+                  options={this.options}
+                />
+              ) : (
+                false
+              )}
+            </Table>
           )}
-        </Table>
+          </DataStyles>
       </Paper>
     );
   }
 }
 
-export default withDataStyles(styles)(MUIDataTable);
+export default MUIDataTable;
diff --git a/src/MUIDataTableBody.js b/src/MUIDataTableBody.js
@@ -4,16 +4,26 @@ import Table from "material-ui/Table";
 import Typography from "material-ui/Typography";
 import { TableBody, TableRow } from "material-ui/Table";
 import MUIDataTableBodyCell from "./MUIDataTableBodyCell";
-import { getStyle, withDataStyles } from "./withDataStyles";
+import { getStyle, DataStyles } from "./DataStyles";
 
-const bodyStyles = theme => ({
+const defaultBodyStyles = {
   root: {
     borderBottom: "solid 1px #bdbdbd",
   },
   emptyTitle: {
     textAlign: "center",
   },
-});
+};
+
+const defaultBodyRowStyles = {
+  root: {},
+};
+
+const defaultBodyCellStyles = {
+  root: {
+    border: "solid 1px #FF0000",
+  },
+};
 
 class MUIDataTableBody extends React.Component {
   static propTypes = {
@@ -32,52 +42,73 @@ class MUIDataTableBody extends React.Component {
   };
 
   buildRows() {
-    const { data, columns, options, page, rowsPerPage } = this.props;
+    const { data, page, rowsPerPage } = this.props;
 
-    const newRows = [];
+    let rows = [];
     const fromIndex = page === 0 ? 0 : page * rowsPerPage;
     const toIndex = Math.min(data.length, (page + 1) * rowsPerPage);
 
     for (let rowIndex = fromIndex; rowIndex < data.length && rowIndex < toIndex; rowIndex++) {
-      newRows.push(
-        <TableRow hover={options.rowHover ? true : false} key={rowIndex}>
-          {data[rowIndex].map(
-            (column, index) =>
-              columns[index].display ? (
-                <MUIDataTableBodyCell classes={getStyle(options, "table.body.cell")} key={index}>
-                  {column}
-                </MUIDataTableBodyCell>
-              ) : (
-                false
-              ),
-          )}
-        </TableRow>,
-      );
+      rows.push(data[rowIndex]);
     }
 
-    return newRows;
+    return rows.length ? rows : null;
   }
 
   render() {
-    const { columns, classes, options } = this.props;
+    const { columns, options } = this.props;
     const tableRows = this.buildRows();
 
     return (
-      <TableBody>
-        {tableRows.length ? (
-          tableRows
-        ) : (
-          <TableRow>
-            <MUIDataTableBodyCell classes={getStyle(options, "table.body.cell")} colSpan={columns.length}>
-              <Typography type="subheading" className={classes.emptyTitle}>
-                Sorry, no matching records found
-              </Typography>
-            </MUIDataTableBodyCell>
-          </TableRow>
+      <DataStyles
+        defaultStyles={defaultBodyStyles}
+        name="MUIDataTableBody"
+        styles={getStyle(options, "table.body.main")}>
+        {bodyStyles => (
+          <TableBody>
+            <DataStyles
+              defaultStyles={defaultBodyCellStyles}
+              name="MUIDataTableBodyRow"
+              styles={getStyle(options, "table.body.row")}>
+              {rowStyles => (
+                <DataStyles
+                  defaultStyles={defaultBodyCellStyles}
+                  name="MUIDataTableBodyCell"
+                  styles={getStyle(options, "table.body.cell")}>
+                  {cellStyles => {
+                    return tableRows ? (
+                      tableRows.map((row, rowIndex) => (
+                        <TableRow hover={options.rowHover ? true : false} className={rowStyles.root} key={rowIndex}>
+                          {row.map(
+                            (column, index) =>
+                              columns[index].display ? (
+                                <MUIDataTableBodyCell className={cellStyles.root} key={index}>
+                                  {column}
+                                </MUIDataTableBodyCell>
+                              ) : (
+                                false
+                              ),
+                          )}
+                        </TableRow>
+                      ))
+                    ) : (
+                      <TableRow>
+                        <MUIDataTableBodyCell className={cellStyles.root} colSpan={columns.length}>
+                          <Typography type="subheading" className={bodyStyles.emptyTitle}>
+                            Sorry, no matching records found
+                          </Typography>
+                        </MUIDataTableBodyCell>
+                      </TableRow>
+                    );
+                  }}
+                </DataStyles>
+              )}
+            </DataStyles>
+          </TableBody>
         )}
-      </TableBody>
+      </DataStyles>
     );
   }
 }
 
-export default withDataStyles(bodyStyles)(MUIDataTableBody);
+export default MUIDataTableBody;