ran prettier for cleanup

gregnb · Dec 22, 2017 · f6ba65e · f6ba65e
1 parent e60a00d
commit f6ba65e
Show file tree

Hide file tree

Showing 8 changed files with 183 additions and 58 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,27 +1,45 @@
 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";
 import MUIDataTableBodyCell from "./MUIDataTableBodyCell";
 import { getStyle, DataStyles } from "./DataStyles";
 
 const defaultBodyStyles = {
-  root: {
-    borderBottom: "solid 1px #bdbdbd",
-  },
+  root: {},
   emptyTitle: {
     textAlign: "center",
   },
 };
 
 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
@@ -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
@@ -20,7 +20,7 @@ const defaultSearchStyles = {
     marginRight: "8px",
   },
   searchText: {
-    flex: "0.5 0",
+    flex: "0.8 0",
   },
   clearIcon: {
     "&:hover": {