Skip to content

Commit

Permalink
ran prettier for cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
gregnb committed Dec 22, 2017
1 parent e60a00d commit f6ba65e
Show file tree
Hide file tree
Showing 8 changed files with 183 additions and 58 deletions.
13 changes: 11 additions & 2 deletions example/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -93,12 +104,10 @@ class Example extends React.Component {

row: {
root: {
color: "#FF0000"
}
},
cell: {
root: {
color: "#000"
}
}

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
9 changes: 9 additions & 0 deletions src/DataStyles.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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));
Expand Down
52 changes: 28 additions & 24 deletions src/MUIDataTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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}
Expand All @@ -360,9 +364,9 @@ class MUIDataTable extends React.Component {
false
)}
</Table>
)}
</DataStyles>
</Paper>
</Paper>
)}
</DataStyles>
);
}
}
Expand Down
68 changes: 60 additions & 8 deletions src/MUIDataTableBody.js
Original file line number Diff line number Diff line change
@@ -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",
},
},
},
};

Expand All @@ -41,6 +59,10 @@ class MUIDataTableBody extends React.Component {
classes: PropTypes.object,
};

componentDidMount() {
this.rRowStyles = this.getRowStyles();
}

buildRows() {
const { data, page, rowsPerPage } = this.props;

Expand All @@ -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();
Expand All @@ -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 => (
Expand All @@ -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>
) : (
Expand Down
15 changes: 10 additions & 5 deletions src/MUIDataTableHead.js
Original file line number Diff line number Diff line change
@@ -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() {
Expand All @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion src/MUIDataTableSearch.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const defaultSearchStyles = {
marginRight: "8px",
},
searchText: {
flex: "0.5 0",
flex: "0.8 0",
},
clearIcon: {
"&:hover": {
Expand Down
Loading

0 comments on commit f6ba65e

Please sign in to comment.