fix liftcycle issue (#149)

packages/react-bootstrap-table2-paginator/src/index.js

@@ -1,8 +1,6 @@
-import Pagination from './pagination';
-import wrapper from './wrapper';
+import PaginationWrapper from './wrapper';
 
 export default (options = {}) => ({
-  Pagination,
-  wrapper,
+  PaginationWrapper,
   options
 });

packages/react-bootstrap-table2-paginator/src/wrapper.js

@@ -5,135 +5,152 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import Const from './const';
+import Pagination from './pagination';
 import { getByCurrPage } from './page';
 
-const wrapperFactory = baseElement =>
-  class PaginationWrapper extends Component {
-    static propTypes = {
-      store: PropTypes.object.isRequired
+class PaginationWrapper extends Component {
+  static propTypes = {
+    store: PropTypes.object.isRequired,
+    baseElement: PropTypes.func.isRequired
+  }
+
+  constructor(props) {
+    super(props);
+    this.handleChangePage = this.handleChangePage.bind(this);
+    this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
+
+    let currPage;
+    let currSizePerPage;
+    const { options } = props.pagination;
+    const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;
+
+    // initialize current page
+    if (typeof options.page !== 'undefined') {
+      currPage = options.page;
+    } else if (typeof options.pageStartIndex !== 'undefined') {
+      currPage = options.pageStartIndex;
+    } else {
+      currPage = Const.PAGE_START_INDEX;
     }
 
-    constructor(props) {
-      super(props);
-      this.handleChangePage = this.handleChangePage.bind(this);
-      this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
-
-      let currPage;
-      let currSizePerPage;
-      const options = props.pagination.options || {};
-      const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;
-
-      // initialize current page
-      if (typeof options.page !== 'undefined') {
-        currPage = options.page;
-      } else if (typeof options.pageStartIndex !== 'undefined') {
-        currPage = options.pageStartIndex;
-      } else {
-        currPage = Const.PAGE_START_INDEX;
-      }
-
-      // initialize current sizePerPage
-      if (typeof options.sizePerPage !== 'undefined') {
-        currSizePerPage = options.sizePerPage;
-      } else if (typeof sizePerPageList[0] === 'object') {
-        currSizePerPage = sizePerPageList[0].value;
-      } else {
-        currSizePerPage = sizePerPageList[0];
-      }
-
-      this.state = { currPage, currSizePerPage };
+    // initialize current sizePerPage
+    if (typeof options.sizePerPage !== 'undefined') {
+      currSizePerPage = options.sizePerPage;
+    } else if (typeof sizePerPageList[0] === 'object') {
+      currSizePerPage = sizePerPageList[0].value;
+    } else {
+      currSizePerPage = sizePerPageList[0];
     }
 
-    isRemote() {
-      const { remote } = this.props;
-      return remote === true || (typeof remote === 'object' && remote.pagination);
+    this.state = { currPage, currSizePerPage };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    let needNewState = false;
+    let { currPage, currSizePerPage } = this.state;
+    const { page, sizePerPage } = nextProps.pagination.options;
+    if (typeof page !== 'undefined') {
+      currPage = page;
+      needNewState = true;
+    }
+    if (typeof sizePerPage !== 'undefined') {
+      currSizePerPage = sizePerPage;
+      needNewState = true;
     }
 
-    handleChangePage(currPage) {
-      const { currSizePerPage } = this.state;
-      const { pagination: { options }, onRemotePageChange } = this.props;
-      if (options.onPageChange) {
-        options.onPageChange(currPage, currSizePerPage);
-      }
-      if (this.isRemote()) {
-        onRemotePageChange(currPage, currSizePerPage);
-        return;
-      }
-      this.setState(() => {
-        return {
-          currPage
-        };
-      });
+    if (needNewState) this.setState(() => ({ currPage, currSizePerPage }));
+  }
+
+  isRemote() {
+    const { remote } = this.props;
+    return remote === true || (typeof remote === 'object' && remote.pagination);
+  }
+
+  handleChangePage(currPage) {
+    const { currSizePerPage } = this.state;
+    const { pagination: { options }, onRemotePageChange } = this.props;
+    if (options.onPageChange) {
+      options.onPageChange(currPage, currSizePerPage);
     }
-
-    handleChangeSizePerPage(currSizePerPage, currPage) {
-      const { pagination: { options }, onRemotePageChange } = this.props;
-      if (options.onSizePerPageChange) {
-        options.onSizePerPageChange(currSizePerPage, currPage);
-      }
-      if (this.isRemote()) {
-        onRemotePageChange(currPage, currSizePerPage);
-        return;
-      }
-      this.setState(() => {
-        return {
-          currPage,
-          currSizePerPage
-        };
-      });
+    if (this.isRemote()) {
+      onRemotePageChange(currPage, currSizePerPage);
+      return;
     }
+    this.setState(() => {
+      return {
+        currPage
+      };
+    });
+  }
 
-    render() {
-      const { pagination: { Pagination, options }, store } = this.props;
-      const { currPage, currSizePerPage } = this.state;
-      const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
-        Const.With_FIRST_AND_LAST : options.withFirstAndLast;
-      const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
-        Const.SHOW_ALL_PAGE_BTNS : options.alwaysShowAllBtns;
-      const hideSizePerPage = typeof options.hideSizePerPage === 'undefined' ?
-        Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
-      const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
-        Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
-      const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
-        Const.PAGE_START_INDEX : options.pageStartIndex;
-
-      const data = this.isRemote() ?
-        this.props.data :
-        getByCurrPage(store)(currPage, currSizePerPage, pageStartIndex);
-
-      const base = baseElement({
-        ...this.props,
-        key: 'table',
-        data
-      });
-
-      return [
-        base,
-        <Pagination
-          key="pagination"
-          dataSize={ options.totalSize || store.data.length }
-          currPage={ currPage }
-          currSizePerPage={ currSizePerPage }
-          onPageChange={ this.handleChangePage }
-          onSizePerPageChange={ this.handleChangeSizePerPage }
-          sizePerPageList={ options.sizePerPageList || Const.SIZE_PER_PAGE_LIST }
-          paginationSize={ options.paginationSize || Const.PAGINATION_SIZE }
-          pageStartIndex={ pageStartIndex }
-          withFirstAndLast={ withFirstAndLast }
-          alwaysShowAllBtns={ alwaysShowAllBtns }
-          hideSizePerPage={ hideSizePerPage }
-          hidePageListOnlyOnePage={ hidePageListOnlyOnePage }
-          firstPageText={ options.firstPageText || Const.FIRST_PAGE_TEXT }
-          prePageText={ options.prePageText || Const.PRE_PAGE_TEXT }
-          nextPageText={ options.nextPageText || Const.NEXT_PAGE_TEXT }
-          lastPageText={ options.lastPageText || Const.LAST_PAGE_TEXT }
-          prePageTitle={ options.prePageTitle || Const.PRE_PAGE_TITLE }
-          nextPageTitle={ options.nextPageTitle || Const.NEXT_PAGE_TITLE }
-          firstPageTitle={ options.firstPageTitle || Const.FIRST_PAGE_TITLE }
-          lastPageTitle={ options.lastPageTitle || Const.LAST_PAGE_TITLE }
-        />
-      ];
+  handleChangeSizePerPage(currSizePerPage, currPage) {
+    const { pagination: { options }, onRemotePageChange } = this.props;
+    if (options.onSizePerPageChange) {
+      options.onSizePerPageChange(currSizePerPage, currPage);
     }
-  };
+    if (this.isRemote()) {
+      onRemotePageChange(currPage, currSizePerPage);
+      return;
+    }
+    this.setState(() => {
+      return {
+        currPage,
+        currSizePerPage
+      };
+    });
+  }
 
-export default wrapperFactory;
+  render() {
+    const { pagination: { options }, store, baseElement } = this.props;
+    const { currPage, currSizePerPage } = this.state;
+    const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
+      Const.With_FIRST_AND_LAST : options.withFirstAndLast;
+    const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
+      Const.SHOW_ALL_PAGE_BTNS : options.alwaysShowAllBtns;
+    const hideSizePerPage = typeof options.hideSizePerPage === 'undefined' ?
+      Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
+    const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
+      Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
+    const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
+      Const.PAGE_START_INDEX : options.pageStartIndex;
+
+    const data = this.isRemote() ?
+      this.props.data :
+      getByCurrPage(store)(currPage, currSizePerPage, pageStartIndex);
+
+    const base = baseElement({
+      ...this.props,
+      key: 'table',
+      data
+    });
+
+    return [
+      base,
+      <Pagination
+        key="pagination"
+        dataSize={ options.totalSize || store.data.length }
+        currPage={ currPage }
+        currSizePerPage={ currSizePerPage }
+        onPageChange={ this.handleChangePage }
+        onSizePerPageChange={ this.handleChangeSizePerPage }
+        sizePerPageList={ options.sizePerPageList || Const.SIZE_PER_PAGE_LIST }
+        paginationSize={ options.paginationSize || Const.PAGINATION_SIZE }
+        pageStartIndex={ pageStartIndex }
+        withFirstAndLast={ withFirstAndLast }
+        alwaysShowAllBtns={ alwaysShowAllBtns }
+        hideSizePerPage={ hideSizePerPage }
+        hidePageListOnlyOnePage={ hidePageListOnlyOnePage }
+        firstPageText={ options.firstPageText || Const.FIRST_PAGE_TEXT }
+        prePageText={ options.prePageText || Const.PRE_PAGE_TEXT }
+        nextPageText={ options.nextPageText || Const.NEXT_PAGE_TEXT }
+        lastPageText={ options.lastPageText || Const.LAST_PAGE_TEXT }
+        prePageTitle={ options.prePageTitle || Const.PRE_PAGE_TITLE }
+        nextPageTitle={ options.nextPageTitle || Const.NEXT_PAGE_TITLE }
+        firstPageTitle={ options.firstPageTitle || Const.FIRST_PAGE_TITLE }
+        lastPageTitle={ options.lastPageTitle || Const.LAST_PAGE_TITLE }
+      />
+    ];
+  }
+}
+
+export default PaginationWrapper;

packages/react-bootstrap-table2-paginator/test/wrapper.test.js

@@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
 import BootstrapTable from 'react-bootstrap-table2/src/bootstrap-table';
 import Store from 'react-bootstrap-table2/src/store';
 import paginator from '../src';
-import wrapperFactory from '../src/wrapper';
+import PaginationWrapper from '../src/wrapper';
 import Pagination from '../src/pagination';
 import Const from '../src/const';
 
@@ -19,7 +19,6 @@ for (let i = 0; i < 100; i += 1) {
 }
 
 describe('Wrapper', () => {
-  let PaginationWrapper;
   let wrapper;
   let instance;
 
@@ -44,8 +43,7 @@ describe('Wrapper', () => {
   const pureTable = props => (<BootstrapTable { ...props } />);
 
   const createPaginationWrapper = (props, renderFragment = true) => {
-    PaginationWrapper = wrapperFactory(pureTable);
-    wrapper = shallow(<PaginationWrapper { ...props } />);
+    wrapper = shallow(<PaginationWrapper { ...props } baseElement={ pureTable } />);
     instance = wrapper.instance();
     if (renderFragment) {
       const fragment = instance.render();
@@ -100,6 +98,32 @@ describe('Wrapper', () => {
       expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE);
       expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
     });
+
+    describe('componentWillReceiveProps', () => {
+      it('should setting currPage state correclt by options.page', () => {
+        props.pagination.options.page = 2;
+        instance.componentWillReceiveProps(props);
+        expect(instance.state.currPage).toEqual(props.pagination.options.page);
+      });
+
+      it('should not setting currPage state if options.page not existing', () => {
+        const { currPage } = instance.state;
+        instance.componentWillReceiveProps(props);
+        expect(instance.state.currPage).toBe(currPage);
+      });
+
+      it('should setting currSizePerPage state correclt by options.sizePerPage', () => {
+        props.pagination.options.sizePerPage = 20;
+        instance.componentWillReceiveProps(props);
+        expect(instance.state.currSizePerPage).toEqual(props.pagination.options.sizePerPage);
+      });
+
+      it('should not setting currSizePerPage state if options.sizePerPage not existing', () => {
+        const { currSizePerPage } = instance.state;
+        instance.componentWillReceiveProps(props);
+        expect(instance.state.currSizePerPage).toBe(currSizePerPage);
+      });
+    });
   });
 
   describe('when options.page is defined', () => {

packages/react-bootstrap-table2/src/table-factory.js

@@ -21,9 +21,8 @@ export const pureTable = props =>
 
 export const wrapWithPagination = (props) => {
   if (props.pagination) {
-    const { wrapper } = props.pagination;
-    const PaginationBase = wrapper(pureTable);
-    return React.createElement(PaginationBase, { ...props });
+    const { PaginationWrapper } = props.pagination;
+    return React.createElement(PaginationWrapper, { ...props, baseElement: pureTable });
   }
   return pureTable(props);
 };

packages/react-bootstrap-table2/test/container.test.js

@@ -156,7 +156,7 @@ describe('withDataStore', () => {
   describe('when pagination prop is defined', () => {
     const PaginationWrapper = () => <div>test</div>;
     const pagination = {
-      wrapper: jest.fn().mockReturnValue(PaginationWrapper)
+      PaginationWrapper
     };
 
     beforeEach(() => {
@@ -177,6 +177,7 @@ describe('withDataStore', () => {
     it('should injecting correct props to Pagination wrapper', () => {
       const component = wrapper.find(PaginationWrapper);
       expect(component.props().onRemotePageChange).toBeDefined();
+      expect(component.props().baseElement).toBeDefined();
     });
   });