Skip to content

Commit

Permalink
additional code coverage. more clean up work
Browse files Browse the repository at this point in the history
  • Loading branch information
gregnb committed Dec 26, 2017
1 parent 7799301 commit e857b3f
Show file tree
Hide file tree
Showing 8 changed files with 345 additions and 133 deletions.
20 changes: 11 additions & 9 deletions src/MUIDataTable.js
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -130,7 +125,7 @@ class MUIDataTable extends React.Component {
columnData.push({
name: columns[colIndex],
display: true,
sort: "desc",
sort: null,
});

filterData[colIndex] = [];
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -276,7 +278,7 @@ class MUIDataTable extends React.Component {
comparison = -1;
}

return order === "desc" ? comparison * -1 : comparison;
return order === "asc" ? comparison * -1 : comparison;
};
}

Expand Down
63 changes: 60 additions & 3 deletions src/MUIDataTableHead.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down
52 changes: 40 additions & 12 deletions src/MUIDataTableHeadCell.js
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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,
};
Expand All @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/MUIDataTableToolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
105 changes: 9 additions & 96 deletions src/MUIPopover/MUIPopover.js
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 */
Expand Down Expand Up @@ -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
Expand All @@ -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>
);
Expand Down
Loading

0 comments on commit e857b3f

Please sign in to comment.