Merge pull request #9 from patorjk/filterOptionsUpdates

Filter Popover Options updates

README.md

@@ -1,7 +1,3 @@
-<div align="center">
-  <img src="https://user-images.githubusercontent.com/19170080/34070522-e15d32e2-e235-11e7-8af5-fa704cdcad56.png" />
-</div>
-
 # MUI-DT - Datatables for Material-UI
 
 [![Build Status](https://travis-ci.org/patorjk/mui-dt.svg?branch=master)](https://travis-ci.org/patorjk/mui-dt)
@@ -159,6 +155,7 @@ The component accepts the following props:
 |**`onColumnViewChange`**|function||Callback function that triggers when a column view has been changed. `function(changedColumn: string, action: string) => void`
 |**`onDownload`**|function||A callback function that triggers when the user downloads the CSV file. In the callback, you can control what is written to the CSV file. `function(buildHead: (columns) => string, buildBody: (data) => string, columns, data) => string`. Return `false` to cancel download of file.
 |**`onFilterChange`**|function||Callback function that triggers when filters have changed. `function(changedColumnName: string, filterList: array, changedColumnIndex: number) => void`
+|**`onFilterConfirm`**|function||Callback function that is triggered when a user presses the "confirm" button on the filter popover. This occurs only if you've set filterPopoverOptions.mustConfirm option to true. `function(filterList: array) => void`
 |**`onRowClick`**|function||Callback function that triggers when a row is clicked. `function(rowData: string[], rowMeta: { dataIndex: number, rowIndex: number }) => void`
 |**`onRowsDelete`**|function||Callback function that triggers when row(s) are deleted. `function(rowsDeleted: object(lookup: {[dataIndex]: boolean}, data: arrayOfObjects: {index: number, dataIndex: number})) => void OR false` (Returning `false` prevents row deletion.)
 |**`onRowsExpand`**|function||Callback function that triggers when a row is expanded or collapsed. The rowsExpanded parameter can be used to save off the value for options.rowsExpanded for state changes. `function(affectedRows: array, allRowsExpanded: array, rowsExpanded: array) => void` [Example](https://github.com/patorjk/mui-dt/blob/master/examples/expandable-rows/index.js)
@@ -383,6 +380,11 @@ const options = {
 }
 ```
 
+## Breaking Changes with mui-datatables
+This library started as a fork of mui-datatables. I'm aiming to keep it similar enough so that someone could use this as a drop in replacement, however, the more I work on this library, the more it will evolve. Below I list list "breaking" changes with mui-datatables.
+
+* The "resetFilters" event that occurs for the onTableChange function is now called "clearFilters". (reason: with the addition of filterPopoverOptions and the ability to confirm filters, there needed to be a reset and a clear function. "reset" already existed and functioned as a "clear", so it was renamed)
+
 ## Contributing
 Thanks for taking an interest in the library and the github community!
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-dt",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [

src/MUIDataTable.js

@@ -963,7 +963,7 @@ class MUIDataTable extends React.Component {
     );
   };
 
-  resetFilters = () => {
+  clearFilters = () => {
     this.setState(
       prevState => {
         const filterList = prevState.columns.map(() => []);
@@ -976,7 +976,7 @@ class MUIDataTable extends React.Component {
         };
       },
       () => {
-        this.setTableAction('resetFilters');
+        this.setTableAction('clearFilters');
         if (this.options.onFilterChange) {
           this.options.onFilterChange(null, this.state.filterList, null);
         }
@@ -1344,7 +1344,7 @@ class MUIDataTable extends React.Component {
               filterPopoverOptions={this.options.filterPopoverOptions}
               filterUpdate={this.filterUpdate}
               options={this.options}
-              resetFilters={this.resetFilters}
+              clearFilters={this.clearFilters}
               searchText={searchText}
               searchTextUpdate={this.searchTextUpdate}
               setTableAction={this.setTableAction}

src/components/TableFilter.js

@@ -40,19 +40,40 @@ export const useStyles = makeStyles(theme => ({
   noMargin: {
     marginLeft: '0px',
   },
+  actionButtons: {
+    '@media screen and (max-width: 800px)': {
+      marginTop: '14px',
+    },
+  },
   confirmButton: {
-    marginLeft: '24px',
+    marginLeft: '0px',
     fontSize: '12px',
     cursor: 'pointer',
   },
-  reset: {
+  toolbar: {
     alignSelf: 'left',
+    display: 'flex',
+    justifyContent: 'space-between',
+    width:'100%',
   },
-  resetLink: {
-    marginLeft: '16px',
+  withConfirm: {
+    '@media screen and (max-width: 800px)': {
+      display: 'block',
+    },
+  },
+  menuButtons: {
+    marginLeft: '8px',
     fontSize: '12px',
     cursor: 'pointer',
+    '@media screen and (max-width: 800px)': {
+      marginLeft: 0
+    },
   },
+  normalToolbarButtons: {
+    marginLeft: '16px',
+    fontSize: '12px',
+    cursor: 'pointer',
+  },  
   filtersSelected: {
     alignSelf: 'right',
   },
@@ -99,7 +120,7 @@ function TableFilter(props) {
   const handleCheckboxChange = (index, value, column) => {
     filterUpdate(index, value, column, 'checkbox');
 
-    if (props.filterPopoverOptions.mustConfirm === false) {
+    if (props.filterPopoverOptions.mustConfirm !== true) {
       props.onFilterUpdate(index, value, column, 'checkbox');
     }
   };
@@ -110,31 +131,31 @@ function TableFilter(props) {
 
     filterUpdate(index, value, column, 'dropdown');
 
-    if (props.filterPopoverOptions.mustConfirm === false) {
+    if (props.filterPopoverOptions.mustConfirm !== true) {
       props.onFilterUpdate(index, value, column, 'dropdown');
     }
   };
 
   const handleMultiselectChange = (index, value, column) => {
     filterUpdate(index, value, column, 'multiselect');
 
-    if (props.filterPopoverOptions.mustConfirm === false) {
+    if (props.filterPopoverOptions.mustConfirm !== true) {
       props.onFilterUpdate(index, value, column, 'multiselect');
     }
   };
 
   const handleTextFieldChange = (event, index, column) => {
     filterUpdate(index, event.target.value, column, 'textField');
 
-    if (props.filterPopoverOptions.mustConfirm === false) {
+    if (props.filterPopoverOptions.mustConfirm !== true) {
       props.onFilterUpdate(index, event.target.value, column, 'textField');
     }
   };
 
   const handleCustomChange = (value, index, column) => {
     filterUpdate(index, value, column.name, column.filterType);
 
-    if (props.filterPopoverOptions.mustConfirm === false) {
+    if (props.filterPopoverOptions.mustConfirm !== true) {
       props.onFilterUpdate(index, value, column.name, column.filterType);
     }
   };
@@ -278,47 +299,85 @@ function TableFilter(props) {
       props.onFilterUpdate(index, filter, columns[index].name, 'custom');
     });
     props.handleClose();
+
+    if (options.onFilterConfirm) {
+      options.onFilterConfirm(filterList);
+    }
+  };
+
+  // only available when filters need to be confirmed
+  const resetFilters = () => {
+    setFilterList(props.filterList.map(item => item.slice()));
+  };
+
+  const clearFilters = () => {
+    setFilterList(filterList.map(item => []));
+
+    if (props.filterPopoverOptions.mustConfirm !== true) {
+      props.onFilterClear();
+    }
   };
 
-  const { columns, options, onFilterReset } = props;
+  const { columns, options } = props;
   const textLabels = options.textLabels.filter;
   const filterGridColumns = columns.filter(col => col.filter).length === 1 ? 1 : 2;
 
-  console.log('TableFilter render');
-  console.dir(props);
-
   return (
     <div className={classes.root}>
       <div className={classes.header}>
-        <div className={classes.reset}>
+        <div className={classNames({
+              [classes.toolbar]: true,
+              [classes.withConfirm]: props.filterPopoverOptions.mustConfirm
+            })}>
           <Typography
             variant="body2"
             className={classNames({
               [classes.title]: true,
             })}>
             {textLabels.title}
           </Typography>
-          {props.filterPopoverOptions.mustConfirm &&
+          <div className={classNames({
+              [classes.actionButtons]: props.filterPopoverOptions.mustConfirm
+            })}>
+            {props.filterPopoverOptions.mustConfirm &&
+              <>
+              <Button
+                color="primary"
+                variant="contained" 
+                className={classes.confirmButton}
+                tabIndex={0}
+                aria-label={props.filterPopoverOptions.confirmButtonLabel}
+                data-testid={'filterConfirm-button'}
+                onClick={applyFilters}>
+                {props.filterPopoverOptions.confirmButtonLabel}
+              </Button>
+              <Button
+                color="primary"
+                className={classNames({
+                  [classes.normalToolbarButtons]: props.filterPopoverOptions.mustConfirm ? false : true,
+                  [classes.menuButtons]: props.filterPopoverOptions.mustConfirm ? true : false,
+                })}
+                tabIndex={0}
+                aria-label={textLabels.reset}
+                data-testid={'filterReset-button'}
+                onClick={resetFilters}>
+                {textLabels.reset}
+              </Button>
+              </>
+            }
             <Button
               color="primary"
-              variant="contained" 
-              className={classes.confirmButton}
+              className={classNames({
+                [classes.normalToolbarButtons]: props.filterPopoverOptions.mustConfirm ? false : true,
+                [classes.menuButtons]: props.filterPopoverOptions.mustConfirm ? true : false,
+              })}
               tabIndex={0}
-              aria-label={props.filterPopoverOptions.confirmButtonLabel}
-              data-testid={'filterConfirm-button'}
-              onClick={applyFilters}>
-              {props.filterPopoverOptions.confirmButtonLabel}
+              aria-label={textLabels.clear}
+              data-testid={'filterClear-button'}
+              onClick={clearFilters}>
+              {textLabels.clear}
             </Button>
-        }
-          <Button
-            color="primary"
-            className={classes.resetLink}
-            tabIndex={0}
-            aria-label={textLabels.reset}
-            data-testid={'filterReset-button'}
-            onClick={onFilterReset}>
-            {textLabels.reset}
-          </Button>
+          </div>
         </div>
         <div className={classes.filtersSelected} />
       </div>
@@ -349,8 +408,8 @@ TableFilter.propTypes = {
   filterList: PropTypes.array.isRequired,
   /** Options for the filter popover */
   filterPopoverOptions: PropTypes.object.isRequired,
-  /** Callback to trigger filter reset */
-  onFilterRest: PropTypes.func,
+  /** Callback to trigger filter clear */
+  onFilterClear: PropTypes.func,
   /** Callback to trigger filter update */
   onFilterUpdate: PropTypes.func,
   /** Options used to describe table */

src/components/TableToolbar.js

@@ -192,7 +192,7 @@ class TableToolbar extends React.Component {
       filterPopoverOptions,
       filterUpdate,
       options,
-      resetFilters,
+      clearFilters,
       tableRef,
       title,
       toggleViewColumn,
@@ -323,7 +323,7 @@ class TableToolbar extends React.Component {
                   filterPopoverOptions={filterPopoverOptions}
                   handleClose={closeFilterPopover}
                   onFilterUpdate={filterUpdate}
-                  onFilterReset={resetFilters}
+                  onFilterClear={clearFilters}
                   updateFilterByType={updateFilterByType}
                 />
               }

src/textLabels.js

@@ -25,6 +25,7 @@ const textLabels = {
     all: 'All',
     title: 'FILTERS',
     reset: 'RESET',
+    clear: 'CLEAR',
   },
   viewColumns: {
     title: 'Show Columns',

test/MUIDataTable.test.js

@@ -655,7 +655,7 @@ describe('<MUIDataTable />', function() {
     assert.deepEqual(state.filterList, [[], [], [], [], []]);
   });
 
-  it('should properly reset internal filterList when calling resetFilters method', () => {
+  it('should properly reset internal filterList when calling clearFilters method', () => {
     // set a filter
     const shallowWrapper = shallow(<MUIDataTable columns={columns} data={data} />);
     const table = shallowWrapper.dive();
@@ -667,7 +667,7 @@ describe('<MUIDataTable />', function() {
     let state = table.state();
     assert.deepEqual(state.filterList, [['Joe James'], [], [], [], []]);
 
-    instance.resetFilters();
+    instance.clearFilters();
     table.update();
     state = table.state();
     assert.deepEqual(state.filterList, [[], [], [], [], []]);
@@ -704,7 +704,7 @@ describe('<MUIDataTable />', function() {
     assert.strictEqual(changedColumn, 'Company');
 
     // test reset filters
-    instance.resetFilters();
+    instance.clearFilters();
     table.update();
     assert.strictEqual(changedColumn, null);
   });