fix react-bootstrap-table#1221

Author: AllenFang

packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js

@@ -1,13 +1,20 @@
 import React from 'react';
 import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { textFilter, dateFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { textFilter, dateFilter, selectFilter } from 'react-bootstrap-table2-filter';
 import Code from 'components/common/code-block';
 import { stockGenerator } from 'utils/common';
 
 const products = stockGenerator(8);
 
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
 let nameFilter;
 let priceFilter;
+let qualityFilter;
 let stockDateFilter;
 
 const columns = [{
@@ -19,15 +26,28 @@ const columns = [{
   filter: textFilter({
     getFilter: (filter) => {
       nameFilter = filter;
-    }
+    },
+    onFilter: filterVal => console.log(`Filter product name ${filterVal}`)
+  })
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    getFilter: (filter) => {
+      qualityFilter = filter;
+    },
+    onFilter: filterVal => console.log(`Filter quality ${filterVal}`)
   })
 }, {
   dataField: 'price',
   text: 'Price',
   filter: textFilter({
     getFilter: (filter) => {
       priceFilter = filter;
-    }
+    },
+    onFilter: filterVal => console.log(`Filter Price: ${filterVal}`)
   })
 }, {
   dataField: 'inStockDate',
@@ -36,13 +56,15 @@ const columns = [{
   filter: dateFilter({
     getFilter: (filter) => {
       stockDateFilter = filter;
-    }
+    },
+    onFilter: filterVal => console.log(`Filter date: ${filterVal}`)
   })
 }];
 
 const handleClick = () => {
   nameFilter('');
   priceFilter('');
+  qualityFilter('');
   stockDateFilter();
 };
 

packages/react-bootstrap-table2-example/src/utils/common.js

@@ -77,6 +77,7 @@ export const stockGenerator = (quantity = 5) =>
     name: `Stock Name ${index}`,
     price: Math.floor((Math.random() * 2) + 1),
     visible: Math.random() > 0.5,
+    quality: index % 3,
     inStockDate:
       new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()))
   }));

packages/react-bootstrap-table2-filter/src/context.js

@@ -25,6 +25,7 @@ export default (
     constructor(props) {
       super(props);
       this.currFilters = {};
+      this.clearFilters = {};
       this.onFilter = this.onFilter.bind(this);
       this.doFilter = this.doFilter.bind(this);
       this.onExternalFilter = this.onExternalFilter.bind(this);
@@ -42,6 +43,7 @@ export default (
       return (filterVal) => {
         // watch out here if migration to context API, #334
         const currFilters = Object.assign({}, this.currFilters);
+        this.clearFilters = {};
         const { dataField, filter } = column;
 
         const needClearFilters =
@@ -51,6 +53,7 @@ export default (
 
         if (needClearFilters) {
           delete currFilters[dataField];
+          this.clearFilters = { [dataField]: { clear: true, filterVal } };
         } else {
           // select default comparator is EQ, others are LIKE
           const {
@@ -93,7 +96,7 @@ export default (
 
     doFilter(props, ignoreEmitDataChange = false) {
       const { dataChangeListener, data, columns } = props;
-      const result = filters(data, columns, _)(this.currFilters);
+      const result = filters(data, columns, _)(this.currFilters, this.clearFilters);
       this.data = result;
       if (dataChangeListener && !ignoreEmitDataChange) {
         this.isEmitDataChange = true;

packages/react-bootstrap-table2-filter/src/filter.js

@@ -229,14 +229,13 @@ export const filterFactory = _ => (filterType) => {
   return filterFn;
 };
 
-export const filters = (data, columns, _) => (currFilters) => {
+export const filters = (data, columns, _) => (currFilters, clearFilters = {}) => {
   const factory = filterFactory(_);
+  const filterState = { ...clearFilters, ...currFilters };
   let result = data;
   let filterFn;
-  Object.keys(currFilters).forEach((dataField) => {
+  Object.keys(filterState).forEach((dataField) => {
     let currentResult;
-    const filterObj = currFilters[dataField];
-    filterFn = factory(filterObj.filterType);
     let filterValue;
     let customFilter;
     for (let i = 0; i < columns.length; i += 1) {
@@ -248,13 +247,23 @@ export const filters = (data, columns, _) => (currFilters) => {
         break;
       }
     }
-    if (customFilter) {
-      currentResult = customFilter(filterObj.filterVal, result);
-    }
-    if (typeof currentResult === 'undefined') {
-      result = filterFn(result, dataField, filterObj, filterValue);
+
+    if (clearFilters[dataField] && customFilter) {
+      currentResult = customFilter(clearFilters[dataField].filterVal, result);
+      if (typeof currentResult !== 'undefined') {
+        result = currentResult;
+      }
     } else {
-      result = currentResult;
+      const filterObj = filterState[dataField];
+      filterFn = factory(filterObj.filterType);
+      if (customFilter) {
+        currentResult = customFilter(filterObj.filterVal, result);
+      }
+      if (typeof currentResult === 'undefined') {
+        result = filterFn(result, dataField, filterObj, filterValue);
+      } else {
+        result = currentResult;
+      }
     }
   });
   return result;

packages/react-bootstrap-table2-filter/test/context.test.js

@@ -171,6 +171,7 @@ describe('FilterContext', () => {
         filterVals.forEach((filterVal) => {
           instance.onFilter(columns[1], FILTER_TYPE.TEXT)(filterVal);
           expect(Object.keys(instance.currFilters)).toHaveLength(0);
+          expect(Object.keys(instance.clearFilters)).toHaveLength(1);
         });
       });
     });