fix #795

packages/react-bootstrap-table2-paginator/README.md

@@ -69,23 +69,23 @@ Sometime, you may feel above props is not satisfied with your requirement, don't
 * [sizePerPageOptionRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationsizeperpageoptionrenderer-function)
 * [paginationTotalRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpaginationtotalrenderer-function)
 
-### Professional
+### Fully Customization
 
-If you want to customize the pagination component completely, you may get interesting on following solution:
+If you want to customize the pagination component completely, you may get interesting on following solutions:
 
 * Standalone
 * Non-standalone
 
-`react-bootstrap-table2-paginator` have a `PaginationProvider` which is a react context and you will be easier to customize the pagination components under the scope of `PaginationProvider`. Let's introduce it step by step:
+`react-bootstrap-table2-paginator` have a `PaginationProvider` which is a react context and that will be easier to customize the pagination components under the scope of `PaginationProvider`. Let's introduce it step by step:
 
-#### Import PaginationProvider
+#### 1. Import PaginationProvider
 
 ```js
 import paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';
 
 ```
 
-#### Declare custom and totalSize in pagination option:
+#### 2. Declare custom and totalSize in pagination option:
 
 ```js
 const paginationOption = {
@@ -94,7 +94,7 @@ const paginationOption = {
 };
 ```
 
-#### Render PaginationProvider
+#### 3. Render PaginationProvider
 
 ```js
 <PaginationProvider
@@ -139,18 +139,24 @@ So far, your customization pagination is supposed to look like it:
 </PaginationProvider>
 ```
 
-Now, you have to choose, your built-in standalne components or you customize all of them by yourself:
+Now, you have to choose which solution you like: standalone or non-standalone ?
 
-#### Use Standalone Component
-`react-bootstrap-table2-paginator` provider two standalone components:
+#### 4.1 Use Standalone Component
+`react-bootstrap-table2-paginator` provider three standalone components:
 
 * Size Per Page Dropdwn Standalone
 * Pagination List Standalone
+* Pagination Total Standalone
 
 When render each standalone, you just need to pass the `paginationProps` props to standalone component:
 
 ```js
-import paginationFactory, { PaginationProvider, PaginationListStandalone, SizePerPageDropdownStandalone } from 'react-bootstrap-table2-paginator';
+import paginationFactory, {
+  PaginationProvider,
+  PaginationListStandalone,
+  SizePerPageDropdownStandalone,
+  PaginationTotalStandalone
+} from 'react-bootstrap-table2-paginator';
 
 <PaginationProvider
   pagination={ paginationFactory(options) }
@@ -164,6 +170,9 @@ import paginationFactory, { PaginationProvider, PaginationListStandalone, SizePe
         <SizePerPageDropdownStandalone
           { ...paginationProps }
         />
+        <PaginationTotalStandalone
+          { ...paginationProps }
+        />
         <BootstrapTable
           keyField="id"
           data={ products }
@@ -181,7 +190,7 @@ import paginationFactory, { PaginationProvider, PaginationListStandalone, SizePe
 
 That's it!!  The benifit for using standalone is you can much easier to render the standalone component in any posistion. In the future, we will implement more featue like applying `style`, `className` etc on standalone components.
 
-#### Customization Everything
+#### 4.2 Customization Everything
 
 If you choose to custom the pagination component by yourself, the `paginationProps` will be important for you. Becasue you have to know for example how to change page or what's the current page etc. Hence, following is all the props in `paginationProps` object:
 

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

@@ -4,6 +4,7 @@ import createBaseContext from './src/state-context';
 import createDataContext from './src/data-context';
 import PaginationListStandalone from './src/pagination-list-standalone';
 import SizePerPageDropdownStandalone from './src/size-per-page-dropdown-standalone';
+import PaginationTotalStandalone from './src/pagination-total-standalone';
 
 export default (options = {}) => ({
   createContext: createDataContext,
@@ -23,4 +24,4 @@ CustomizableProvider.propTypes = {
 };
 
 export const PaginationProvider = CustomizableProvider;
-export { PaginationListStandalone, SizePerPageDropdownStandalone };
+export { PaginationListStandalone, SizePerPageDropdownStandalone, PaginationTotalStandalone };

packages/react-bootstrap-table2-paginator/src/pagination-total-adapter.js

@@ -0,0 +1,24 @@
+/* eslint react/prop-types: 0 */
+import React, { Component } from 'react';
+
+import pageResolver from './page-resolver';
+import PaginationTotal from './pagination-total';
+
+const paginationTotalAdapter = WrappedComponent =>
+  class PaginationTotalAdapter extends pageResolver(Component) {
+    render() {
+      const [from, to] = this.calculateFromTo();
+      return (
+        <WrappedComponent
+          from={ from }
+          to={ to }
+          dataSize={ this.props.dataSize }
+          paginationTotalRenderer={ this.props.paginationTotalRenderer }
+        />
+      );
+    }
+  };
+
+
+export const PaginationTotalWithAdapter = paginationTotalAdapter(PaginationTotal);
+export default paginationTotalAdapter;

packages/react-bootstrap-table2-paginator/src/pagination-total-standalone.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import PaginationTotal from './pagination-total';
+import standaloneAdapter from './standalone-adapter';
+import paginationTotalAdapter from './pagination-total-adapter';
+
+const PaginationTotalStandalone = props => (
+  <PaginationTotal { ...props } />
+);
+
+export default
+standaloneAdapter(paginationTotalAdapter(PaginationTotalStandalone));

packages/react-bootstrap-table2-paginator/src/pagination-total.js

@@ -1,16 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const PaginationTotal = props => (
-  <span className="react-bootstrap-table-pagination-total">
-    &nbsp;Showing rows { props.from } to&nbsp;{ props.to } of&nbsp;{ props.dataSize }
-  </span>
-);
+const PaginationTotal = (props) => {
+  if (props.paginationTotalRenderer) {
+    return props.paginationTotalRenderer(props.from, props.to, props.dataSize);
+  }
+  return (
+    <span className="react-bootstrap-table-pagination-total">
+      &nbsp;Showing rows { props.from } to&nbsp;{ props.to } of&nbsp;{ props.dataSize }
+    </span>
+  );
+};
 
 PaginationTotal.propTypes = {
   from: PropTypes.number.isRequired,
   to: PropTypes.number.isRequired,
-  dataSize: PropTypes.number.isRequired
+  dataSize: PropTypes.number.isRequired,
+  paginationTotalRenderer: PropTypes.func
+};
+
+PaginationTotal.defaultProps = {
+  paginationTotalRenderer: undefined
 };
 
 export default PaginationTotal;

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

@@ -5,30 +5,16 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import pageResolver from './page-resolver';
 import paginationHandler from './pagination-handler';
-import { SizePerPageDropdownAdapter } from './size-per-page-dropdown-adapter';
+import { SizePerPageDropdownWithAdapter } from './size-per-page-dropdown-adapter';
 import { PaginationListWithAdapter } from './pagination-list-adapter';
-import PaginationTotal from './pagination-total';
+import { PaginationTotalWithAdapter } from './pagination-total-adapter';
 import Const from './const';
 
 class Pagination extends pageResolver(Component) {
-  defaultTotal = (from, to, size) => (
-    <PaginationTotal
-      from={ from }
-      to={ to }
-      dataSize={ size }
-    />
-  );
-
-  setTotal = (from, to, size, total) => {
-    if (total && (typeof total === 'function')) {
-      return total(from, to, size);
-    }
-
-    return this.defaultTotal(from, to, size);
-  };
-
   render() {
     const {
+      currPage,
+      pageStartIndex,
       showTotal,
       dataSize,
       pageListRenderer,
@@ -48,7 +34,6 @@ class Pagination extends pageResolver(Component) {
     } = this.props;
 
     const pages = this.calculatePageStatus(this.calculatePages(totalPages, lastPage), lastPage);
-    const [from, to] = this.calculateFromTo();
     const pageListClass = cs(
       'react-bootstrap-table-pagination-list',
       'col-md-6 col-xs-6 col-sm-6 col-lg-6', {
@@ -57,7 +42,7 @@ class Pagination extends pageResolver(Component) {
     return (
       <div className="row react-bootstrap-table-pagination">
         <div className="col-md-6 col-xs-6 col-sm-6 col-lg-6">
-          <SizePerPageDropdownAdapter
+          <SizePerPageDropdownWithAdapter
             sizePerPageList={ sizePerPageList }
             currSizePerPage={ currSizePerPage }
             hideSizePerPage={ hideSizePerPage }
@@ -67,12 +52,13 @@ class Pagination extends pageResolver(Component) {
           />
           {
             showTotal ?
-              this.setTotal(
-                from,
-                to,
-                dataSize,
-                paginationTotalRenderer
-              ) : null
+              <PaginationTotalWithAdapter
+                currPage={ currPage }
+                currSizePerPage={ currSizePerPage }
+                pageStartIndex={ pageStartIndex }
+                dataSize={ dataSize }
+                paginationTotalRenderer={ paginationTotalRenderer }
+              /> : null
           }
         </div>
         {
@@ -83,6 +69,9 @@ class Pagination extends pageResolver(Component) {
             <div className={ pageListClass }>
               <PaginationListWithAdapter
                 { ...rest }
+                currPage={ currPage }
+                currSizePerPage={ currSizePerPage }
+                pageStartIndex={ pageStartIndex }
                 lastPage={ lastPage }
                 totalPages={ totalPages }
                 pageButtonRenderer={ pageButtonRenderer }

packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js

@@ -63,5 +63,5 @@ const sizePerPageDropdownAdapter = WrappedComponent =>
   };
 
 
-export const SizePerPageDropdownAdapter = sizePerPageDropdownAdapter(SizePerPageDropDown);
+export const SizePerPageDropdownWithAdapter = sizePerPageDropdownAdapter(SizePerPageDropDown);
 export default sizePerPageDropdownAdapter;

packages/react-bootstrap-table2-paginator/test/pagination-total-adapter.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import paginationTotalAdapter from '../src/pagination-total-adapter';
+
+
+const MockComponent = () => null;
+
+const PaginationTotalAdapter = paginationTotalAdapter(MockComponent);
+
+describe('paginationTotalAdapter', () => {
+  let wrapper;
+
+  const props = {
+    dataSize: 20,
+    currPage: 1,
+    currSizePerPage: 10,
+    paginationTotalRenderer: jest.fn()
+  };
+
+  describe('render', () => {
+    beforeEach(() => {
+      wrapper = shallow(<PaginationTotalAdapter { ...props } />);
+    });
+
+    it('should render successfully', () => {
+      const mockComponent = wrapper.find(MockComponent);
+      expect(mockComponent).toHaveLength(1);
+      expect(mockComponent.props().from).toBeDefined();
+      expect(mockComponent.props().to).toBeDefined();
+      expect(mockComponent.props().dataSize).toEqual(props.dataSize);
+      expect(mockComponent.props().paginationTotalRenderer).toEqual(props.paginationTotalRenderer);
+    });
+  });
+});

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

@@ -1,11 +1,10 @@
 import React from 'react';
 import sinon from 'sinon';
-import { shallow } from 'enzyme';
+import { shallow, render } from 'enzyme';
 
 import SizePerPageDropDown from '../src/size-per-page-dropdown';
 import PaginationList from '../src/pagination-list';
 import Pagination from '../src/pagination';
-import PaginationTotal from '../src/pagination-total';
 
 describe('Pagination', () => {
   let wrapper;
@@ -107,28 +106,24 @@ describe('Pagination', () => {
   describe('when props.showTotal is true', () => {
     beforeEach(() => {
       const props = createMockProps({ showTotal: true });
-      wrapper = shallow(<Pagination { ...props } />);
-      wrapper.render();
-      instance = wrapper.instance();
+      wrapper = render(<Pagination { ...props } />);
     });
 
     it('should render PaginationTotal correctly', () => {
-      expect(wrapper.dive().find(PaginationTotal)).toHaveLength(1);
+      expect(wrapper.find('.react-bootstrap-table-pagination-total')).toHaveLength(1);
     });
 
     describe('if props.paginationTotalRenderer is defined', () => {
       let paginationTotalRenderer;
 
       beforeEach(() => {
-        paginationTotalRenderer = jest.fn();
+        paginationTotalRenderer = jest.fn(() => <div />);
         const props = createMockProps({ showTotal: true, paginationTotalRenderer });
-        wrapper = shallow(<Pagination { ...props } />);
-        wrapper.render();
-        instance = wrapper.instance();
+        wrapper = render(<Pagination { ...props } />);
       });
 
       it('should not render PaginationTotal', () => {
-        expect(wrapper.dive().find(PaginationTotal)).toHaveLength(0);
+        expect(wrapper.find('.react-bootstrap-table-pagination-total')).toHaveLength(0);
       });
 
       it('should call props.paginationTotalRenderer correctly', () => {