fix react-bootstrap-table#778

Author: AllenFang

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

@@ -17,14 +17,18 @@ export default (
   class FilterProvider extends React.Component {
     static propTypes = {
       data: PropTypes.array.isRequired,
-      columns: PropTypes.array.isRequired
+      columns: PropTypes.array.isRequired,
+      listenerForPagination: PropTypes.object
     }
 
     constructor(props) {
       super(props);
       this.currFilters = {};
       this.onFilter = this.onFilter.bind(this);
       this.onExternalFilter = this.onExternalFilter.bind(this);
+      this.state = {
+        data: props.data
+      };
     }
 
     componentDidMount() {
@@ -68,7 +72,12 @@ export default (
           filter.props.onFilter(filterVal);
         }
 
-        this.forceUpdate();
+        const { listenerForPagination, data } = this.props;
+        const result = filters(data, this.props.columns, _)(this.currFilters);
+        if (listenerForPagination) {
+          listenerForPagination.emit('filterChanged', result.length);
+        }
+        this.setState({ data: result });
       };
     }
 
@@ -79,13 +88,9 @@ export default (
     }
 
     render() {
-      let { data } = this.props;
-      if (!isRemoteFiltering()) {
-        data = filters(data, this.props.columns, _)(this.currFilters);
-      }
       return (
         <FilterContext.Provider value={ {
-          data,
+          data: this.state.data,
           onFilter: this.onFilter,
           onExternalFilter: this.onExternalFilter
         } }

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

@@ -45,7 +45,8 @@ describe('FilterContext', () => {
 
   function shallowContext(
     enableRemote = false,
-    tableColumns = columns
+    tableColumns = columns,
+    listenerForPagination,
   ) {
     mockBase.mockReset();
     handleFilterChange.mockReset();
@@ -59,6 +60,7 @@ describe('FilterContext', () => {
       <FilterContext.Provider
         columns={ tableColumns }
         data={ data }
+        listenerForPagination={ listenerForPagination }
       >
         <FilterContext.Consumer>
           {
@@ -252,6 +254,23 @@ describe('FilterContext', () => {
       });
     });
 
+    describe('when props.listenerForPagination is defined', () => {
+      const filterVal = '3';
+      const newDataLength = 0;
+      const listenerForPagination = { emit: jest.fn() };
+
+      beforeEach(() => {
+        wrapper = shallow(shallowContext(false, columns, listenerForPagination));
+        wrapper.render();
+        instance = wrapper.instance();
+      });
+
+      it('should call listenerForPagination.emit correctly', () => {
+        instance.onFilter(columns[1], FILTER_TYPE.TEXT)(filterVal);
+        expect(listenerForPagination.emit).toHaveBeenCalledWith('filterChanged', newDataLength);
+      });
+    });
+
     describe('combination', () => {
       beforeEach(() => {
         wrapper = shallow(shallowContext());

packages/react-bootstrap-table2-paginator/src/state-context.js

@@ -2,14 +2,17 @@
 /* eslint react/require-default-props: 0 */
 /* eslint no-lonely-if: 0 */
 import React from 'react';
+import EventEmitter from 'events';
 import Const from './const';
+import { alignPage } from './page';
 
 const StateContext = React.createContext();
 
 class StateProvider extends React.Component {
   constructor(props) {
     super(props);
     this.handleChangePage = this.handleChangePage.bind(this);
+    this.handleDataSizeChange = this.handleDataSizeChange.bind(this);
     this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
 
     let currPage;
@@ -36,7 +39,10 @@ class StateProvider extends React.Component {
     }
 
     this.currPage = currPage;
+    this.dataSize = options.totalSize;
     this.currSizePerPage = currSizePerPage;
+    this.filterListener = new EventEmitter();
+    this.filterListener.on('filterChanged', this.handleDataSizeChange);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -51,7 +57,7 @@ class StateProvider extends React.Component {
 
   getPaginationProps = () => {
     const { pagination: { options }, bootstrap4 } = this.props;
-    const { currPage, currSizePerPage } = this;
+    const { currPage, currSizePerPage, dataSize } = this;
     const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
       Const.With_FIRST_AND_LAST : options.withFirstAndLast;
     const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
@@ -72,7 +78,7 @@ class StateProvider extends React.Component {
       hideSizePerPage,
       alwaysShowAllBtns,
       withFirstAndLast,
-      dataSize: options.totalSize,
+      dataSize,
       sizePerPageList: options.sizePerPageList || Const.SIZE_PER_PAGE_LIST,
       paginationSize: options.paginationSize || Const.PAGINATION_SIZE,
       showTotal: options.showTotal,
@@ -106,6 +112,20 @@ class StateProvider extends React.Component {
     return e.result;
   };
 
+  handleDataSizeChange(newDataSize) {
+    const { pagination: { options } } = this.props;
+    const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
+      Const.PAGE_START_INDEX : options.pageStartIndex;
+    this.dataSize = newDataSize;
+    this.currPage = alignPage(
+      newDataSize,
+      this.currPage,
+      this.currSizePerPage,
+      pageStartIndex
+    );
+    this.forceUpdate();
+  }
+
   handleChangePage(currPage) {
     const { currSizePerPage } = this;
     const { pagination: { options } } = this.props;
@@ -153,7 +173,8 @@ class StateProvider extends React.Component {
           paginationProps,
           paginationTableProps: {
             pagination,
-            setPaginationRemoteEmitter: this.setPaginationRemoteEmitter
+            setPaginationRemoteEmitter: this.setPaginationRemoteEmitter,
+            listenerForPagination: this.filterListener
           }
         } }
       >