Merge pull request #8 from patorjk/filterPopoverOptions

Added filterPopoverOptions feature.
patorjk · Sep 9, 2019 · fa9435f · fa9435f
2 parents 3a1039f + b97dba5
commit fa9435f
Show file tree

Hide file tree

Showing 6 changed files with 213 additions and 114 deletions.
diff --git a/README.md b/README.md
@@ -148,6 +148,7 @@ The component accepts the following props:
 |**`expandableRowsOnClick`**|boolean|false|Enable/disable expand trigger when row is clicked. When False, only expand icon will trigger this action.
 |**`filter`**|boolean|true|Show/hide filter icon from toolbar.
 |**`filterType `**|string||Choice of filtering view. `enum('checkbox', 'dropdown', 'multiselect', 'textField')`
+|**`filterPopoverOptions`**|object|`{mustConfirm: false, confirmButtonLabel: 'Submit'}`|Options to change the filter popover. Can be useful for serverSide filtering where you want to confirm the filters before applying them. Options: `mustConfirm`: boolean, `confirmButtonLabel`: string
 |**`fixedHeader`**|boolean|true|Enable/disable fixed header columns.
 |**`isRowExpandable`**|function||Enable/disable expansion or collapse on certain expandable rows with custom function. Will be considered true if not provided. `function(dataIndex: number, expandedRows: object(lookup: {dataIndex: number}, data: arrayOfObjects: {index: number, dataIndex: number})) => bool`.
 |**`isRowSelectable`**|function||Enable/disable selection on certain rows with custom function. Returns true if not provided. `function(dataIndex: number, selectedRows: object(lookup: {[dataIndex]: boolean}, data: arrayOfObjects: {index: number, dataIndex: number})) => boolean`.

diff --git a/examples/customize-filter/index.js b/examples/customize-filter/index.js
@@ -143,6 +143,9 @@ class Example extends React.Component {
       checkboxColor: 'secondary',
       filter: true,
       filterType: 'dropdown',
+      filterPopoverOptions: {
+        mustConfirm: true,
+      },
       responsive: 'scroll',
       onFilterChange: (name, filterList, index) => {
         console.log('onFilterChange callback');

diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
@@ -144,6 +144,10 @@ class MUIDataTable extends React.Component {
       expandableRowsOnClick: PropTypes.bool,
       filter: PropTypes.bool,
       filterType: PropTypes.oneOf(['dropdown', 'checkbox', 'multiselect', 'textField', 'custom']),
+      filterPopoverOptions: PropTypes.shape({
+        mustConfirm: PropTypes.bool,
+        confirmButtonLabel: PropTypes.string,
+      }),
       fixedHeader: PropTypes.bool,
       isRowExpandable: PropTypes.func,
       isRowSelectable: PropTypes.func,
@@ -264,7 +268,7 @@ class MUIDataTable extends React.Component {
   updateOptions(options, props) {
     this.options = assignwith(options, props.options, (objValue, srcValue, key) => {
       // Merge any default options that are objects, as they will be overwritten otherwise
-      if (key === 'textLabels' || key === 'downloadOptions') return merge(objValue, srcValue);
+      if (key === 'textLabels' || key === 'downloadOptions' || key === 'filterPopoverOptions') return merge(objValue, srcValue);
       return;
     });
 
@@ -293,6 +297,10 @@ class MUIDataTable extends React.Component {
     expandableRowsOnClick: false,
     filter: true,
     filterType: 'dropdown',
+    filterPopoverOptions: {
+      mustConfirm: false,
+      confirmButtonLabel: 'Submit',
+    },
     fixedHeader: true,
     resizableColumns: false,
     responsive: 'stacked',
@@ -976,27 +984,32 @@ class MUIDataTable extends React.Component {
     );
   };
 
+  // filter = 
+  updateFilterByType = (filterList, index, value, column, type) => {
+    const filterPos = filterList[index].indexOf(value);
+
+    switch (type) {
+      case 'checkbox':
+        filterPos >= 0 ? filterList[index].splice(filterPos, 1) : filterList[index].push(value);
+        break;
+      case 'multiselect':
+      case 'dropdown':
+      case 'custom':
+        if (!Array.isArray(value)) {
+          console.warn('filterUpdate: Invalid value for filter.');
+        }
+        filterList[index] = value;
+        break;
+      default:
+        filterList[index] = filterPos >= 0 || value === '' ? [] : [value];
+    }
+  }
+
   filterUpdate = (index, value, column, type) => {
     this.setState(
       prevState => {
         const filterList = prevState.filterList.slice(0);
-        const filterPos = filterList[index].indexOf(value);
-
-        switch (type) {
-          case 'checkbox':
-            filterPos >= 0 ? filterList[index].splice(filterPos, 1) : filterList[index].push(value);
-            break;
-          case 'multiselect':
-          case 'dropdown':
-          case 'custom':
-            if (!Array.isArray(value)) {
-              console.warn('filterUpdate: Invalid value for filter.');
-            }
-            filterList[index] = value;
-            break;
-          default:
-            filterList[index] = filterPos >= 0 || value === '' ? [] : [value];
-        }
+        this.updateFilterByType(filterList, index, value, column, type);
 
         return {
           page: 0,
@@ -1328,15 +1341,17 @@ class MUIDataTable extends React.Component {
               data={data}
               filterData={filterData}
               filterList={filterList}
+              filterPopoverOptions={this.options.filterPopoverOptions}
               filterUpdate={this.filterUpdate}
               options={this.options}
               resetFilters={this.resetFilters}
               searchText={searchText}
               searchTextUpdate={this.searchTextUpdate}
+              setTableAction={this.setTableAction}
               tableRef={this.getTableContentRef}
               title={title}
-              toggleViewColumn={this.toggleViewColumn}
-              setTableAction={this.setTableAction} />
+              toggleViewColumn={this.toggleViewColumn} 
+              updateFilterByType={this.updateFilterByType} />
           )
         )}
         <TableFilterList

diff --git a/src/components/Popover.js b/src/components/Popover.js
@@ -25,7 +25,13 @@ class Popover extends React.Component {
      */
     if (this.state.open === true) {
       this.anchorEl = findDOMNode(this.anchorEl);
-      this.popoverActions.updatePosition();
+      if (this.popoverActions) {
+        this.popoverActions.updatePosition();
+      }
+      const shouldHide = (typeof this.props.hide === 'boolean') ? this.props.hide : false;
+      if (shouldHide) {
+        this.handleRequestClose();
+      }
     }
   }
 
@@ -45,7 +51,7 @@ class Popover extends React.Component {
   };
 
   render() {
-    const { className, placement, trigger, refExit, content, ...providedProps } = this.props;
+    const { className, placement, trigger, refExit, content, hide, ...providedProps } = this.props;
 
     const transformOriginSpecs = {
       vertical: 'top',