From d592871c0d204f32405148a5db9a3f74ce1d0205 Mon Sep 17 00:00:00 2001 From: sean-ww88 Date: Wed, 30 May 2018 17:29:58 +0200 Subject: [PATCH 1/3] Adding custom pagination total --- .../examples/pagination/custom-pagination.js | 66 ++++++++++++------- .../src/const.js | 2 + .../src/pagination-total.js | 2 +- .../src/pagination.js | 33 ++++++++-- .../src/wrapper.js | 1 + .../test/wrapper.test.js | 16 ++--- 6 files changed, 81 insertions(+), 39 deletions(-) diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js index 1bcb6e2..8d7d758 100644 --- a/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js +++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js @@ -24,32 +24,12 @@ import BootstrapTable from 'react-bootstrap-table-next'; import paginationFactory from 'react-bootstrap-table2-paginator'; // ... -const options = { - paginationSize: 4, - pageStartIndex: 0, - // alwaysShowAllBtns: true, // Always show next and previous button - // withFirstAndLast: false, // Hide the going to First and Last page button - // hideSizePerPage: true, // Hide the sizePerPage dropdown always - // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page - firstPageText: 'First', - prePageText: 'Back', - nextPageText: 'Next', - lastPageText: 'Last', - nextPageTitle: 'First page', - prePageTitle: 'Pre page', - firstPageTitle: 'Next page', - lastPageTitle: 'Last page', - sizePerPageList: [{ - text: '5', value: 5 - }, { - text: '10', value: 10 - }, { - text: 'All', value: products.length - }] // A numeric array is also available. the purpose of above example is custom the text -}; +const customTotal = (from, to, size) => ( + + Showing { from } to { to } of { size } Results + +); - -`; const options = { paginationSize: 4, pageStartIndex: 0, @@ -66,6 +46,42 @@ const options = { firstPageTitle: 'Next page', lastPageTitle: 'Last page', showTotal: true, + paginationTotal: customTotal, + sizePerPageList: [{ + text: '5', value: 5 + }, { + text: '10', value: 10 + }, { + text: 'All', value: products.length + }] // A numeric array is also available. the purpose of above example is custom the text +}; + + +`; + +const customTotal = (from, to, size) => ( + + Showing { from } to { to } of { size } Results + +); + +const options = { + paginationSize: 4, + pageStartIndex: 0, + // alwaysShowAllBtns: true // Always show next and previous button + // withFirstAndLast: false // Hide the going to First and Last page button + // hideSizePerPage: true, // Hide the sizePerPage dropdown always + // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page + firstPageText: 'First', + prePageText: 'Back', + nextPageText: 'Next', + lastPageText: 'Last', + nextPageTitle: 'First page', + prePageTitle: 'Pre page', + firstPageTitle: 'Next page', + lastPageTitle: 'Last page', + showTotal: true, + paginationTotal: customTotal, sizePerPageList: [{ text: '5', value: 5 }, { diff --git a/packages/react-bootstrap-table2-paginator/src/const.js b/packages/react-bootstrap-table2-paginator/src/const.js index eaa1bac..dc12066 100644 --- a/packages/react-bootstrap-table2-paginator/src/const.js +++ b/packages/react-bootstrap-table2-paginator/src/const.js @@ -3,6 +3,8 @@ export default { PAGE_START_INDEX: 1, With_FIRST_AND_LAST: true, SHOW_ALL_PAGE_BTNS: false, + SHOW_TOTAL: false, + PAGINATION_TOTAL: null, FIRST_PAGE_TEXT: '<<', PRE_PAGE_TEXT: '<', NEXT_PAGE_TEXT: '>', diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-total.js b/packages/react-bootstrap-table2-paginator/src/pagination-total.js index a201223..cb2fb38 100644 --- a/packages/react-bootstrap-table2-paginator/src/pagination-total.js +++ b/packages/react-bootstrap-table2-paginator/src/pagination-total.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; const PaginationTotal = props => ( - +  Showing rows { props.from } to { props.to + 1 } of { props.dataSize } ); diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js index 411dfad..2429038 100644 --- a/packages/react-bootstrap-table2-paginator/src/pagination.js +++ b/packages/react-bootstrap-table2-paginator/src/pagination.js @@ -87,10 +87,28 @@ class Pagination extends pageResolver(Component) { } } + defaultTotal = (from, to, size) => ( + + ); + + setTotal = (from, to, size, total) => { + if (total && (typeof total === 'function')) { + return total(from, to, size); + } + + return this.defaultTotal(from, to, size); + }; + render() { const { totalPages, lastPage, dropdownOpen: open } = this.state; const { showTotal, + dataSize, + paginationTotal, sizePerPageList, currSizePerPage, hideSizePerPage, @@ -121,11 +139,12 @@ class Pagination extends pageResolver(Component) { } { showTotal ? - : null + this.setTotal( + from, + to, + dataSize, + paginationTotal + ) : null }
@@ -145,6 +164,8 @@ Pagination.propTypes = { onSizePerPageChange: PropTypes.func.isRequired, pageStartIndex: PropTypes.number, paginationSize: PropTypes.number, + showTotal: PropTypes.bool, + paginationTotal: PropTypes.func, firstPageText: PropTypes.string, prePageText: PropTypes.string, nextPageText: PropTypes.string, @@ -164,6 +185,8 @@ Pagination.defaultProps = { paginationSize: Const.PAGINATION_SIZE, withFirstAndLast: Const.With_FIRST_AND_LAST, alwaysShowAllBtns: Const.SHOW_ALL_PAGE_BTNS, + showTotal: Const.SHOW_TOTAL, + paginationTotal: Const.PAGINATION_TOTAL, firstPageText: Const.FIRST_PAGE_TEXT, prePageText: Const.PRE_PAGE_TEXT, nextPageText: Const.NEXT_PAGE_TEXT, diff --git a/packages/react-bootstrap-table2-paginator/src/wrapper.js b/packages/react-bootstrap-table2-paginator/src/wrapper.js index 5595cea..41d89a4 100644 --- a/packages/react-bootstrap-table2-paginator/src/wrapper.js +++ b/packages/react-bootstrap-table2-paginator/src/wrapper.js @@ -146,6 +146,7 @@ export default (Base, { hideSizePerPage={ hideSizePerPage } hidePageListOnlyOnePage={ hidePageListOnlyOnePage } showTotal={ options.showTotal } + paginationTotal={ options.paginationTotal } firstPageText={ options.firstPageText || Const.FIRST_PAGE_TEXT } prePageText={ options.prePageText || Const.PRE_PAGE_TEXT } nextPageText={ options.nextPageText || Const.NEXT_PAGE_TEXT } diff --git a/packages/react-bootstrap-table2-paginator/test/wrapper.test.js b/packages/react-bootstrap-table2-paginator/test/wrapper.test.js index 5b50119..b578ec1 100644 --- a/packages/react-bootstrap-table2-paginator/test/wrapper.test.js +++ b/packages/react-bootstrap-table2-paginator/test/wrapper.test.js @@ -15,7 +15,7 @@ const data = []; for (let i = 0; i < 100; i += 1) { data.push({ id: i, - name: `itme name ${i}` + name: `item name ${i}` }); } @@ -67,29 +67,29 @@ describe('Wrapper', () => { createPaginationWrapper(props); }); - it('should rendering correctly', () => { + it('should render correctly', () => { expect(wrapper.length).toBe(1); }); - it('should initializing state correctly', () => { + it('should initialize state correctly', () => { expect(instance.state.currPage).toBeDefined(); expect(instance.state.currPage).toEqual(Const.PAGE_START_INDEX); expect(instance.state.currSizePerPage).toBeDefined(); expect(instance.state.currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]); }); - it('should saving page and sizePerPage to store correctly', () => { + it('should save page and sizePerPage to the store correctly', () => { expect(props.store.page).toBe(instance.state.currPage); expect(props.store.sizePerPage).toBe(instance.state.currSizePerPage); }); - it('should rendering BootstraTable correctly', () => { + it('should render BootstrapTable correctly', () => { const table = wrapper.find(BootstrapTable); expect(table.length).toBe(1); expect(table.prop('data').length).toEqual(instance.state.currSizePerPage); }); - it('should rendering Pagination correctly', () => { + it('should render Pagination correctly', () => { const pagination = wrapper.find(Pagination); expect(pagination.length).toBe(1); expect(pagination.prop('dataSize')).toEqual(props.store.data.length); @@ -111,7 +111,7 @@ describe('Wrapper', () => { expect(pagination.prop('nextPageTitle')).toEqual(Const.NEXT_PAGE_TITLE); expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE); expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE); - expect(pagination.prop('showTotal')).toEqual(undefined); + expect(pagination.prop('showTotal')).toBeFalsy(); }); describe('componentWillReceiveProps', () => { @@ -254,7 +254,7 @@ describe('Wrapper', () => { createPaginationWrapper(props); }); - it('should rendering Pagination correctly', () => { + it('should render Pagination correctly', () => { const pagination = wrapper.find(Pagination); expect(wrapper.length).toBe(1); expect(pagination.length).toBe(1); From 5404124a78aa7b4e0f3a7871a055535674a98d8e Mon Sep 17 00:00:00 2001 From: sean-ww88 Date: Wed, 30 May 2018 17:35:27 +0200 Subject: [PATCH 2/3] Added missing commas on the custom pagination example --- .../examples/pagination/custom-pagination.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js index 8d7d758..c5cd6b5 100644 --- a/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js +++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js @@ -33,8 +33,8 @@ const customTotal = (from, to, size) => ( const options = { paginationSize: 4, pageStartIndex: 0, - // alwaysShowAllBtns: true // Always show next and previous button - // withFirstAndLast: false // Hide the going to First and Last page button + // alwaysShowAllBtns: true, // Always show next and previous button + // withFirstAndLast: false, // Hide the going to First and Last page button // hideSizePerPage: true, // Hide the sizePerPage dropdown always // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page firstPageText: 'First', @@ -68,8 +68,8 @@ const customTotal = (from, to, size) => ( const options = { paginationSize: 4, pageStartIndex: 0, - // alwaysShowAllBtns: true // Always show next and previous button - // withFirstAndLast: false // Hide the going to First and Last page button + // alwaysShowAllBtns: true, // Always show next and previous button + // withFirstAndLast: false, // Hide the going to First and Last page button // hideSizePerPage: true, // Hide the sizePerPage dropdown always // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page firstPageText: 'First', From 1cf12ab7076340bb1fe52fe8e5492565e389cedb Mon Sep 17 00:00:00 2001 From: sean Date: Sat, 2 Jun 2018 10:43:56 +0200 Subject: [PATCH 3/3] paginationTotal renamed to paginationTotalRenderer --- .../examples/pagination/custom-pagination.js | 4 ++-- .../react-bootstrap-table2-paginator/src/pagination.js | 8 ++++---- packages/react-bootstrap-table2-paginator/src/wrapper.js | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js index c5cd6b5..4ea5164 100644 --- a/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js +++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js @@ -46,7 +46,7 @@ const options = { firstPageTitle: 'Next page', lastPageTitle: 'Last page', showTotal: true, - paginationTotal: customTotal, + paginationTotalRenderer: customTotal, sizePerPageList: [{ text: '5', value: 5 }, { @@ -81,7 +81,7 @@ const options = { firstPageTitle: 'Next page', lastPageTitle: 'Last page', showTotal: true, - paginationTotal: customTotal, + paginationTotalRenderer: customTotal, sizePerPageList: [{ text: '5', value: 5 }, { diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js index 2429038..cf29eb9 100644 --- a/packages/react-bootstrap-table2-paginator/src/pagination.js +++ b/packages/react-bootstrap-table2-paginator/src/pagination.js @@ -108,7 +108,7 @@ class Pagination extends pageResolver(Component) { const { showTotal, dataSize, - paginationTotal, + paginationTotalRenderer, sizePerPageList, currSizePerPage, hideSizePerPage, @@ -143,7 +143,7 @@ class Pagination extends pageResolver(Component) { from, to, dataSize, - paginationTotal + paginationTotalRenderer ) : null }
@@ -165,7 +165,7 @@ Pagination.propTypes = { pageStartIndex: PropTypes.number, paginationSize: PropTypes.number, showTotal: PropTypes.bool, - paginationTotal: PropTypes.func, + paginationTotalRenderer: PropTypes.func, firstPageText: PropTypes.string, prePageText: PropTypes.string, nextPageText: PropTypes.string, @@ -186,7 +186,7 @@ Pagination.defaultProps = { withFirstAndLast: Const.With_FIRST_AND_LAST, alwaysShowAllBtns: Const.SHOW_ALL_PAGE_BTNS, showTotal: Const.SHOW_TOTAL, - paginationTotal: Const.PAGINATION_TOTAL, + paginationTotalRenderer: Const.PAGINATION_TOTAL, firstPageText: Const.FIRST_PAGE_TEXT, prePageText: Const.PRE_PAGE_TEXT, nextPageText: Const.NEXT_PAGE_TEXT, diff --git a/packages/react-bootstrap-table2-paginator/src/wrapper.js b/packages/react-bootstrap-table2-paginator/src/wrapper.js index 41d89a4..b220b58 100644 --- a/packages/react-bootstrap-table2-paginator/src/wrapper.js +++ b/packages/react-bootstrap-table2-paginator/src/wrapper.js @@ -146,7 +146,7 @@ export default (Base, { hideSizePerPage={ hideSizePerPage } hidePageListOnlyOnePage={ hidePageListOnlyOnePage } showTotal={ options.showTotal } - paginationTotal={ options.paginationTotal } + paginationTotalRenderer={ options.paginationTotalRenderer } firstPageText={ options.firstPageText || Const.FIRST_PAGE_TEXT } prePageText={ options.prePageText || Const.PRE_PAGE_TEXT } nextPageText={ options.nextPageText || Const.NEXT_PAGE_TEXT }