From f6ba65eb9d000f1225f25deeb49c34a745e85531 Mon Sep 17 00:00:00 2001
From: Gregory Nowakowski <gregory.nowakowski@gartner.com>
Date: Fri, 22 Dec 2017 15:52:42 -0500
Subject: [PATCH] ran prettier for cleanup

---
 example/index.js           | 13 ++++++-
 package.json               |  2 +-
 src/DataStyles.js          |  9 +++++
 src/MUIDataTable.js        | 52 +++++++++++++------------
 src/MUIDataTableBody.js    | 68 ++++++++++++++++++++++++++++----
 src/MUIDataTableHead.js    | 15 ++++---
 src/MUIDataTableSearch.js  |  2 +-
 src/MUIDataTableToolbar.js | 80 ++++++++++++++++++++++++++++++--------
 8 files changed, 183 insertions(+), 58 deletions(-)

diff --git a/example/index.js b/example/index.js
index f93f5738d..3a09474b6 100644
--- a/example/index.js
+++ b/example/index.js
@@ -69,9 +69,20 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'checkbox',
+      responsive: 'stacked',
       styles: {
         table: {
           
+          main: {
+            root: {
+            },
+            responsiveScroll: {
+
+            },
+            responsiveStacked: {
+            }
+          },
+
           head: {
 
             row: {
@@ -93,12 +104,10 @@ class Example extends React.Component {
 
             row: {
               root: {
-                color: "#FF0000"
               }
             },
             cell: {
               root: {
-                color: "#000"
               }
             }
 
diff --git a/package.json b/package.json
index 8100b2920..29be10d5a 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "coverage:html": "cross-env NODE_ENV=test nyc check-coverage --lines 25 --functions 25 --branches 25 --reporter=html --reporter=text mocha --require babel-register test/*.js && nyc report --reporter=html",
     "prettier": "find src/ -name \"*.js\" | xargs prettier --write",
     "lint": "eslint src",
-    "build": "cross-env NODE_ENV=production rollup -c"
+    "build": "cross-env NODE_ENV=production npm run prettier && rollup -c"
   },
   "repository": {
     "type": "git",
diff --git a/src/DataStyles.js b/src/DataStyles.js
index 49d912730..823cda7c1 100644
--- a/src/DataStyles.js
+++ b/src/DataStyles.js
@@ -26,6 +26,13 @@ const stylePass = (displayName, setFn) => {
   return result;
 };
 
+/**
+ * This wrapper was created because I needed the ability to pass styles as a prop that
+ * were extracted from an object that was a prop as well. In order to avoid name collisions
+ * I needed to be able to extract deeply with a dot notation from user suppplied styling.
+ *
+ */
+
 class DataStyles extends React.Component {
   state = {
     data: null,
@@ -49,6 +56,8 @@ class DataStyles extends React.Component {
   buildComponent(props) {
     const defaultStyles = props.defaultStyles ? props.defaultStyles : {};
     const finalStyles = merge(defaultStyles, props.styles);
+    console.log("fin styles");
+    console.log(finalStyles);
 
     // just a pass-through
     this.component = withStyles(finalStyles)(stylePass(props.name, this.setStyleClass));
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index 0204a62c2..effe0dd32 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.js
@@ -12,7 +12,11 @@ import debounce from "lodash.debounce";
 import { getStyle, DataStyles } from "./DataStyles";
 
 const defaultTableStyles = {
-  main: {},
+  root: {},
+  responsiveScroll: {
+    display: "block",
+    overflowX: "auto",
+  },
 };
 
 class MUIDataTable extends React.Component {
@@ -317,26 +321,26 @@ class MUIDataTable extends React.Component {
     const rowsPerPage = this.state.rowsPerPage ? this.state.rowsPerPage : this.options.rowsPerPage;
 
     return (
-      <Paper elevation={4} ref={el => (this.tableContent = el)} className={className ? className : null}>
-        <MUIDataTableToolbar
-          data={data}
-          columns={columns}
-          options={this.options}
-          tableRef={() => this.tableRef}
-          filterUpdate={this.filterUpdate}
-          resetFilters={this.resetFilters}
-          filterData={filterData}
-          filterList={filterList}
-          searchTextUpdate={this.searchTextUpdate}
-          toggleViewColumn={this.toggleViewColumn}
-        />
-        <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}>
+      <DataStyles defaultStyles={defaultTableStyles} name="MUIDataTable" styles={getStyle(this.options, "table.main")}>
+        {tableStyles => (
+          <Paper
+            elevation={4}
+            ref={el => (this.tableContent = el)}
+            className={this.options.responsive === "scroll" ? tableStyles.responsiveScroll : null}>
+            <MUIDataTableToolbar
+              data={data}
+              columns={columns}
+              options={this.options}
+              tableRef={() => this.tableRef}
+              filterUpdate={this.filterUpdate}
+              resetFilters={this.resetFilters}
+              filterData={filterData}
+              filterList={filterList}
+              searchTextUpdate={this.searchTextUpdate}
+              toggleViewColumn={this.toggleViewColumn}
+            />
+            <MUIDataTableFilterList options={this.options} filterList={filterList} filterUpdate={this.filterUpdate} />
+            <Table ref={el => (this.tableRef = el)}>
               <MUIDataTableHead columns={columns} toggleSort={this.toggleSortColumn} options={this.options} />
               <MUIDataTableBody
                 data={this.state.displayData}
@@ -360,9 +364,9 @@ class MUIDataTable extends React.Component {
                 false
               )}
             </Table>
-          )}
-        </DataStyles>
-      </Paper>
+          </Paper>
+        )}
+      </DataStyles>
     );
   }
 }
diff --git a/src/MUIDataTableBody.js b/src/MUIDataTableBody.js
index 6c9b3b485..c80550414 100644
--- a/src/MUIDataTableBody.js
+++ b/src/MUIDataTableBody.js
@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import classNames from "classnames";
 import Table from "material-ui/Table";
 import Typography from "material-ui/Typography";
 import { TableBody, TableRow } from "material-ui/Table";
@@ -7,9 +8,7 @@ import MUIDataTableBodyCell from "./MUIDataTableBodyCell";
 import { getStyle, DataStyles } from "./DataStyles";
 
 const defaultBodyStyles = {
-  root: {
-    borderBottom: "solid 1px #bdbdbd",
-  },
+  root: {},
   emptyTitle: {
     textAlign: "center",
   },
@@ -17,11 +16,30 @@ const defaultBodyStyles = {
 
 const defaultBodyRowStyles = {
   root: {},
+  responsiveStacked: {
+    "@media all and (max-width: 960px)": {
+      border: "solid 2px rgba(0, 0, 0, 0.15)",
+    },
+  },
 };
 
 const defaultBodyCellStyles = {
-  root: {
-    border: "solid 1px #FF0000",
+  root: {},
+  responsiveStacked: {
+    "@media all and (max-width: 960px)": {
+      display: "block",
+      fontSize: "16px",
+      position: "relative",
+      paddingLeft: "50%",
+      "&:before": {
+        position: "absolute",
+        top: "6px",
+        left: "6px",
+        width: "calc(45% - 10px)",
+        paddingRight: "10px",
+        whiteSpace: "nowrap",
+      },
+    },
   },
 };
 
@@ -41,6 +59,10 @@ class MUIDataTableBody extends React.Component {
     classes: PropTypes.object,
   };
 
+  componentDidMount() {
+    this.rRowStyles = this.getRowStyles();
+  }
+
   buildRows() {
     const { data, page, rowsPerPage } = this.props;
 
@@ -55,6 +77,25 @@ class MUIDataTableBody extends React.Component {
     return rows.length ? rows : null;
   }
 
+  getRowStyles() {
+    const { columns, options } = this.props;
+
+    if (!options.responsive && options.responsive !== "stacked") {
+      return defaultBodyRowStyles;
+    }
+
+    let stackStyles = defaultBodyRowStyles;
+    const breakpoint = "@media all and (max-width: 960px)";
+
+    columns.forEach((column, index) => {
+      stackStyles["responsiveStacked"][breakpoint]["& td:nth-of-type(" + (index + 1) + "):before"] = {
+        content: '"' + column.name + '"',
+      };
+    });
+
+    return stackStyles;
+  }
+
   render() {
     const { columns, options } = this.props;
     const tableRows = this.buildRows();
@@ -67,7 +108,7 @@ class MUIDataTableBody extends React.Component {
         {bodyStyles => (
           <TableBody>
             <DataStyles
-              defaultStyles={defaultBodyCellStyles}
+              defaultStyles={this.rRowStyles}
               name="MUIDataTableBodyRow"
               styles={getStyle(options, "table.body.row")}>
               {rowStyles => (
@@ -78,11 +119,22 @@ class MUIDataTableBody extends React.Component {
                   {cellStyles => {
                     return tableRows ? (
                       tableRows.map((row, rowIndex) => (
-                        <TableRow hover={options.rowHover ? true : false} className={rowStyles.root} key={rowIndex}>
+                        <TableRow
+                          hover={options.rowHover ? true : false}
+                          className={classNames({
+                            [rowStyles.root]: true,
+                            [rowStyles.responsiveStacked]: options.responsive === "stacked",
+                          })}
+                          key={rowIndex}>
                           {row.map(
                             (column, index) =>
                               columns[index].display ? (
-                                <MUIDataTableBodyCell className={cellStyles.root} key={index}>
+                                <MUIDataTableBodyCell
+                                  className={classNames({
+                                    [cellStyles.root]: true,
+                                    [cellStyles.responsiveStacked]: options.responsive === "stacked",
+                                  })}
+                                  key={index}>
                                   {column}
                                 </MUIDataTableBodyCell>
                               ) : (
diff --git a/src/MUIDataTableHead.js b/src/MUIDataTableHead.js
index d963f7934..d1b377d26 100644
--- a/src/MUIDataTableHead.js
+++ b/src/MUIDataTableHead.js
@@ -1,16 +1,21 @@
 import React from "react";
 import PropTypes from "prop-types";
+import classNames from "classnames";
 import { TableHead, TableRow } from "material-ui/Table";
 import MUIDataTableHeadCell from "./MUIDataTableHeadCell";
 import { getStyle, DataStyles } from "./DataStyles";
 
-const defaultHeadStyles = {};
+const defaultHeadStyles = {
+  responsiveStacked: {
+    "@media all and (max-width: 960px)": {
+      display: "none",
+    },
+  },
+};
 
 const defaultHeadRowStyles = {};
 
-const defaultHeadCellStyles = {
-  root: {},
-};
+const defaultHeadCellStyles = {};
 
 class MUIDataTableHead extends React.Component {
   render() {
@@ -22,7 +27,7 @@ class MUIDataTableHead extends React.Component {
         name="MUIDataTableHead"
         styles={getStyle(options, "table.head.main")}>
         {headStyles => (
-          <TableHead>
+          <TableHead className={headStyles.responsiveStacked}>
             <DataStyles
               defaultStyles={defaultHeadRowStyles}
               name="MUIDataTableHeadRow"
diff --git a/src/MUIDataTableSearch.js b/src/MUIDataTableSearch.js
index 5abb775ba..93af607f6 100644
--- a/src/MUIDataTableSearch.js
+++ b/src/MUIDataTableSearch.js
@@ -20,7 +20,7 @@ const defaultSearchStyles = {
     marginRight: "8px",
   },
   searchText: {
-    flex: "0.5 0",
+    flex: "0.8 0",
   },
   clearIcon: {
     "&:hover": {
diff --git a/src/MUIDataTableToolbar.js b/src/MUIDataTableToolbar.js
index 12fd0bad6..4c7994bb3 100644
--- a/src/MUIDataTableToolbar.js
+++ b/src/MUIDataTableToolbar.js
@@ -19,19 +19,19 @@ import PrintIcon from "material-ui-icons/Print";
 import ViewColumnIcon from "material-ui-icons/ViewColumn";
 import ClearIcon from "material-ui-icons/Clear";
 import FilterIcon from "material-ui-icons/FilterList";
+import merge from "lodash.merge";
 import { getStyle, DataStyles } from "./DataStyles";
 
 const defaultToolbarStyles = {
   root: {},
-  spacer: {
-    flex: "1 1 100%",
+  left: {
+    flex: "1 1 55%",
   },
   actions: {
-    display: "inline-flex",
-  },
-  titleRoot: {
-    flex: "0 0 auto",
+    flex: "0 0 45%",
+    textAlign: "right",
   },
+  titleRoot: {},
   titleText: {},
   icon: {
     "&:hover": {
@@ -48,6 +48,41 @@ const defaultToolbarStyles = {
   },
 };
 
+const responsiveToolbarStyles = {
+  "@media all and (max-width: 960px)": {
+    titleRoot: {},
+    titleText: {
+      fontSize: "16px",
+    },
+    spacer: {
+      display: "none",
+    },
+    left: {
+      // flex: "1 1 40%",
+      padding: "8px 0px",
+    },
+    actions: {
+      // flex: "1 1 60%",
+      textAlign: "right",
+    },
+  },
+  "@media all and (max-width: 600px)": {
+    root: {
+      display: "block",
+    },
+    left: {
+      padding: "8px 0px 0px 0px",
+    },
+    titleText: {
+      textAlign: "center",
+    },
+    actions: {
+      textAlign: "center",
+    },
+  },
+  "@media all and (max-width: 480px)": {},
+};
+
 const defaultViewColStyles = {
   root: {
     padding: "16px 24px 16px 24px",
@@ -170,6 +205,16 @@ class MUIDataTableToolbar extends React.Component {
     showSearch: false,
   };
 
+  constructor(props) {
+    super(props);
+
+    if (props.options.responsive && props.options.responsive === "stacked") {
+      this.tbarStyles = merge(defaultToolbarStyles, responsiveToolbarStyles);
+    } else {
+      this.tbarStyles = defaultToolbarStyles;
+    }
+  }
+
   handlePrint = () => {
     const tableEl = this.props.tableRef();
     const tableHTML = findDOMNode(tableEl).outerHTML;
@@ -242,21 +287,22 @@ class MUIDataTableToolbar extends React.Component {
 
     return (
       <DataStyles
-        defaultStyles={defaultToolbarStyles}
+        defaultStyles={this.tbarStyles}
         name="MUIDataTableToolbar"
         styles={getStyle(options, "table.toolbar")}>
         {toolbarStyles => (
           <Toolbar className={toolbarStyles.root}>
-            {showSearch === true ? (
-              <MUIDataTableSearch onSearch={searchTextUpdate} onHide={this.hideSearch} options={options} />
-            ) : (
-              <div className={toolbarStyles.titleRoot}>
-                <Typography type="title" className={toolbarStyles.titleText}>
-                  Title goes here and it should be really really long
-                </Typography>
-              </div>
-            )}
-            {showSearch === false ? <div className={toolbarStyles.spacer} /> : false}
+            <div className={toolbarStyles.left}>
+              {showSearch === true ? (
+                <MUIDataTableSearch onSearch={searchTextUpdate} onHide={this.hideSearch} options={options} />
+              ) : (
+                <div className={toolbarStyles.titleRoot}>
+                  <Typography type="title" className={toolbarStyles.titleText}>
+                    Title goes here and it should be really really long
+                  </Typography>
+                </div>
+              )}
+            </div>
             <div className={toolbarStyles.actions}>
               <Tooltip title="Search">
                 <IconButton