Fix for Memory Leak in TableToolbar (#829)

* refactored styled.js out of TableToolbar

* removed test code

Author: patorjk

src/MUIDataTable.js

@@ -295,6 +295,9 @@ class MUIDataTable extends React.Component {
     if (props.options.rowsPerPageOptions) {
       this.options.rowsPerPageOptions = props.options.rowsPerPageOptions;
     }
+    if (['scroll', 'stacked'].indexOf(this.options.responsive) === -1) {
+      console.error('Invalid option value for responsive. Please use string option: stacked | scroll');
+    }
   }
 
   validateOptions(options) {

src/components/TableToolbar.js

@@ -13,10 +13,10 @@ import PrintIcon from '@material-ui/icons/Print';
 import ViewColumnIcon from '@material-ui/icons/ViewColumn';
 import FilterIcon from '@material-ui/icons/FilterList';
 import ReactToPrint from 'react-to-print';
-import styled from '../styled';
+import { withStyles } from '@material-ui/core/styles';
 import { createCSVDownload } from '../utils';
 
-export const defaultToolbarStyles = (theme, props) => ({
+export const defaultToolbarStyles = theme => ({
   root: {},
   left: {
     flex: '1 1 auto',
@@ -43,10 +43,6 @@ export const defaultToolbarStyles = (theme, props) => ({
     marginTop: '10px',
     marginRight: '8px',
   },
-  ...(props.options.responsive ? { ...responsiveToolbarStyles(theme) } : {}),
-});
-
-export const responsiveToolbarStyles = theme => ({
   [theme.breakpoints.down('sm')]: {
     titleRoot: {},
     titleText: {
@@ -315,4 +311,4 @@ class TableToolbar extends React.Component {
   }
 }
 
-export default styled(TableToolbar)(defaultToolbarStyles, { name: 'MUIDataTableToolbar' });
+export default withStyles(defaultToolbarStyles, { name: 'MUIDataTableToolbar' })(TableToolbar);

src/styled.js

@@ -130,8 +130,6 @@ describe('<TableToolbar />', function() {
     const shallowWrapper = shallow(
       <TableToolbar columns={columns} data={data} options={newOptions} setTableAction={setTableAction} />,
     )
-      .dive()
-      .dive()
       .dive();
     const instance = shallowWrapper.instance();
     instance.setActiveIcon('search');
@@ -144,8 +142,6 @@ describe('<TableToolbar />', function() {
     const shallowWrapper = shallow(
       <TableToolbar columns={columns} data={data} options={options} setTableAction={setTableAction} />,
     )
-      .dive()
-      .dive()
       .dive();
     const instance = shallowWrapper.instance();
 
@@ -167,8 +163,6 @@ describe('<TableToolbar />', function() {
         setTableAction={setTableAction}
       />,
     )
-      .dive()
-      .dive()
       .dive();
     const instance = shallowWrapper.instance();
 
@@ -195,8 +189,6 @@ describe('<TableToolbar />', function() {
     const shallowWrapper = shallow(
       <TableToolbar columns={columns} data={data} options={options} setTableAction={setTableAction} />,
     )
-      .dive()
-      .dive()
       .dive();
     const instance = shallowWrapper.instance();
 
@@ -218,8 +210,6 @@ describe('<TableToolbar />', function() {
       />,
     );
     const instance = shallowWrapper
-      .dive()
-      .dive()
       .dive()
       .instance();
 
@@ -247,8 +237,6 @@ describe('<TableToolbar />', function() {
     );
 
     const instance = shallowWrapper
-      .dive()
-      .dive()
       .dive()
       .instance();