additional code coverage. more clean up work

gregnb · Dec 26, 2017 · e857b3f · e857b3f
1 parent 7799301
commit e857b3f
Show file tree

Hide file tree

Showing 8 changed files with 345 additions and 133 deletions.
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import classNames from "classnames";
 import Paper from "material-ui/Paper";
 import Table from "material-ui/Table";
 import MUIDataTableToolbar from "./MUIDataTableToolbar";
@@ -66,10 +65,6 @@ class MUIDataTable extends React.Component {
     this.initializeTable(this.props);
   }
 
-  componentDidMount() {}
-
-  componentWillUnmount() {}
-
   componentWillReceiveProps(nextProps) {
     if (this.props.data !== nextProps.data || this.props.columns !== nextProps.columns) {
       this.initializeTable(nextProps);
@@ -130,7 +125,7 @@ class MUIDataTable extends React.Component {
       columnData.push({
         name: columns[colIndex],
         display: true,
-        sort: "desc",
+        sort: null,
       });
 
       filterData[colIndex] = [];
@@ -201,10 +196,17 @@ class MUIDataTable extends React.Component {
 
   toggleSortColumn = index => {
     this.setState(prevState => {
-      const columns = [...prevState.columns];
+      let columns = [...prevState.columns];
       const displayData = prevState.displayData;
       const order = prevState.columns[index].sort;
-      columns[index].sort = columns[index].sort === "desc" ? "asc" : "desc";
+
+      for (let pos = 0; pos < columns.length; pos++) {
+        if (index !== pos) {
+          columns[pos].sort = null;
+        } else {
+          columns[pos].sort = columns[pos].sort === "asc" ? "desc" : "asc";
+        }
+      }
 
       return {
         columns: columns,
@@ -276,7 +278,7 @@ class MUIDataTable extends React.Component {
         comparison = -1;
       }
 
-      return order === "desc" ? comparison * -1 : comparison;
+      return order === "asc" ? comparison * -1 : comparison;
     };
   }
 

diff --git a/src/MUIDataTableHead.js b/src/MUIDataTableHead.js
@@ -15,11 +15,67 @@ const defaultHeadStyles = {
 
 const defaultHeadRowStyles = {};
 
-const defaultHeadCellStyles = {};
+const arrowIcon = {
+  width: "8px",
+  height: "5px",
+  display: "block",
+  paddingBottom: "1px",
+  "& svg": {
+    width: "100%",
+    "& path": {
+      fillOpacity: 0.35,
+    },
+  },
+};
+
+const defaultHeadCellStyles = {
+  tooltip: {
+    cursor: "pointer",
+  },
+  data: {
+    display: "inline-block",
+  },
+  sortAction: {
+    display: "inline-block",
+    verticalAlign: "top",
+    cursor: "pointer",
+    paddingLeft: "4px",
+    paddingTop: "2px",
+  },
+  arrowUp: {
+    ...arrowIcon,
+  },
+  arrowDown: {
+    ...arrowIcon,
+    transform: "rotate(180deg)",
+  },
+  arrowHidden: {
+    display: "none",
+  },
+  arrowActive: {
+    "& svg": {
+      "& path": {
+        fillOpacity: 1,
+      },
+    },
+  },
+};
 
 class MUIDataTableHead extends React.Component {
+  state = {
+    activeColumn: null,
+  };
+
+  handleToggleColumn = index => {
+    this.setState(() => ({
+      activeColumn: index,
+    }));
+    this.props.toggleSort(index);
+  };
+
   render() {
-    const { toggleSort, columns, options } = this.props;
+    const { columns, options } = this.props;
+    const { activeColumn } = this.state;
 
     return (
       <DataStyles
@@ -47,8 +103,9 @@ class MUIDataTableHead extends React.Component {
                                 key={index}
                                 index={index}
                                 classes={cellStyles}
+                                sortAria={activeColumn === index ? column.sort : null}
                                 sortDirection={column.sort}
-                                toggleSort={toggleSort}
+                                toggleSort={this.handleToggleColumn}
                                 options={options}>
                                 {column.name}
                               </MUIDataTableHeadCell>

diff --git a/src/MUIDataTableHeadCell.js b/src/MUIDataTableHeadCell.js
@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import classNames from "classnames";
 import { TableSortLabel } from "material-ui/Table";
 import { TableCell } from "material-ui/Table";
 import Tooltip from "material-ui/Tooltip";
@@ -12,6 +13,8 @@ class MUIDataTableHeadCell extends React.Component {
     options: PropTypes.object.isRequired,
     /** Current sort direction */
     sortDirection: PropTypes.string,
+    /** Current aria-sort direction */
+    sortAria: PropTypes.string,
     /** Callback to trigger column sort */
     toggleSort: PropTypes.func.isRequired,
   };
@@ -21,21 +24,46 @@ class MUIDataTableHeadCell extends React.Component {
   };
 
   render() {
-    const { options, sortDirection, children, classes } = this.props;
+    const { children, classes, index, options, sortDirection, sortAria } = this.props;
 
     return (
-      <TableCell className={classes.root} sortDirection={sortDirection}>
+      <TableCell className={classes.root} sortDirection={sortAria}>
         {options.sort ? (
-          <Tooltip title="Sort" placement={"bottom-end"} enterDelay={300}>
-            <TableSortLabel
-              direction={sortDirection}
-              onClick={this.handleSortClick}
-              active={true}
-              classes={{
-                root: classes.sortLabel,
-              }}>
-              {children}
-            </TableSortLabel>
+          <Tooltip
+            title="Sort"
+            placement={"bottom-end"}
+            className={classes.tooltip}
+            enterDelay={300}
+            onClick={this.handleSortClick}>
+            <span>
+              <div className={classes.data}>{children}</div>
+              <div className={classes.sortAction}>
+                <span
+                  className={classNames({
+                    [classes.arrowUp]: true,
+                    [classes.arrowActive]: sortDirection === "asc" ? true : false,
+                  })}>
+                  <svg>
+                    <path
+                      d="m7.54878,4.12621q0,0.20139 -0.13005,0.34856t-0.30802,0.14717l-6.13296,0q-0.17796,0 -0.30802,-0.14717t-0.13005,-0.34856t0.13005,-0.34856l3.06648,-3.47017q0.13005,-0.14717 0.30802,-0.14717t0.30802,0.14717l3.06648,3.47017q0.13005,0.14717 0.13005,0.34856l0,0l0,0z"
+                      fill="black"
+                    />
+                  </svg>
+                </span>
+                <span
+                  className={classNames({
+                    [classes.arrowDown]: true,
+                    [classes.arrowActive]: sortDirection === "desc" ? true : false,
+                  })}>
+                  <svg>
+                    <path
+                      d="m7.54878,4.12621q0,0.20139 -0.13005,0.34856t-0.30802,0.14717l-6.13296,0q-0.17796,0 -0.30802,-0.14717t-0.13005,-0.34856t0.13005,-0.34856l3.06648,-3.47017q0.13005,-0.14717 0.30802,-0.14717t0.30802,0.14717l3.06648,3.47017q0.13005,0.14717 0.13005,0.34856l0,0l0,0z"
+                      fill="black"
+                    />
+                  </svg>
+                </span>
+              </div>
+            </span>
           </Tooltip>
         ) : (
           children

diff --git a/src/MUIDataTableToolbar.js b/src/MUIDataTableToolbar.js
@@ -333,7 +333,7 @@ class MUIDataTableToolbar extends React.Component {
                 name="MUIDataTableViewCol"
                 styles={getStyle(options, "viewColumns")}>
                 {viewColStyles => (
-                  <MUIPopover placement={"bottom-center"} refExit={this.setActiveIcon.bind(null)} arrow={false}>
+                  <MUIPopover refExit={this.setActiveIcon.bind(null)} arrow={false}>
                     <MUIPopoverTarget>
                       <Tooltip title="View Columns">
                         <IconButton
@@ -362,7 +362,7 @@ class MUIDataTableToolbar extends React.Component {
                 name="MUIDataTableFilter"
                 styles={getStyle(options, "filterView")}>
                 {filterStyles => (
-                  <MUIPopover placement={"bottom-center"} refExit={this.setActiveIcon.bind(null)} arrow={false}>
+                  <MUIPopover refExit={this.setActiveIcon.bind(null)} arrow={false}>
                     <MUIPopoverTarget>
                       <Tooltip title="Filter Table">
                         <IconButton

diff --git a/src/MUIPopover/MUIPopover.js b/src/MUIPopover/MUIPopover.js
@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import classnames from "classnames";
 import Popover from "material-ui/Popover";
 import MUIPopoverContent from "./MUIPopoverContent";
 import MUIPopoverTarget from "./MUIPopoverTarget";
@@ -10,25 +9,6 @@ class MUIPopover extends React.Component {
   static propTypes = {
     /** Show indicating arrow. default: true */
     arrow: PropTypes.bool,
-    /** How to position the popover */
-    placement: PropTypes.oneOf([
-      "top",
-      "left",
-      "right",
-      "bottom",
-      "top-left",
-      "top-center",
-      "top-right",
-      "left-top",
-      "left-center",
-      "left-bottom",
-      "right-top",
-      "right-center",
-      "right-bottom",
-      "bottom-left",
-      "bottom-center",
-      "bottom-right",
-    ]),
     /** Reference callback to handleRequestClose() to trigger manual close of MUIPopover */
     refClose: PropTypes.func,
     /** Reference callback to onExited() to trigger manual close of MUIPopover */
@@ -87,69 +67,18 @@ class MUIPopover extends React.Component {
 
   render() {
     let popoverRender = [];
-    let anchorOriginSpecs = {},
-      transformOriginSpecs = {};
 
     React.Children.map(this.props.children, (child, index) => {
       if (child.type === MUIPopoverContent) {
-        const directions = this.props.placement.split("-");
+        const transformOriginSpecs = {
+          vertical: "top",
+          horizontal: "center",
+        };
 
-        const placement = directions[0];
-        const placementOffset = directions[1] ? directions[1] : "center";
-
-        switch (placement) {
-          case "top":
-            transformOriginSpecs = {
-              vertical: "bottom",
-              horizontal: "center",
-            };
-
-            anchorOriginSpecs = {
-              vertical: "top",
-              horizontal: placementOffset,
-            };
-
-            break;
-
-          case "left":
-            transformOriginSpecs = {
-              vertical: "center",
-              horizontal: "right",
-            };
-
-            anchorOriginSpecs = {
-              vertical: placementOffset,
-              horizontal: "left",
-            };
-
-            break;
-
-          case "right":
-            transformOriginSpecs = {
-              vertical: "center",
-              horizontal: "left",
-            };
-
-            anchorOriginSpecs = {
-              vertical: placementOffset,
-              horizontal: "right",
-            };
-
-            break;
-
-          case "bottom":
-            transformOriginSpecs = {
-              vertical: "top",
-              horizontal: "center",
-            };
-
-            anchorOriginSpecs = {
-              vertical: "bottom",
-              horizontal: placementOffset,
-            };
-
-            break;
-        }
+        const anchorOriginSpecs = {
+          vertical: "bottom",
+          horizontal: "center",
+        };
 
         const popoverContent = (
           <Popover
@@ -161,23 +90,7 @@ class MUIPopover extends React.Component {
             anchorEl={this.anchorEl}
             ref={el => this.popoverEl}
             anchorOrigin={anchorOriginSpecs}
-            transformOrigin={transformOriginSpecs}
-            className={classnames({
-              popover: true,
-              [this.props.className]: this.props.className,
-              [`placement-${this.props.placement}`]: this.props.placement,
-              [`show-arrow`]: this.props.arrow,
-            })}
-            classes={{
-              paper: "popover-paper",
-            }}>
-            {this.props.arrow && (
-              <span className={"popover-arrow"}>
-                <svg width="100%" viewBox="0 0 20 10">
-                  <polygon points="0,10 20,10 10,0" />
-                </svg>
-              </span>
-            )}
+            transformOrigin={transformOriginSpecs}>
             {child}
           </Popover>
         );