Project refactoring (#329)

* init rename * refactor project * fix broken unit tests * code clean up * add expandable rows * fix broken unit tests * enforce single quotes * update README.md * fix bug in expandable rows
gregnb · Dec 30, 2018 · 009e796 · 009e796
1 parent 5b64e55
commit 009e796
Show file tree

Hide file tree

Showing 55 changed files with 1,834 additions and 1,797 deletions.
diff --git a/README.md b/README.md
@@ -137,6 +137,8 @@ The component accepts the following props:
 |**`pagination`**|boolean|true|Enable/disable pagination
 |**`selectableRows`**|boolean|true|Enable/disable row selection
 |**`resizableColumns`**|boolean|false|Enable/disable resizable columns
+|**`expandableRows`**|boolean|false|Enable/disable expandable 
+|**`renderExpandableRow `**|function||Render expandable row. `function(rowData, rowMeta) => React Component`
 |**`customToolbar`**|function||Render a custom toolbar
 |**`customToolbarSelect`**|function||Render a custom selected rows toolbar. `function(selectedRows, displayData, setSelectedRows) => void`
 |**`customFooter`**|function||Render a custom table footer. `function(count, page, rowsPerPage, changeRowsPerPage, changePage) => string`&#124;` React Component`

diff --git a/docs/icons/GitHub.js b/docs/icons/GitHub.js
@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 
-import React from "react";
-import SvgIcon from "@material-ui/core/SvgIcon";
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
 
 function GitHub(props) {
   return (
@@ -11,6 +11,6 @@ function GitHub(props) {
   );
 }
 
-GitHub.muiName = "SvgIcon";
+GitHub.muiName = 'SvgIcon';
 
 export default GitHub;
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
@@ -1,7 +1,7 @@
-import React from "react";
-import Document, { Head, Main, NextScript } from "next/document";
-import JssProvider from "react-jss/lib/JssProvider";
-import getPageContext from "../utils/getPageContext";
+import React from 'react';
+import Document, { Head, Main, NextScript } from 'next/document';
+import JssProvider from 'react-jss/lib/JssProvider';
+import getPageContext from '../utils/getPageContext';
 
 class MyDocument extends Document {
   render() {
@@ -15,12 +15,12 @@ class MyDocument extends Document {
 
           <meta
             name="description"
-            content={"MUI-Datatables is a data tables component built for React Material-UI V1"}
+            content={'MUI-Datatables is a data tables component built for React Material-UI V1'}
           />
           <meta
             name="keywords"
             content={
-              "material-ui, data tables, datatables, material-ui, material-ui-datables, react tables, react data tables"
+              'material-ui, data tables, datatables, material-ui, material-ui-datables, react tables, react data tables'
             }
           />
           <meta name="robots" content="index,follow,noodp" />

diff --git a/docs/pages/index.js b/docs/pages/index.js
@@ -1,27 +1,27 @@
-import React from "react";
-import PropTypes from "prop-types";
-import Typography from "@material-ui/core/Typography";
-import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@material-ui/core/Tooltip";
-import DownloadIcon from "@material-ui/icons/CloudDownload";
-import BuildIcon from "@material-ui/icons/Build"; // eslint-disable-line import/no-unresolved
-import CodeSnippet from "../utils/CodeSnippet";
-import Layout from "../utils/layout";
-import withRoot from "../utils/withRoot";
-import { withStyles } from "@material-ui/core/styles";
+import React from 'react';
+import PropTypes from 'prop-types';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+import DownloadIcon from '@material-ui/icons/CloudDownload';
+import BuildIcon from '@material-ui/icons/Build'; // eslint-disable-line import/no-unresolved
+import CodeSnippet from '../utils/CodeSnippet';
+import Layout from '../utils/layout';
+import withRoot from '../utils/withRoot';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
   stepIcon: {
-    fontSize: "30px",
+    fontSize: '30px',
     marginRight: theme.spacing.unit * 2,
   },
   stepWrapper: {
     marginTop: theme.spacing.unit * 4,
-    display: "flex",
-    alignItems: "center",
+    display: 'flex',
+    alignItems: 'center',
   },
   mainImage: {
-    maxWidth: "100%",
+    maxWidth: '100%',
   },
 });
 
@@ -49,14 +49,14 @@ class Homepage extends React.Component {
             <DownloadIcon className={classes.stepIcon} />
             <Typography variant="h6">Installation</Typography>
           </div>
-          <CodeSnippet withMargin language={"bash"} text={`npm install mui-datatables --save`} />
+          <CodeSnippet withMargin language={'bash'} text={`npm install mui-datatables --save`} />
 
           <div className={classes.stepWrapper}>
             <BuildIcon className={classes.stepIcon} />
             <Typography variant="h6">Usage</Typography>
           </div>
           <CodeSnippet
-            language={"jsx"}
+            language={'jsx'}
             text={`import MUIDataTable from "mui-datatables";
 
 const columns = ["Name", "Company", "City", "State"];

diff --git a/docs/utils/CodeSnippet.js b/docs/utils/CodeSnippet.js
@@ -1,11 +1,11 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classnames from "classnames";
-import prism from "prismjs";
-import "prismjs/components/prism-jsx";
-import "prismjs/components/prism-bash";
-import Paper from "@material-ui/core/Paper";
-import { withStyles } from "@material-ui/core/styles";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import prism from 'prismjs';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-bash';
+import Paper from '@material-ui/core/Paper';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({});
 
@@ -17,7 +17,7 @@ class CodeSnippet extends React.Component {
   };
 
   static defaultProps = {
-    language: "jsx",
+    language: 'jsx',
   };
 
   render() {

diff --git a/docs/utils/Menu.js b/docs/utils/Menu.js
@@ -1,11 +1,11 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { withStyles } from "@material-ui/core";
-import Drawer from "@material-ui/core/Drawer";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemText from "@material-ui/core/ListItemText";
-import ListSubheader from "@material-ui/core/ListSubheader";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core';
+import Drawer from '@material-ui/core/Drawer';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListSubheader from '@material-ui/core/ListSubheader';
 
 const styles = theme => ({
   list: {
@@ -17,18 +17,18 @@ const styles = theme => ({
 });
 
 const sandboxes = [
-  { name: "Custom Component", href: "https://codesandbox.io/embed/xrvrzryjvp?autoresize=1&hidenavigation=1" },
-  { name: "Customize Columns", href: "https://codesandbox.io/embed/xowj5oj8w?autoresize=1&hidenavigation=1" },
-  { name: "Customize Footer", href: "https://codesandbox.io/embed/5z0w0w9jyk?autoresize=1&hidenavigation=1" },
-  { name: "Customize Styling", href: "https://codesandbox.io/embed/0ylq1lqwp0?autoresize=1&hidenavigation=1" },
-  { name: "Customize Toolbar", href: "https://codesandbox.io/embed/wy2rl1nyzl?autoresize=1&hidenavigation=1" },
-  { name: "Customize ToolbarSelect", href: "https://codesandbox.io/embed/545ym5ov6p?autoresize=1&hidenavigation=1" },
-  { name: "Resizable Columns", href: "https://codesandbox.io/embed/q8w3230qpj?autoresize=1&hidenavigation=1" },
+  { name: 'Custom Component', href: 'https://codesandbox.io/embed/xrvrzryjvp?autoresize=1&hidenavigation=1' },
+  { name: 'Customize Columns', href: 'https://codesandbox.io/embed/xowj5oj8w?autoresize=1&hidenavigation=1' },
+  { name: 'Customize Footer', href: 'https://codesandbox.io/embed/5z0w0w9jyk?autoresize=1&hidenavigation=1' },
+  { name: 'Customize Styling', href: 'https://codesandbox.io/embed/0ylq1lqwp0?autoresize=1&hidenavigation=1' },
+  { name: 'Customize Toolbar', href: 'https://codesandbox.io/embed/wy2rl1nyzl?autoresize=1&hidenavigation=1' },
+  { name: 'Customize ToolbarSelect', href: 'https://codesandbox.io/embed/545ym5ov6p?autoresize=1&hidenavigation=1' },
+  { name: 'Resizable Columns', href: 'https://codesandbox.io/embed/q8w3230qpj?autoresize=1&hidenavigation=1' },
 ];
 
 const SandboxItem = props => (
   <ListItem button>
-    <ListItemText onClick={() => window.open(props.href, "_blank")} primary={props.name} />
+    <ListItemText onClick={() => window.open(props.href, '_blank')} primary={props.name} />
   </ListItem>
 );
 

diff --git a/docs/utils/getPageContext.js b/docs/utils/getPageContext.js
@@ -1,9 +1,9 @@
 /* eslint-disable no-underscore-dangle */
 
-import { SheetsRegistry } from "jss";
-import { createMuiTheme, createGenerateClassName } from "@material-ui/core/styles";
-import purple from "@material-ui/core/colors/purple";
-import green from "@material-ui/core/colors/green";
+import { SheetsRegistry } from 'jss';
+import { createMuiTheme, createGenerateClassName } from '@material-ui/core/styles';
+import purple from '@material-ui/core/colors/purple';
+import green from '@material-ui/core/colors/green';
 
 // A theme with custom primary and secondary color.
 // It's optional.

diff --git a/docs/utils/layout.js b/docs/utils/layout.js
@@ -1,47 +1,47 @@
-import React from "react";
-import PropTypes from "prop-types";
-import Head from "next/head";
-import Typography from "@material-ui/core/Typography";
-import AppBar from "@material-ui/core/AppBar";
-import Toolbar from "@material-ui/core/Toolbar";
-import IconButton from "@material-ui/core/IconButton";
-import MenuIcon from "@material-ui/icons/Menu";
-import Tooltip from "@material-ui/core/Tooltip";
-import GitHub from "../icons/GitHub";
-import withRoot from "../utils/withRoot";
-import { withStyles } from "@material-ui/core/styles";
-import Menu from "./Menu";
+import React from 'react';
+import PropTypes from 'prop-types';
+import Head from 'next/head';
+import Typography from '@material-ui/core/Typography';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import Tooltip from '@material-ui/core/Tooltip';
+import GitHub from '../icons/GitHub';
+import withRoot from '../utils/withRoot';
+import { withStyles } from '@material-ui/core/styles';
+import Menu from './Menu';
 
 /* eslint-disable import/no-webpack-loader-syntax  */
-import lightTheme from "!raw-loader!prismjs/themes/prism.css";
+import lightTheme from '!raw-loader!prismjs/themes/prism.css';
 
 const styles = theme => ({
   appBar: {
-    backgroundColor: "#23232f",
+    backgroundColor: '#23232f',
   },
   toolBar: {
-    justifyContent: "space-between",
+    justifyContent: 'space-between',
   },
   logo: {
-    display: "block",
-    height: "56px",
-    position: "relative",
-    top: "5px",
+    display: 'block',
+    height: '56px',
+    position: 'relative',
+    top: '5px',
   },
   wrapper: {
-    flex: "1 0 100%",
+    flex: '1 0 100%',
   },
   content: {
-    flex: "1 0 100%",
-    margin: "0 auto",
-    padding: "16px 16px 0px 16px",
-    marginTop: "64px",
-    minHeight: "600px",
-    maxWidth: "960px",
+    flex: '1 0 100%',
+    margin: '0 auto',
+    padding: '16px 16px 0px 16px',
+    marginTop: '64px',
+    minHeight: '600px',
+    maxWidth: '960px',
   },
   footer: {
-    flex: "1 0 100%",
-    marginTop: "32px",
+    flex: '1 0 100%',
+    marginTop: '32px',
   },
 });
 
@@ -51,8 +51,8 @@ class Layout extends React.Component {
   };
 
   componentDidMount() {
-    const styleNode = document.createElement("style");
-    styleNode.setAttribute("data-prism", "true");
+    const styleNode = document.createElement('style');
+    styleNode.setAttribute('data-prism', 'true');
     if (document.head) {
       document.head.appendChild(styleNode);
     }

diff --git a/docs/utils/withRoot.js b/docs/utils/withRoot.js
@@ -1,7 +1,7 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { MuiThemeProvider } from "@material-ui/core/styles";
-import getPageContext from "./getPageContext";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MuiThemeProvider } from '@material-ui/core/styles';
+import getPageContext from './getPageContext';
 
 function withRoot(Component) {
   class WithRoot extends React.Component {
@@ -11,7 +11,7 @@ function withRoot(Component) {
 
     componentDidMount() {
       // Remove the server-side injected CSS.
-      const jssStyles = document.querySelector("#jss-server-side");
+      const jssStyles = document.querySelector('#jss-server-side');
       if (jssStyles && jssStyles.parentNode) {
         jssStyles.parentNode.removeChild(jssStyles);
       }