From d4be1675db7d78d45fca8ac0d5552c2696fc5b5f Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sun, 25 Nov 2018 14:18:04 +0800 Subject: [PATCH 01/13] refactoring pagination context --- .../react-bootstrap-table2-paginator/index.js | 21 +- .../src/context.js | 182 ------------------ .../src/data-context.js | 100 ++++++++++ .../src/page.js | 4 +- .../src/state-context.js | 163 ++++++++++++++++ .../src/contexts/index.js | 9 +- .../src/props-resolver/remote-resolver.js | 13 +- 7 files changed, 301 insertions(+), 191 deletions(-) delete mode 100644 packages/react-bootstrap-table2-paginator/src/context.js create mode 100644 packages/react-bootstrap-table2-paginator/src/data-context.js create mode 100644 packages/react-bootstrap-table2-paginator/src/state-context.js diff --git a/packages/react-bootstrap-table2-paginator/index.js b/packages/react-bootstrap-table2-paginator/index.js index 8750183..8b20636 100644 --- a/packages/react-bootstrap-table2-paginator/index.js +++ b/packages/react-bootstrap-table2-paginator/index.js @@ -1,6 +1,23 @@ -import createContext from './src/context'; +import React from 'react'; +import PropTypes from 'prop-types'; +import createBaseContext from './src/state-context'; +import createDataContext from './src/data-context'; export default (options = {}) => ({ - createContext, + createContext: createDataContext, options }); + +const { Provider, Consumer } = createBaseContext(); + +const CustomizableProvider = props => ( + + { paginationProps => props.children(paginationProps) } + +); + +CustomizableProvider.propTypes = { + children: PropTypes.func.isRequired +}; + +export const PaginationProvider = CustomizableProvider; diff --git a/packages/react-bootstrap-table2-paginator/src/context.js b/packages/react-bootstrap-table2-paginator/src/context.js deleted file mode 100644 index d5ffb96..0000000 --- a/packages/react-bootstrap-table2-paginator/src/context.js +++ /dev/null @@ -1,182 +0,0 @@ -/* eslint react/prop-types: 0 */ -/* eslint react/require-default-props: 0 */ -/* eslint no-lonely-if: 0 */ -import React from 'react'; -import PropTypes from 'prop-types'; - -import Const from './const'; -import { BootstrapContext } from './bootstrap'; -import Pagination from './pagination'; -import { getByCurrPage, alignPage } from './page'; - -export default ( - isRemotePagination, - handleRemotePageChange -) => { - const PaginationContext = React.createContext(); - - class PaginationProvider extends React.Component { - static propTypes = { - data: PropTypes.array.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; - } - - // 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.currPage = currPage; - this.currSizePerPage = currSizePerPage; - } - - componentWillReceiveProps(nextProps) { - let needNewState = false; - let { currPage } = this; - const { currSizePerPage } = this; - const { onPageChange } = nextProps.pagination.options; - - const pageStartIndex = typeof nextProps.pagination.options.pageStartIndex !== 'undefined' ? - nextProps.pagination.options.pageStartIndex : Const.PAGE_START_INDEX; - - // user should align the page when the page is not fit to the data size when remote enable - if (!isRemotePagination()) { - const newPage = alignPage(nextProps.data, currPage, currSizePerPage, pageStartIndex); - if (currPage !== newPage) { - currPage = newPage; - needNewState = true; - } - } else { - this.currPage = nextProps.pagination.options.page; - this.currSizePerPage = nextProps.pagination.options.sizePerPage; - } - - if (needNewState) { - if (onPageChange) { - onPageChange(currPage, currSizePerPage); - } - this.currPage = currPage; - this.currSizePerPage = currSizePerPage; - } - } - - handleChangePage(currPage) { - const { currSizePerPage } = this; - const { pagination: { options } } = this.props; - - if (options.onPageChange) { - options.onPageChange(currPage, currSizePerPage); - } - - this.currPage = currPage; - - if (isRemotePagination()) { - handleRemotePageChange(currPage, currSizePerPage); - return; - } - this.forceUpdate(); - } - - handleChangeSizePerPage(currSizePerPage, currPage) { - const { pagination: { options } } = this.props; - - if (options.onSizePerPageChange) { - options.onSizePerPageChange(currSizePerPage, currPage); - } - - this.currPage = currPage; - this.currSizePerPage = currSizePerPage; - - if (isRemotePagination()) { - handleRemotePageChange(currPage, currSizePerPage); - return; - } - this.forceUpdate(); - } - - render() { - let { data } = this.props; - const { pagination: { options }, bootstrap4 } = this.props; - const { currPage, currSizePerPage } = this; - 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; - - data = isRemotePagination() ? - data : - getByCurrPage( - data, - currPage, - currSizePerPage, - pageStartIndex - ); - - return ( - - { this.props.children } - - - - - ); - } - } - - return { - Provider: PaginationProvider, - Consumer: PaginationContext.Consumer - }; -}; diff --git a/packages/react-bootstrap-table2-paginator/src/data-context.js b/packages/react-bootstrap-table2-paginator/src/data-context.js new file mode 100644 index 0000000..d9e9e01 --- /dev/null +++ b/packages/react-bootstrap-table2-paginator/src/data-context.js @@ -0,0 +1,100 @@ +/* eslint react/prop-types: 0 */ +/* eslint react/require-default-props: 0 */ +/* eslint no-lonely-if: 0 */ +import React from 'react'; +import PropTypes from 'prop-types'; + +import Const from './const'; +import { BootstrapContext } from './bootstrap'; +import Pagination from './pagination'; +import { getByCurrPage, alignPage } from './page'; +import createBaseContext from './state-context'; + +const { Provider } = createBaseContext(); + +const PaginationDataContext = React.createContext(); + +class PaginationDataProvider extends Provider { + static propTypes = { + data: PropTypes.array.isRequired, + remoteEmitter: PropTypes.object.isRequired, + isRemotePagination: PropTypes.func.isRequired + } + + componentWillReceiveProps(nextProps) { + super.componentWillReceiveProps(nextProps); + const { currSizePerPage } = this; + const { custom, onPageChange } = nextProps.pagination.options; + + const pageStartIndex = typeof nextProps.pagination.options.pageStartIndex !== 'undefined' ? + nextProps.pagination.options.pageStartIndex : Const.PAGE_START_INDEX; + + // user should align the page when the page is not fit to the data size when remote enable + if (!this.isRemotePagination() && !custom) { + const newPage = alignPage( + nextProps.data.length, this.currPage, currSizePerPage, pageStartIndex); + + if (this.currPage !== newPage) { + if (onPageChange) { + onPageChange(newPage, currSizePerPage); + } + this.currPage = newPage; + } + } + } + + isRemotePagination = () => this.props.isRemotePagination(); + + renderDefaultPagination = () => { + if (!this.props.pagination.options.custom) { + const { + bootstrap4, + page: currPage, + sizePerPage: currSizePerPage, + dataSize, + ...rest + } = this.getPaginationProps(); + return ( + + + + ); + } + return null; + } + + render() { + let { data } = this.props; + const { pagination: { options } } = this.props; + const { currPage, currSizePerPage } = this; + const pageStartIndex = typeof options.pageStartIndex === 'undefined' ? + Const.PAGE_START_INDEX : options.pageStartIndex; + + data = this.isRemotePagination() ? + data : + getByCurrPage( + data, + currPage, + currSizePerPage, + pageStartIndex + ); + + return ( + + { this.props.children } + { this.renderDefaultPagination() } + + ); + } +} + +export default () => ({ + Provider: PaginationDataProvider, + Consumer: PaginationDataContext.Consumer +}); diff --git a/packages/react-bootstrap-table2-paginator/src/page.js b/packages/react-bootstrap-table2-paginator/src/page.js index feb1f0a..1e3e82b 100644 --- a/packages/react-bootstrap-table2-paginator/src/page.js +++ b/packages/react-bootstrap-table2-paginator/src/page.js @@ -18,13 +18,11 @@ const startIndex = ( ) => end - (sizePerPage - 1); export const alignPage = ( - data, + dataSize, page, sizePerPage, pageStartIndex ) => { - const dataSize = data.length; - if (page < pageStartIndex || page > (Math.floor(dataSize / sizePerPage) + pageStartIndex)) { return pageStartIndex; } diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js new file mode 100644 index 0000000..122b62b --- /dev/null +++ b/packages/react-bootstrap-table2-paginator/src/state-context.js @@ -0,0 +1,163 @@ +/* eslint react/prop-types: 0 */ +/* eslint react/require-default-props: 0 */ +/* eslint no-lonely-if: 0 */ +import React from 'react'; +import Const from './const'; + +const StateContext = React.createContext(); + +class StateProvider extends React.Component { + 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; + } + + // 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.currPage = currPage; + this.currSizePerPage = currSizePerPage; + } + + componentWillReceiveProps(nextProps) { + const { custom } = nextProps.pagination.options; + + // user should align the page when the page is not fit to the data size when remote enable + if (this.isRemotePagination() || custom) { + this.currPage = nextProps.pagination.options.page; + this.currSizePerPage = nextProps.pagination.options.sizePerPage; + } + } + + getPaginationProps = () => { + const { pagination: { options }, bootstrap4 } = this.props; + const { currPage, currSizePerPage } = this; + 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; + return { + ...options, + bootstrap4, + page: currPage, + sizePerPage: currSizePerPage, + pageStartIndex, + hidePageListOnlyOnePage, + hideSizePerPage, + alwaysShowAllBtns, + withFirstAndLast, + dataSize: options.totalSize, + sizePerPageList: options.sizePerPageList || Const.SIZE_PER_PAGE_LIST, + paginationSize: options.paginationSize || Const.PAGINATION_SIZE, + showTotal: options.showTotal, + paginationTotalRenderer: options.paginationTotalRenderer, + 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, + onPageChange: this.handleChangePage, + onSizePerPageChange: this.handleChangeSizePerPage + }; + } + + setPaginationRemoteEmitter = (remoteEmitter) => { + this.remoteEmitter = remoteEmitter; + } + + isRemotePagination = () => { + const e = {}; + this.remoteEmitter.emit('isRemotePagination', e); + return e.result; + }; + + handleChangePage(currPage) { + const { currSizePerPage } = this; + const { pagination: { options } } = this.props; + + if (options.onPageChange) { + options.onPageChange(currPage, currSizePerPage); + } + + this.currPage = currPage; + + if (this.isRemotePagination()) { + this.remoteEmitter.emit('paginationChange', currPage, currSizePerPage); + return; + } + this.forceUpdate(); + } + + handleChangeSizePerPage(currSizePerPage, currPage) { + const { pagination: { options } } = this.props; + + if (options.onSizePerPageChange) { + options.onSizePerPageChange(currSizePerPage, currPage); + } + + this.currPage = currPage; + this.currSizePerPage = currSizePerPage; + + if (this.isRemotePagination()) { + this.remoteEmitter.emit('paginationChange', currPage, currSizePerPage); + return; + } + this.forceUpdate(); + } + + render() { + const paginationProps = this.getPaginationProps(); + const pagination = { + ...this.props.pagination, + options: paginationProps + }; + + return ( + + { this.props.children } + + ); + } +} + +export default () => ({ + Provider: StateProvider, + Consumer: StateContext.Consumer +}); diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js index dc2f6a7..12bfb9a 100644 --- a/packages/react-bootstrap-table2/src/contexts/index.js +++ b/packages/react-bootstrap-table2/src/contexts/index.js @@ -40,8 +40,7 @@ const withContext = Base => } if (props.pagination) { - this.PaginationContext = props.pagination.createContext( - this.isRemotePagination, this.handleRemotePageChange); + this.PaginationContext = props.pagination.createContext(); } if (props.search && props.search.searchContext) { @@ -52,6 +51,10 @@ const withContext = Base => if (props.setDependencyModules) { props.setDependencyModules(_); } + + if (props.setPaginationRemoteEmitter) { + props.setPaginationRemoteEmitter(this.remoteEmitter); + } } componentWillReceiveProps(nextProps) { @@ -150,6 +153,8 @@ const withContext = Base => pagination={ this.props.pagination } data={ rootProps.getData(filterProps, searchProps, sortProps) } bootstrap4={ this.props.bootstrap4 } + isRemotePagination={ this.isRemotePagination } + remoteEmitter={ this.remoteEmitter } > { diff --git a/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js b/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js index 89af4c6..b8f4935 100644 --- a/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js +++ b/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js @@ -1,7 +1,15 @@ +import EventEmitter from 'events'; import _ from '../utils'; export default ExtendBase => class RemoteResolver extends ExtendBase { + constructor(props) { + super(props); + this.remoteEmitter = new EventEmitter(); + this.remoteEmitter.on('paginationChange', this.handleRemotePageChange); + this.remoteEmitter.on('isRemotePagination', this.isRemotePagination); + } + getNewestState = (state = {}) => { let sortOrder; let sortField; @@ -47,9 +55,10 @@ export default ExtendBase => return remote === true || (_.isObject(remote) && remote.search) || this.isRemotePagination(); } - isRemotePagination = () => { + isRemotePagination = (e = {}) => { const { remote } = this.props; - return remote === true || (_.isObject(remote) && remote.pagination); + e.result = (remote === true || (_.isObject(remote) && remote.pagination)); + return e.result; } isRemoteFiltering = () => { From 7dbdc1943b15dc5beeb5564d3c03e4cef04a06b6 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 1 Dec 2018 15:46:51 +0800 Subject: [PATCH 02/13] patch pagination context test suites --- .../test/context.test.js | 711 --------------- .../test/data-context.test.js | 208 +++++ .../test/page.test.js | 20 +- .../test/state-context.test.js | 841 ++++++++++++++++++ 4 files changed, 1052 insertions(+), 728 deletions(-) delete mode 100644 packages/react-bootstrap-table2-paginator/test/context.test.js create mode 100644 packages/react-bootstrap-table2-paginator/test/data-context.test.js create mode 100644 packages/react-bootstrap-table2-paginator/test/state-context.test.js diff --git a/packages/react-bootstrap-table2-paginator/test/context.test.js b/packages/react-bootstrap-table2-paginator/test/context.test.js deleted file mode 100644 index d72caea..0000000 --- a/packages/react-bootstrap-table2-paginator/test/context.test.js +++ /dev/null @@ -1,711 +0,0 @@ -import 'jsdom-global/register'; -import React from 'react'; -import { shallow } from 'enzyme'; -import BootstrapTable from 'react-bootstrap-table-next/src/bootstrap-table'; - -import Pagination from '../src/pagination'; -import Const from '../src/const'; -import createPaginationContext from '../src/context'; -import paginationFactory from '../index'; - -const data = []; -for (let i = 0; i < 100; i += 1) { - data.push({ - id: i, - name: `itme name ${i}` - }); -} - -describe('PaginationContext', () => { - let wrapper; - let PaginationContext; - - const columns = [{ - dataField: 'id', - text: 'ID' - }, { - dataField: 'name', - text: 'Name' - }]; - - const defaultPagination = { options: {} }; - - const mockBase = jest.fn((props => ( - - ))); - - const handleRemotePaginationChange = jest.fn(); - - function shallowContext( - customPagination = defaultPagination, - enableRemote = false - ) { - mockBase.mockReset(); - handleRemotePaginationChange.mockReset(); - PaginationContext = createPaginationContext( - jest.fn().mockReturnValue(enableRemote), - handleRemotePaginationChange - ); - - return ( - - - { - paginationProps => mockBase(paginationProps) - } - - - ); - } - - describe('default render', () => { - beforeEach(() => { - wrapper = shallow(shallowContext()); - wrapper.render(); - }); - - it('should have correct Provider property after calling createPaginationContext', () => { - expect(PaginationContext.Provider).toBeDefined(); - }); - - it('should have correct Consumer property after calling createPaginationContext', () => { - expect(PaginationContext.Consumer).toBeDefined(); - }); - - it('should have correct currPage', () => { - expect(wrapper.instance().currPage).toEqual(Const.PAGE_START_INDEX); - }); - - it('should have correct currSizePerPage', () => { - expect(wrapper.instance().currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]); - }); - - it('should render Pagination component correctly', () => { - expect(wrapper.length).toBe(1); - const instance = wrapper.instance(); - const pagination = wrapper.find(Pagination); - expect(pagination).toHaveLength(1); - expect(pagination.prop('dataSize')).toEqual(data.length); - expect(pagination.prop('currPage')).toEqual(instance.currPage); - expect(pagination.prop('currSizePerPage')).toEqual(instance.currSizePerPage); - expect(pagination.prop('onPageChange')).toEqual(instance.handleChangePage); - expect(pagination.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage); - expect(pagination.prop('sizePerPageList')).toEqual(Const.SIZE_PER_PAGE_LIST); - expect(pagination.prop('paginationSize')).toEqual(Const.PAGINATION_SIZE); - expect(pagination.prop('pageStartIndex')).toEqual(Const.PAGE_START_INDEX); - expect(pagination.prop('withFirstAndLast')).toEqual(Const.With_FIRST_AND_LAST); - expect(pagination.prop('alwaysShowAllBtns')).toEqual(Const.SHOW_ALL_PAGE_BTNS); - expect(pagination.prop('firstPageText')).toEqual(Const.FIRST_PAGE_TEXT); - expect(pagination.prop('prePageText')).toEqual(Const.PRE_PAGE_TEXT); - expect(pagination.prop('nextPageText')).toEqual(Const.NEXT_PAGE_TEXT); - expect(pagination.prop('lastPageText')).toEqual(Const.LAST_PAGE_TEXT); - expect(pagination.prop('firstPageTitle')).toEqual(Const.FIRST_PAGE_TITLE); - expect(pagination.prop('prePageTitle')).toEqual(Const.PRE_PAGE_TITLE); - 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('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE); - expect(pagination.prop('paginationTotalRenderer')).toBeNull(); - }); - - it('should pass correct cell editing props to children element', () => { - expect(mockBase.mock.calls[0][0].data).toHaveLength(Const.SIZE_PER_PAGE_LIST[0]); - }); - }); - - describe('componentWillReceiveProps', () => { - let instance; - let nextProps; - - describe('when nextProps.pagination.options.page is not existing', () => { - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - page: 3 - })); - instance = wrapper.instance(); - wrapper.render(); - nextProps = { data, pagination: defaultPagination }; - instance.componentWillReceiveProps(nextProps); - }); - - it('should not set currPage', () => { - expect(instance.currPage).toEqual(3); - }); - }); - - describe('when nextProps.pagination.options.sizePerPage is not existing', () => { - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - sizePerPage: Const.SIZE_PER_PAGE_LIST[2] - })); - instance = wrapper.instance(); - wrapper.render(); - nextProps = { data, pagination: defaultPagination }; - instance.componentWillReceiveProps(nextProps); - }); - - it('should not set currSizePerPage', () => { - expect(instance.currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[2]); - }); - }); - - describe('when remote pagination is enable', () => { - beforeEach(() => { - wrapper = shallow(shallowContext({ ...defaultPagination }, true)); - instance = wrapper.instance(); - wrapper.render(); - nextProps = { - data, - pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5 } } - }; - instance.componentWillReceiveProps(nextProps); - }); - - it('should always set currPage from nextProps.pagination.options.page', () => { - expect(instance.currPage).toEqual(nextProps.pagination.options.page); - }); - - it('should always set currSizePerPage from nextProps.pagination.options.sizePerPage', () => { - expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage); - }); - }); - - describe('when page is not align', () => { - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - page: 2 - })); - instance = wrapper.instance(); - wrapper.render(); - nextProps = { - data: [], - pagination: { ...defaultPagination } - }; - instance.componentWillReceiveProps(nextProps); - }); - - it('should reset currPage to first page', () => { - expect(instance.currPage).toEqual(1); - }); - - describe('if options.onPageChange is defined', () => { - const onPageChange = jest.fn(); - beforeEach(() => { - onPageChange.mockClear(); - wrapper = shallow(shallowContext({ - ...defaultPagination, - page: 2 - })); - instance = wrapper.instance(); - wrapper.render(); - nextProps = { - data: [], - pagination: { ...defaultPagination, options: { onPageChange } } - }; - instance.componentWillReceiveProps(nextProps); - }); - - it('should call options.onPageChange correctly', () => { - expect(onPageChange).toHaveBeenCalledTimes(1); - expect(onPageChange).toHaveBeenCalledWith(instance.currPage, instance.currSizePerPage); - }); - }); - }); - }); - - describe('handleChangePage', () => { - let instance; - const newPage = 3; - - describe('should update component correctly', () => { - beforeEach(() => { - wrapper = shallow(shallowContext()); - instance = wrapper.instance(); - jest.spyOn(instance, 'forceUpdate'); - instance.handleChangePage(newPage); - }); - - it('', () => { - expect(instance.currPage).toEqual(newPage); - expect(instance.forceUpdate).toHaveBeenCalledTimes(1); - }); - }); - - describe('if options.onPageChange is defined', () => { - const onPageChange = jest.fn(); - beforeEach(() => { - onPageChange.mockClear(); - wrapper = shallow(shallowContext({ - ...defaultPagination, - onPageChange - })); - instance = wrapper.instance(); - jest.spyOn(instance, 'forceUpdate'); - instance.handleChangePage(newPage); - }); - - it('should still update component correctly', () => { - expect(instance.currPage).toEqual(newPage); - expect(instance.forceUpdate).toHaveBeenCalledTimes(1); - }); - - it('should call options.onPageChange correctly', () => { - expect(onPageChange).toHaveBeenCalledTimes(1); - expect(onPageChange).toHaveBeenCalledWith(newPage, instance.currSizePerPage); - }); - }); - - describe('if remote pagination is enable', () => { - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination - }, true)); - instance = wrapper.instance(); - jest.spyOn(instance, 'forceUpdate'); - instance.handleChangePage(newPage); - }); - - it('should still update component correctly', () => { - expect(instance.currPage).toEqual(newPage); - expect(instance.forceUpdate).toHaveBeenCalledTimes(0); - }); - - it('should call handleRemotePageChange correctly', () => { - expect(handleRemotePaginationChange).toHaveBeenCalledTimes(1); - expect(handleRemotePaginationChange) - .toHaveBeenCalledWith(newPage, instance.currSizePerPage); - }); - }); - }); - - describe('handleChangeSizePerPage', () => { - let instance; - const newPage = 2; - const newSizePerPage = 15; - - describe('should update component correctly', () => { - beforeEach(() => { - wrapper = shallow(shallowContext()); - instance = wrapper.instance(); - jest.spyOn(instance, 'forceUpdate'); - instance.handleChangeSizePerPage(newSizePerPage, newPage); - }); - - it('', () => { - expect(instance.currPage).toEqual(newPage); - expect(instance.currSizePerPage).toEqual(newSizePerPage); - expect(instance.forceUpdate).toHaveBeenCalledTimes(1); - }); - }); - - describe('if options.onSizePerPageChange is defined', () => { - const onSizePerPageChange = jest.fn(); - beforeEach(() => { - onSizePerPageChange.mockClear(); - wrapper = shallow(shallowContext({ - ...defaultPagination, - onSizePerPageChange - })); - instance = wrapper.instance(); - jest.spyOn(instance, 'forceUpdate'); - instance.handleChangeSizePerPage(newSizePerPage, newPage); - }); - - it('should still update component correctly', () => { - expect(instance.currPage).toEqual(newPage); - expect(instance.currSizePerPage).toEqual(newSizePerPage); - expect(instance.forceUpdate).toHaveBeenCalledTimes(1); - }); - - it('should call options.onSizePerPageChange correctly', () => { - expect(onSizePerPageChange).toHaveBeenCalledTimes(1); - expect(onSizePerPageChange).toHaveBeenCalledWith(newSizePerPage, newPage); - }); - }); - - describe('if remote pagination is enable', () => { - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination - }, true)); - instance = wrapper.instance(); - jest.spyOn(instance, 'forceUpdate'); - instance.handleChangeSizePerPage(newSizePerPage, newPage); - }); - - it('should still update component correctly', () => { - expect(instance.currPage).toEqual(newPage); - expect(instance.currSizePerPage).toEqual(newSizePerPage); - expect(instance.forceUpdate).toHaveBeenCalledTimes(0); - }); - - it('should call handleRemotePageChange correctly', () => { - expect(handleRemotePaginationChange).toHaveBeenCalledTimes(1); - expect(handleRemotePaginationChange) - .toHaveBeenCalledWith(newPage, newSizePerPage); - }); - }); - }); - - describe('when options.page is defined', () => { - const page = 3; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - page - })); - wrapper.render(); - }); - - it('should set correct currPage', () => { - expect(wrapper.instance().currPage).toEqual(page); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('currPage')).toEqual(page); - }); - }); - - describe('when options.sizePerPage is defined', () => { - const sizePerPage = Const.SIZE_PER_PAGE_LIST[2]; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - sizePerPage - })); - wrapper.render(); - }); - - it('should set correct currSizePerPage', () => { - expect(wrapper.instance().currSizePerPage).toEqual(sizePerPage); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('currSizePerPage')).toEqual(sizePerPage); - }); - }); - - describe('when options.totalSize is defined', () => { - const totalSize = 100; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - totalSize - })); - wrapper.render(); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('dataSize')).toEqual(totalSize); - }); - }); - - describe('when options.showTotal is defined', () => { - const showTotal = true; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - showTotal - })); - wrapper.render(); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('showTotal')).toEqual(showTotal); - }); - }); - - describe('when options.pageStartIndex is defined', () => { - const pageStartIndex = -1; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - pageStartIndex - })); - wrapper.render(); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('pageStartIndex')).toEqual(pageStartIndex); - }); - }); - - describe('when options.sizePerPageList is defined', () => { - const sizePerPageList = [10, 40]; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - sizePerPageList - })); - wrapper.render(); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('sizePerPageList')).toEqual(sizePerPageList); - }); - }); - - describe('when options.paginationSize is defined', () => { - const paginationSize = 10; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - paginationSize - })); - wrapper.render(); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('paginationSize')).toEqual(paginationSize); - }); - }); - - describe('when options.withFirstAndLast is defined', () => { - const withFirstAndLast = false; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - withFirstAndLast - })); - wrapper.render(); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('withFirstAndLast')).toEqual(withFirstAndLast); - }); - }); - - describe('when options.alwaysShowAllBtns is defined', () => { - const alwaysShowAllBtns = true; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - alwaysShowAllBtns - })); - wrapper.render(); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('alwaysShowAllBtns')).toEqual(alwaysShowAllBtns); - }); - }); - - describe('when options.firstPageText is defined', () => { - const firstPageText = '1st'; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - firstPageText - })); - wrapper.render(); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('firstPageText')).toEqual(firstPageText); - }); - }); - - describe('when options.prePageText is defined', () => { - const prePageText = 'PRE'; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - prePageText - })); - wrapper.render(); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('prePageText')).toEqual(prePageText); - }); - }); - - describe('when options.nextPageText is defined', () => { - const nextPageText = 'NEXT'; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - nextPageText - })); - wrapper.render(); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('nextPageText')).toEqual(nextPageText); - }); - }); - - describe('when options.lastPageText is defined', () => { - const lastPageText = 'LAST'; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - lastPageText - })); - wrapper.render(); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('lastPageText')).toEqual(lastPageText); - }); - }); - - describe('when options.firstPageTitle is defined', () => { - const firstPageTitle = '1st'; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - firstPageTitle - })); - wrapper.render(); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('firstPageTitle')).toEqual(firstPageTitle); - }); - }); - - describe('when options.prePageTitle is defined', () => { - const prePageTitle = 'PRE'; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - prePageTitle - })); - wrapper.render(); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('prePageTitle')).toEqual(prePageTitle); - }); - }); - - describe('when options.nextPageTitle is defined', () => { - const nextPageTitle = 'NEXT'; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - nextPageTitle - })); - wrapper.render(); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('nextPageTitle')).toEqual(nextPageTitle); - }); - }); - - describe('when options.lastPageTitle is defined', () => { - const lastPageTitle = 'nth'; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - lastPageTitle - })); - wrapper.render(); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('lastPageTitle')).toEqual(lastPageTitle); - }); - }); - - describe('when options.hideSizePerPage is defined', () => { - const hideSizePerPage = true; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - hideSizePerPage - })); - wrapper.render(); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('hideSizePerPage')).toEqual(hideSizePerPage); - }); - }); - - describe('when options.hidePageListOnlyOnePage is defined', () => { - const hidePageListOnlyOnePage = true; - - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultPagination, - hidePageListOnlyOnePage - })); - wrapper.render(); - }); - - it('should rendering Pagination correctly', () => { - const pagination = wrapper.find(Pagination); - expect(pagination.length).toBe(1); - expect(pagination.prop('hidePageListOnlyOnePage')).toEqual(hidePageListOnlyOnePage); - }); - }); -}); diff --git a/packages/react-bootstrap-table2-paginator/test/data-context.test.js b/packages/react-bootstrap-table2-paginator/test/data-context.test.js new file mode 100644 index 0000000..6128f7b --- /dev/null +++ b/packages/react-bootstrap-table2-paginator/test/data-context.test.js @@ -0,0 +1,208 @@ +import 'jsdom-global/register'; +import React from 'react'; +import { shallow } from 'enzyme'; + +import paginationFactory from '../index'; +import Const from '../src/const'; +import createStateContext from '../src/data-context'; +import Pagination from '../src/pagination'; +import { getByCurrPage } from '../src/page'; + +const data = []; +for (let i = 0; i < 100; i += 1) { + data.push({ + id: i, + name: `itme name ${i}` + }); +} + +describe('PaginationDataContext', () => { + let wrapper; + let PaginationDataContext; + + const defaultPagination = { options: { totalSize: data.length }, createContext: jest.fn() }; + + const MockComponent = () => null; + const renderMockComponent = jest.fn((props => ( + + ))); + + const handleRemotePaginationChange = jest.fn(); + + function shallowContext( + customPagination = defaultPagination, + remoteEnabled = false + ) { + renderMockComponent.mockReset(); + handleRemotePaginationChange.mockReset(); + PaginationDataContext = createStateContext(); + const isRemotePagination = jest.fn().mockReturnValue(remoteEnabled); + const remoteEmitter = { emit: jest.fn() }; + + return ( + + + { + paginationProps => renderMockComponent(paginationProps) + } + + + ); + } + + describe('default render', () => { + beforeEach(() => { + wrapper = shallow(shallowContext()); + wrapper.render(); + }); + + it('should have correct Provider property after calling createPaginationDataContext', () => { + expect(PaginationDataContext.Provider).toBeDefined(); + }); + + it('should have correct Consumer property after calling createPaginationDataContext', () => { + expect(PaginationDataContext.Consumer).toBeDefined(); + }); + + it('should have correct currPage', () => { + expect(wrapper.instance().currPage).toEqual(Const.PAGE_START_INDEX); + }); + + it('should have correct currSizePerPage', () => { + expect(wrapper.instance().currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]); + }); + + it('should render correct data props to childrens', () => { + const instance = wrapper.instance(); + expect(renderMockComponent).toHaveBeenCalledTimes(1); + expect(renderMockComponent).toHaveBeenCalledWith({ + data: getByCurrPage( + data, + instance.currPage, + instance.currSizePerPage, + Const.PAGE_START_INDEX + ), + setRemoteEmitter: instance.setRemoteEmitter + }); + }); + }); + + describe('default render', () => { + describe('when options.custom is negative', () => { + beforeEach(() => { + wrapper = shallow(shallowContext()); + wrapper.render(); + }); + + it('should render Pagination component correctly', () => { + const instance = wrapper.instance(); + const pagination = wrapper.find(Pagination); + expect(pagination).toHaveLength(1); + + expect(pagination.prop('dataSize')).toEqual(data.length); + expect(pagination.prop('currPage')).toEqual(instance.currPage); + expect(pagination.prop('currSizePerPage')).toEqual(instance.currSizePerPage); + expect(pagination.prop('onPageChange')).toEqual(instance.handleChangePage); + expect(pagination.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage); + expect(pagination.prop('sizePerPageList')).toEqual(Const.SIZE_PER_PAGE_LIST); + expect(pagination.prop('paginationSize')).toEqual(Const.PAGINATION_SIZE); + expect(pagination.prop('pageStartIndex')).toEqual(Const.PAGE_START_INDEX); + expect(pagination.prop('withFirstAndLast')).toEqual(Const.With_FIRST_AND_LAST); + expect(pagination.prop('alwaysShowAllBtns')).toEqual(Const.SHOW_ALL_PAGE_BTNS); + expect(pagination.prop('firstPageText')).toEqual(Const.FIRST_PAGE_TEXT); + expect(pagination.prop('prePageText')).toEqual(Const.PRE_PAGE_TEXT); + expect(pagination.prop('nextPageText')).toEqual(Const.NEXT_PAGE_TEXT); + expect(pagination.prop('lastPageText')).toEqual(Const.LAST_PAGE_TEXT); + expect(pagination.prop('firstPageTitle')).toEqual(Const.FIRST_PAGE_TITLE); + expect(pagination.prop('prePageTitle')).toEqual(Const.PRE_PAGE_TITLE); + 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('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE); + expect(pagination.prop('paginationTotalRenderer')).toBeNull(); + }); + }); + + describe('when options.custom is positive', () => { + beforeEach(() => { + wrapper = shallow(shallowContext({ + custom: true + })); + wrapper.render(); + }); + + it('should not render Pagination component', () => { + const pagination = wrapper.find(Pagination); + expect(pagination).toHaveLength(0); + }); + }); + }); + + describe('when remote pagination enabled', () => { + beforeEach(() => { + wrapper = shallow(shallowContext({}, true)); + wrapper.render(); + }); + + it('just pass data props to children', () => { + const instance = wrapper.instance(); + expect(renderMockComponent).toHaveBeenCalledTimes(1); + expect(renderMockComponent).toHaveBeenCalledWith({ + data: instance.props.data, + setRemoteEmitter: instance.setRemoteEmitter + }); + }); + }); + + describe('componentWillReceiveProps', () => { + let instance; + let nextProps; + describe('when page is not align', () => { + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + page: 2 + })); + instance = wrapper.instance(); + wrapper.render(); + nextProps = { + data: [], + pagination: { ...defaultPagination } + }; + instance.componentWillReceiveProps(nextProps); + }); + + it('should reset currPage to first page', () => { + expect(instance.currPage).toEqual(1); + }); + + describe('if options.onPageChange is defined', () => { + const onPageChange = jest.fn(); + beforeEach(() => { + onPageChange.mockClear(); + wrapper = shallow(shallowContext({ + ...defaultPagination, + page: 2 + })); + instance = wrapper.instance(); + wrapper.render(); + nextProps = { + data: [], + pagination: { ...defaultPagination, options: { onPageChange } } + }; + instance.componentWillReceiveProps(nextProps); + }); + + it('should call options.onPageChange correctly', () => { + expect(onPageChange).toHaveBeenCalledTimes(1); + expect(onPageChange).toHaveBeenCalledWith(instance.currPage, instance.currSizePerPage); + }); + }); + }); + }); +}); diff --git a/packages/react-bootstrap-table2-paginator/test/page.test.js b/packages/react-bootstrap-table2-paginator/test/page.test.js index dad8742..aa20c33 100644 --- a/packages/react-bootstrap-table2-paginator/test/page.test.js +++ b/packages/react-bootstrap-table2-paginator/test/page.test.js @@ -46,29 +46,15 @@ describe('Page Functions', () => { const pageStartIndex = 1; const sizePerPage = 10; const page = 3; - describe('if the page does not fit the pages interval calculated from the length of store.data', () => { - beforeEach(() => { - data = []; - for (let i = 0; i < 15; i += 1) { - data.push({ id: i, name: `test_name${i}` }); - } - }); - + describe('if the page does not fit the pages which calculated from the length of data', () => { it('should return pageStartIndex argument', () => { - expect(alignPage(data, page, sizePerPage, pageStartIndex)).toEqual(pageStartIndex); + expect(alignPage(15, page, sizePerPage, pageStartIndex)).toEqual(pageStartIndex); }); }); describe('if the length of store.data is large than the end page index', () => { - beforeEach(() => { - data = []; - for (let i = 0; i < 30; i += 1) { - data.push({ id: i, name: `test_name${i}` }); - } - }); - it('should return current page', () => { - expect(alignPage(data, page, sizePerPage, pageStartIndex)).toEqual(page); + expect(alignPage(30, page, sizePerPage, pageStartIndex)).toEqual(page); }); }); }); diff --git a/packages/react-bootstrap-table2-paginator/test/state-context.test.js b/packages/react-bootstrap-table2-paginator/test/state-context.test.js new file mode 100644 index 0000000..e67d10a --- /dev/null +++ b/packages/react-bootstrap-table2-paginator/test/state-context.test.js @@ -0,0 +1,841 @@ +/* eslint no-param-reassign: 0 */ +import 'jsdom-global/register'; +import React from 'react'; +import { shallow } from 'enzyme'; + +import Const from '../src/const'; +import createStateContext from '../src/state-context'; +import paginationFactory from '../index'; + +const data = []; +for (let i = 0; i < 100; i += 1) { + data.push({ + id: i, + name: `itme name ${i}` + }); +} + +describe('PaginationStateContext', () => { + let wrapper; + let remoteEmitter; + let PaginationStateContext; + + const defaultPagination = { options: {}, createContext: jest.fn() }; + + const MockComponent = () => null; + const renderMockComponent = jest.fn((props => ( + + ))); + + const handleRemotePaginationChange = jest.fn(); + + function shallowContext( + customPagination = defaultPagination + ) { + const additionProps = {}; + renderMockComponent.mockReset(); + handleRemotePaginationChange.mockReset(); + PaginationStateContext = createStateContext(); + + return ( + + + { + paginationProps => renderMockComponent(paginationProps) + } + + + ); + } + + function setRemotePaginationEmitter( + instance, + remoteEnabled = false + ) { + remoteEmitter = { emit: jest.fn() }; + if (remoteEnabled) { + remoteEmitter.emit = jest.fn().mockImplementation((evtName, d = {}) => { + if (evtName === 'isRemotePagination') { + d.result = remoteEnabled; + } + }); + } + instance.setPaginationRemoteEmitter(remoteEmitter); + } + + describe('default render', () => { + const options = { totalSize: data.length }; + + beforeEach(() => { + wrapper = shallow(shallowContext(options)); + wrapper.render(); + }); + + it('should have correct Provider property after calling createPaginationStateContext', () => { + expect(PaginationStateContext.Provider).toBeDefined(); + }); + + it('should have correct Consumer property after calling createPaginationStateContext', () => { + expect(PaginationStateContext.Consumer).toBeDefined(); + }); + + it('should have correct currPage', () => { + expect(wrapper.instance().currPage).toEqual(Const.PAGE_START_INDEX); + }); + + it('should have correct currSizePerPage', () => { + expect(wrapper.instance().currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]); + }); + + it('should get correct pagination props', () => { + const instance = wrapper.instance(); + expect(wrapper.length).toBe(1); + expect(renderMockComponent).toHaveBeenCalledTimes(1); + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + + it('should return correct pagination states from getPaginationProps function', () => { + const instance = wrapper.instance(); + const paginationProps = instance.getPaginationProps(); + + expect(paginationProps.dataSize).toEqual(data.length); + expect(paginationProps.page).toEqual(instance.currPage); + expect(paginationProps.sizePerPage).toEqual(instance.currSizePerPage); + expect(paginationProps.onPageChange).toEqual(instance.handleChangePage); + expect(paginationProps.onSizePerPageChange).toEqual(instance.handleChangeSizePerPage); + expect(paginationProps.sizePerPageList).toEqual(Const.SIZE_PER_PAGE_LIST); + expect(paginationProps.paginationSize).toEqual(Const.PAGINATION_SIZE); + expect(paginationProps.showTotal).toEqual(options.showTotal); + expect(paginationProps.hidePageListOnlyOnePage).toEqual(Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE); + expect(paginationProps.pageStartIndex).toEqual(Const.PAGE_START_INDEX); + expect(paginationProps.withFirstAndLast).toEqual(Const.With_FIRST_AND_LAST); + expect(paginationProps.alwaysShowAllBtns).toEqual(Const.SHOW_ALL_PAGE_BTNS); + expect(paginationProps.firstPageText).toEqual(Const.FIRST_PAGE_TEXT); + expect(paginationProps.prePageText).toEqual(Const.PRE_PAGE_TEXT); + expect(paginationProps.nextPageText).toEqual(Const.NEXT_PAGE_TEXT); + expect(paginationProps.lastPageText).toEqual(Const.LAST_PAGE_TEXT); + expect(paginationProps.firstPageTitle).toEqual(Const.FIRST_PAGE_TITLE); + expect(paginationProps.prePageTitle).toEqual(Const.PRE_PAGE_TITLE); + expect(paginationProps.nextPageTitle).toEqual(Const.NEXT_PAGE_TITLE); + expect(paginationProps.lastPageTitle).toEqual(Const.LAST_PAGE_TITLE); + expect(paginationProps.hideSizePerPage).toEqual(Const.HIDE_SIZE_PER_PAGE); + expect(paginationProps.paginationTotalRenderer).toEqual(options.paginationTotalRenderer); + }); + }); + + describe('compoientWillReceiveProps', () => { + let instance; + let nextProps; + + describe('if remote pagination is enable', () => { + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination + }, true)); + instance = wrapper.instance(); + setRemotePaginationEmitter(instance, true); + nextProps = { + data, + pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5 } } + }; + instance.componentWillReceiveProps(nextProps); + }); + + it('should always reset currPage and currSizePerPage', () => { + expect(instance.currPage).toEqual(nextProps.pagination.options.page); + expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage); + }); + }); + + describe('if options.custom is true', () => { + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + custom: true + }, true)); + instance = wrapper.instance(); + setRemotePaginationEmitter(instance, true); + nextProps = { + data, + pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5, custom: true } } + }; + instance.componentWillReceiveProps(nextProps); + }); + + it('should always reset currPage and currSizePerPage', () => { + expect(instance.currPage).toEqual(nextProps.pagination.options.page); + expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage); + }); + }); + }); + + describe('handleChangePage', () => { + let instance; + const newPage = 3; + + describe('should update component correctly', () => { + beforeEach(() => { + wrapper = shallow(shallowContext()); + instance = wrapper.instance(); + setRemotePaginationEmitter(instance); + jest.spyOn(instance, 'forceUpdate'); + instance.handleChangePage(newPage); + }); + + it('', () => { + expect(instance.currPage).toEqual(newPage); + expect(instance.forceUpdate).toHaveBeenCalledTimes(1); + }); + }); + + describe('if options.onPageChange is defined', () => { + const onPageChange = jest.fn(); + beforeEach(() => { + onPageChange.mockClear(); + wrapper = shallow(shallowContext({ + ...defaultPagination, + onPageChange + })); + instance = wrapper.instance(); + setRemotePaginationEmitter(instance); + jest.spyOn(instance, 'forceUpdate'); + instance.handleChangePage(newPage); + }); + + it('should still update component correctly', () => { + expect(instance.currPage).toEqual(newPage); + expect(instance.forceUpdate).toHaveBeenCalledTimes(1); + }); + + it('should call options.onPageChange correctly', () => { + expect(onPageChange).toHaveBeenCalledTimes(1); + expect(onPageChange).toHaveBeenCalledWith(newPage, instance.currSizePerPage); + }); + }); + + describe('if remote pagination is enable', () => { + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination + }, true)); + instance = wrapper.instance(); + setRemotePaginationEmitter(instance, true); + jest.spyOn(instance, 'forceUpdate'); + instance.handleChangePage(newPage); + }); + + it('should still update component correctly', () => { + expect(instance.currPage).toEqual(newPage); + expect(instance.forceUpdate).toHaveBeenCalledTimes(0); + }); + + it('should emit paginationChange event correctly', () => { + expect(remoteEmitter.emit).toHaveBeenLastCalledWith('paginationChange', instance.currPage, instance.currSizePerPage); + }); + }); + }); + + describe('handleChangeSizePerPage', () => { + let instance; + const newPage = 2; + const newSizePerPage = 15; + + describe('should update component correctly', () => { + beforeEach(() => { + wrapper = shallow(shallowContext()); + instance = wrapper.instance(); + setRemotePaginationEmitter(instance); + jest.spyOn(instance, 'forceUpdate'); + instance.handleChangeSizePerPage(newSizePerPage, newPage); + }); + + it('', () => { + expect(instance.currPage).toEqual(newPage); + expect(instance.currSizePerPage).toEqual(newSizePerPage); + expect(instance.forceUpdate).toHaveBeenCalledTimes(1); + }); + }); + + describe('if options.onSizePerPageChange is defined', () => { + const onSizePerPageChange = jest.fn(); + beforeEach(() => { + onSizePerPageChange.mockClear(); + wrapper = shallow(shallowContext({ + ...defaultPagination, + onSizePerPageChange + })); + instance = wrapper.instance(); + setRemotePaginationEmitter(instance); + jest.spyOn(instance, 'forceUpdate'); + instance.handleChangeSizePerPage(newSizePerPage, newPage); + }); + + it('should still update component correctly', () => { + expect(instance.currPage).toEqual(newPage); + expect(instance.currSizePerPage).toEqual(newSizePerPage); + expect(instance.forceUpdate).toHaveBeenCalledTimes(1); + }); + + it('should call options.onSizePerPageChange correctly', () => { + expect(onSizePerPageChange).toHaveBeenCalledTimes(1); + expect(onSizePerPageChange).toHaveBeenCalledWith(newSizePerPage, newPage); + }); + }); + + describe('if remote pagination is enable', () => { + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination + }, true)); + instance = wrapper.instance(); + setRemotePaginationEmitter(instance, true); + jest.spyOn(instance, 'forceUpdate'); + instance.handleChangeSizePerPage(newSizePerPage, newPage); + }); + + it('should still update component correctly', () => { + expect(instance.currPage).toEqual(newPage); + expect(instance.currSizePerPage).toEqual(newSizePerPage); + expect(instance.forceUpdate).toHaveBeenCalledTimes(0); + }); + + it('should emit paginationChange event correctly', () => { + expect(remoteEmitter.emit).toHaveBeenLastCalledWith('paginationChange', instance.currPage, instance.currSizePerPage); + }); + }); + }); + + describe('when options.page is defined', () => { + const page = 3; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + page + })); + wrapper.render(); + }); + + it('should set correct currPage', () => { + expect(wrapper.instance().currPage).toEqual(page); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.sizePerPage is defined', () => { + const sizePerPage = Const.SIZE_PER_PAGE_LIST[2]; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + sizePerPage + })); + wrapper.render(); + }); + + it('should set correct currSizePerPage', () => { + expect(wrapper.instance().currSizePerPage).toEqual(sizePerPage); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.totalSize is defined', () => { + const totalSize = 100; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + totalSize + })); + wrapper.render(); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.showTotal is defined', () => { + const showTotal = true; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + showTotal + })); + wrapper.render(); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.pageStartIndex is defined', () => { + const pageStartIndex = -1; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + pageStartIndex + })); + wrapper.render(); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.sizePerPageList is defined', () => { + const sizePerPageList = [10, 40]; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + sizePerPageList + })); + wrapper.render(); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.paginationSize is defined', () => { + const paginationSize = 10; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + paginationSize + })); + wrapper.render(); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.withFirstAndLast is defined', () => { + const withFirstAndLast = false; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + withFirstAndLast + })); + wrapper.render(); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.alwaysShowAllBtns is defined', () => { + const alwaysShowAllBtns = true; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + alwaysShowAllBtns + })); + wrapper.render(); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.firstPageText is defined', () => { + const firstPageText = '1st'; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + firstPageText + })); + wrapper.render(); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.prePageText is defined', () => { + const prePageText = 'PRE'; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + prePageText + })); + wrapper.render(); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.nextPageText is defined', () => { + const nextPageText = 'NEXT'; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + nextPageText + })); + wrapper.render(); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.lastPageText is defined', () => { + const lastPageText = 'LAST'; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + lastPageText + })); + wrapper.render(); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.firstPageTitle is defined', () => { + const firstPageTitle = '1st'; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + firstPageTitle + })); + wrapper.render(); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.prePageTitle is defined', () => { + const prePageTitle = 'PRE'; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + prePageTitle + })); + wrapper.render(); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.nextPageTitle is defined', () => { + const nextPageTitle = 'NEXT'; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + nextPageTitle + })); + wrapper.render(); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.lastPageTitle is defined', () => { + const lastPageTitle = 'nth'; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + lastPageTitle + })); + wrapper.render(); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.hideSizePerPage is defined', () => { + const hideSizePerPage = true; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + hideSizePerPage + })); + wrapper.render(); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); + + describe('when options.hidePageListOnlyOnePage is defined', () => { + const hidePageListOnlyOnePage = true; + + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + hidePageListOnlyOnePage + })); + wrapper.render(); + }); + + it('should render correctly', () => { + const instance = wrapper.instance(); + + expect(renderMockComponent).toHaveBeenCalledWith({ + paginationProps: instance.getPaginationProps(), + paginationBaseProps: { + pagination: { + createContext: expect.any(Function), + options: instance.getPaginationProps() + }, + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + } + }); + }); + }); +}); From b261c33e37896527f5f5c60793bc7c34ded62ea8 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 1 Dec 2018 17:02:35 +0800 Subject: [PATCH 03/13] implement pageButtonRenderer --- .../src/page-button.js | 6 ++-- .../src/pagination-list.js | 29 ++++++++++++++----- .../src/pagination.js | 9 +++++- .../src/state-context.js | 1 + .../test/pagination-list.test.js | 18 ++++++++++++ 5 files changed, 52 insertions(+), 11 deletions(-) diff --git a/packages/react-bootstrap-table2-paginator/src/page-button.js b/packages/react-bootstrap-table2-paginator/src/page-button.js index 272fa19..e2834ee 100644 --- a/packages/react-bootstrap-table2-paginator/src/page-button.js +++ b/packages/react-bootstrap-table2-paginator/src/page-button.js @@ -20,13 +20,14 @@ class PageButton extends Component { page, title, active, - disabled + disabled, + className } = this.props; const classes = cs({ active, disabled, 'page-item': true - }); + }, className); return (
  • @@ -41,6 +42,7 @@ PageButton.propTypes = { page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, active: PropTypes.bool.isRequired, disabled: PropTypes.bool.isRequired, + className: PropTypes.string, title: PropTypes.string }; diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-list.js b/packages/react-bootstrap-table2-paginator/src/pagination-list.js index 805af53..9954538 100644 --- a/packages/react-bootstrap-table2-paginator/src/pagination-list.js +++ b/packages/react-bootstrap-table2-paginator/src/pagination-list.js @@ -6,13 +6,21 @@ import PageButton from './page-button'; const PaginatonList = props => (
      { - props.pages.map(pageProps => ( - - )) + props.pages.map((pageProps) => { + if (props.pageButtonRenderer) { + return props.pageButtonRenderer({ + ...pageProps, + onPageChange: props.onPageChange + }); + } + return ( + + ); + }) }
    ); @@ -24,7 +32,12 @@ PaginatonList.propTypes = { disable: PropTypes.bool, title: PropTypes.string })).isRequired, - onPageChange: PropTypes.func.isRequired + onPageChange: PropTypes.func.isRequired, + pageButtonRenderer: PropTypes.func +}; + +PaginatonList.defaultProps = { + pageButtonRenderer: null }; export default PaginatonList; diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js index cf29eb9..7e0511a 100644 --- a/packages/react-bootstrap-table2-paginator/src/pagination.js +++ b/packages/react-bootstrap-table2-paginator/src/pagination.js @@ -108,6 +108,7 @@ class Pagination extends pageResolver(Component) { const { showTotal, dataSize, + pageButtonRenderer, paginationTotalRenderer, sizePerPageList, currSizePerPage, @@ -148,7 +149,11 @@ class Pagination extends pageResolver(Component) { }
    - +
    ); @@ -165,6 +170,7 @@ Pagination.propTypes = { pageStartIndex: PropTypes.number, paginationSize: PropTypes.number, showTotal: PropTypes.bool, + pageButtonRenderer: PropTypes.func, paginationTotalRenderer: PropTypes.func, firstPageText: PropTypes.string, prePageText: PropTypes.string, @@ -186,6 +192,7 @@ Pagination.defaultProps = { withFirstAndLast: Const.With_FIRST_AND_LAST, alwaysShowAllBtns: Const.SHOW_ALL_PAGE_BTNS, showTotal: Const.SHOW_TOTAL, + pageButtonRenderer: null, paginationTotalRenderer: Const.PAGINATION_TOTAL, firstPageText: Const.FIRST_PAGE_TEXT, prePageText: Const.PRE_PAGE_TEXT, diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js index 122b62b..de85eac 100644 --- a/packages/react-bootstrap-table2-paginator/src/state-context.js +++ b/packages/react-bootstrap-table2-paginator/src/state-context.js @@ -76,6 +76,7 @@ class StateProvider extends React.Component { sizePerPageList: options.sizePerPageList || Const.SIZE_PER_PAGE_LIST, paginationSize: options.paginationSize || Const.PAGINATION_SIZE, showTotal: options.showTotal, + pageButtonRenderer: options.pageButtonRenderer, paginationTotalRenderer: options.paginationTotalRenderer, firstPageText: options.firstPageText || Const.FIRST_PAGE_TEXT, prePageText: options.prePageText || Const.PRE_PAGE_TEXT, diff --git a/packages/react-bootstrap-table2-paginator/test/pagination-list.test.js b/packages/react-bootstrap-table2-paginator/test/pagination-list.test.js index 0545006..443d435 100644 --- a/packages/react-bootstrap-table2-paginator/test/pagination-list.test.js +++ b/packages/react-bootstrap-table2-paginator/test/pagination-list.test.js @@ -39,4 +39,22 @@ describe('PaginationList', () => { expect(wrapper.find('ul.react-bootstrap-table-page-btns-ul').length).toBe(1); expect(wrapper.find(PageButton).length).toBe(pages.length); }); + + describe('when props.pageButtonRenderer is existing', () => { + const pageButtonRenderer = jest.fn().mockReturnValue(null); + beforeEach(() => { + wrapper = shallow( + + ); + }); + + it('should call props.pageButtonRenderer correctly', () => { + expect(wrapper.length).toBe(1); + expect(pageButtonRenderer).toHaveBeenCalledTimes(pages.length); + }); + }); }); From 424dbea27055d088daf115f03f95088e26fa157e Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 1 Dec 2018 18:03:04 +0800 Subject: [PATCH 04/13] implement pageListRenderer --- .../src/pagination.js | 24 +++++++++++++------ .../src/state-context.js | 1 + .../test/pagination.test.js | 18 ++++++++++++++ 3 files changed, 36 insertions(+), 7 deletions(-) diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js index 7e0511a..e914f93 100644 --- a/packages/react-bootstrap-table2-paginator/src/pagination.js +++ b/packages/react-bootstrap-table2-paginator/src/pagination.js @@ -108,6 +108,7 @@ class Pagination extends pageResolver(Component) { const { showTotal, dataSize, + pageListRenderer, pageButtonRenderer, paginationTotalRenderer, sizePerPageList, @@ -148,13 +149,20 @@ class Pagination extends pageResolver(Component) { ) : null } -
    - -
    + { + pageListRenderer ? pageListRenderer({ + pages, + onPageChange: this.handleChangePage + }) : ( +
    + +
    + ) + } ); } @@ -170,6 +178,7 @@ Pagination.propTypes = { pageStartIndex: PropTypes.number, paginationSize: PropTypes.number, showTotal: PropTypes.bool, + pageListRenderer: PropTypes.func, pageButtonRenderer: PropTypes.func, paginationTotalRenderer: PropTypes.func, firstPageText: PropTypes.string, @@ -192,6 +201,7 @@ Pagination.defaultProps = { withFirstAndLast: Const.With_FIRST_AND_LAST, alwaysShowAllBtns: Const.SHOW_ALL_PAGE_BTNS, showTotal: Const.SHOW_TOTAL, + pageListRenderer: null, pageButtonRenderer: null, paginationTotalRenderer: Const.PAGINATION_TOTAL, firstPageText: Const.FIRST_PAGE_TEXT, diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js index de85eac..33a4b7b 100644 --- a/packages/react-bootstrap-table2-paginator/src/state-context.js +++ b/packages/react-bootstrap-table2-paginator/src/state-context.js @@ -76,6 +76,7 @@ class StateProvider extends React.Component { sizePerPageList: options.sizePerPageList || Const.SIZE_PER_PAGE_LIST, paginationSize: options.paginationSize || Const.PAGINATION_SIZE, showTotal: options.showTotal, + pageListRenderer: options.pageListRenderer, pageButtonRenderer: options.pageButtonRenderer, paginationTotalRenderer: options.paginationTotalRenderer, firstPageText: options.firstPageText || Const.FIRST_PAGE_TEXT, diff --git a/packages/react-bootstrap-table2-paginator/test/pagination.test.js b/packages/react-bootstrap-table2-paginator/test/pagination.test.js index a9e5d35..8c1f9f8 100644 --- a/packages/react-bootstrap-table2-paginator/test/pagination.test.js +++ b/packages/react-bootstrap-table2-paginator/test/pagination.test.js @@ -109,6 +109,24 @@ describe('Pagination', () => { }); }); + describe('when props.pageListRenderer is defined', () => { + const pageListRenderer = jest.fn().mockReturnValue(null); + beforeEach(() => { + pageListRenderer.mockClear(); + const props = createMockProps({ pageListRenderer }); + wrapper = shallow(); + instance = wrapper.instance(); + }); + + it('should not render PaginationList', () => { + expect(wrapper.find(PaginationList)).toHaveLength(0); + }); + + it('should call props.pageListRenderer correctly', () => { + expect(pageListRenderer).toHaveBeenCalledTimes(1); + }); + }); + describe('componentWillReceiveProps', () => { describe('when next props.currSizePerPage is diff than current one', () => { const nextProps = createMockProps({ currSizePerPage: 20 }); From a30a8fd96bb20f0253444487559a8387425c5c53 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sun, 2 Dec 2018 13:32:01 +0800 Subject: [PATCH 05/13] implement sizePerPageOptionRenderer --- .../src/pagination.js | 4 +++ .../src/size-per-page-dropdown.js | 31 +++++++++++++------ .../src/state-context.js | 1 + .../test/size-per-page-dropdown.test.js | 19 ++++++++++++ 4 files changed, 45 insertions(+), 10 deletions(-) diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js index e914f93..d63bc7c 100644 --- a/packages/react-bootstrap-table2-paginator/src/pagination.js +++ b/packages/react-bootstrap-table2-paginator/src/pagination.js @@ -111,6 +111,7 @@ class Pagination extends pageResolver(Component) { pageListRenderer, pageButtonRenderer, paginationTotalRenderer, + sizePerPageOptionRenderer, sizePerPageList, currSizePerPage, hideSizePerPage, @@ -132,6 +133,7 @@ class Pagination extends pageResolver(Component) { { className, variation, btnContextual, + optionRenderer, currSizePerPage, onSizePerPageChange } = props; @@ -61,14 +62,22 @@ const SizePerPageDropDown = (props) => { aria-labelledby="pageDropDown" > { - options.map(option => ( - - )) + options.map((option) => { + if (optionRenderer) { + return optionRenderer({ + ...option, + onSizePerPageChange + }); + } + return ( + + ); + }) } @@ -88,14 +97,16 @@ SizePerPageDropDown.propTypes = { hidden: PropTypes.bool, btnContextual: PropTypes.string, variation: PropTypes.oneOf(['dropdown', 'dropup']), - className: PropTypes.string + className: PropTypes.string, + optionRenderer: PropTypes.func }; SizePerPageDropDown.defaultProps = { open: false, hidden: false, btnContextual: 'btn-default btn-secondary', variation: 'dropdown', - className: '' + className: '', + optionRenderer: null }; diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js index 33a4b7b..ff8d806 100644 --- a/packages/react-bootstrap-table2-paginator/src/state-context.js +++ b/packages/react-bootstrap-table2-paginator/src/state-context.js @@ -79,6 +79,7 @@ class StateProvider extends React.Component { pageListRenderer: options.pageListRenderer, pageButtonRenderer: options.pageButtonRenderer, paginationTotalRenderer: options.paginationTotalRenderer, + sizePerPageOptionRenderer: options.sizePerPageOptionRenderer, 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/size-per-page-dropdown.test.js b/packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown.test.js index fdf55bd..8e1b964 100644 --- a/packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown.test.js +++ b/packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown.test.js @@ -178,4 +178,23 @@ describe('SizePerPageDropDown', () => { expect(wrapper.hasClass(className)).toBeTruthy(); }); }); + + describe('when optionRenderer prop is defined', () => { + const optionRenderer = jest.fn(); + beforeEach(() => { + optionRenderer.mockReset(); + wrapper = shallowWithContext( + , + { bootstrap4: false } + ); + }); + + it('should not render SizePerPageOption', () => { + expect(wrapper.find(SizePerPageOption)).toHaveLength(0); + }); + + it('should call optionRenderer prop correctly', () => { + expect(optionRenderer).toHaveBeenCalledTimes(props.options.length); + }); + }); }); From a5f74cecfed6444786946965301839510cf7a70f Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sun, 2 Dec 2018 14:33:02 +0800 Subject: [PATCH 06/13] implement sizePerPageRenderer --- .../src/pagination.js | 56 ++++++++++++------- .../src/state-context.js | 1 + .../test/pagination.test.js | 18 ++++++ 3 files changed, 56 insertions(+), 19 deletions(-) diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js index d63bc7c..9209095 100644 --- a/packages/react-bootstrap-table2-paginator/src/pagination.js +++ b/packages/react-bootstrap-table2-paginator/src/pagination.js @@ -103,18 +103,47 @@ class Pagination extends pageResolver(Component) { return this.defaultTotal(from, to, size); }; + renderSizePerPageDropDown() { + const { + sizePerPageList, + currSizePerPage, + hideSizePerPage, + sizePerPageRenderer, + sizePerPageOptionRenderer + } = this.props; + const { dropdownOpen: open } = this.state; + + if (sizePerPageList.length > 1 && !hideSizePerPage) { + if (sizePerPageRenderer) { + return sizePerPageRenderer({ + options: this.calculateSizePerPageStatus(), + currSizePerPage: `${currSizePerPage}`, + onSizePerPageChange: this.handleChangeSizePerPage + }); + } + return ( + + ); + } + return null; + } + render() { - const { totalPages, lastPage, dropdownOpen: open } = this.state; + const { totalPages, lastPage } = this.state; const { showTotal, dataSize, pageListRenderer, pageButtonRenderer, paginationTotalRenderer, - sizePerPageOptionRenderer, - sizePerPageList, - currSizePerPage, - hideSizePerPage, hidePageListOnlyOnePage } = this.props; const pages = this.calculatePageStatus(this.calculatePages(totalPages), lastPage); @@ -127,20 +156,7 @@ class Pagination extends pageResolver(Component) { return (
    - { - sizePerPageList.length > 1 && !hideSizePerPage ? - ( - - ) : null - } + { this.renderSizePerPageDropDown() } { showTotal ? this.setTotal( @@ -182,6 +198,7 @@ Pagination.propTypes = { showTotal: PropTypes.bool, pageListRenderer: PropTypes.func, pageButtonRenderer: PropTypes.func, + sizePerPageRenderer: PropTypes.func, paginationTotalRenderer: PropTypes.func, sizePerPageOptionRenderer: PropTypes.func, firstPageText: PropTypes.string, @@ -206,6 +223,7 @@ Pagination.defaultProps = { showTotal: Const.SHOW_TOTAL, pageListRenderer: null, pageButtonRenderer: null, + sizePerPageRenderer: null, paginationTotalRenderer: Const.PAGINATION_TOTAL, sizePerPageOptionRenderer: null, firstPageText: Const.FIRST_PAGE_TEXT, diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js index ff8d806..804fd65 100644 --- a/packages/react-bootstrap-table2-paginator/src/state-context.js +++ b/packages/react-bootstrap-table2-paginator/src/state-context.js @@ -78,6 +78,7 @@ class StateProvider extends React.Component { showTotal: options.showTotal, pageListRenderer: options.pageListRenderer, pageButtonRenderer: options.pageButtonRenderer, + sizePerPageRenderer: options.sizePerPageRenderer, paginationTotalRenderer: options.paginationTotalRenderer, sizePerPageOptionRenderer: options.sizePerPageOptionRenderer, firstPageText: options.firstPageText || Const.FIRST_PAGE_TEXT, diff --git a/packages/react-bootstrap-table2-paginator/test/pagination.test.js b/packages/react-bootstrap-table2-paginator/test/pagination.test.js index 8c1f9f8..54b3fdc 100644 --- a/packages/react-bootstrap-table2-paginator/test/pagination.test.js +++ b/packages/react-bootstrap-table2-paginator/test/pagination.test.js @@ -127,6 +127,24 @@ describe('Pagination', () => { }); }); + describe('when props.sizePerPageRenderer is defined', () => { + const sizePerPageRenderer = jest.fn().mockReturnValue(null); + beforeEach(() => { + sizePerPageRenderer.mockClear(); + const props = createMockProps({ sizePerPageRenderer }); + wrapper = shallow(); + instance = wrapper.instance(); + }); + + it('should not render SizePerPageDropDown', () => { + expect(wrapper.find(SizePerPageDropDown)).toHaveLength(0); + }); + + it('should call props.sizePerPageRenderer correctly', () => { + expect(sizePerPageRenderer).toHaveBeenCalledTimes(1); + }); + }); + describe('componentWillReceiveProps', () => { describe('when next props.currSizePerPage is diff than current one', () => { const nextProps = createMockProps({ currSizePerPage: 20 }); From 5c5241254241d211be95a548b5053e1fbe066431 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 8 Dec 2018 14:36:00 +0800 Subject: [PATCH 07/13] fix remote pagination broken --- .../src/pagination-list-standalone.js | 53 +++++++++++++++++++ .../src/standalone-adapter.js | 14 +++++ .../src/state-context.js | 6 ++- 3 files changed, 71 insertions(+), 2 deletions(-) create mode 100644 packages/react-bootstrap-table2-paginator/src/pagination-list-standalone.js create mode 100644 packages/react-bootstrap-table2-paginator/src/standalone-adapter.js diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-list-standalone.js b/packages/react-bootstrap-table2-paginator/src/pagination-list-standalone.js new file mode 100644 index 0000000..e5b0320 --- /dev/null +++ b/packages/react-bootstrap-table2-paginator/src/pagination-list-standalone.js @@ -0,0 +1,53 @@ +import React from 'react'; +import pageResolver from './page-resolver'; +import PaginationList from './pagination-list'; + +export default class PaginationListStandalone extends pageResolver(React.Component) { + constructor(props) { + super(props); + this.handleChangePage = this.handleChangePage.bind(this); + this.state = this.initialState(); + } + + handleChangePage(newPage) { + let page; + const { + currPage, + pageStartIndex, + prePageText, + nextPageText, + lastPageText, + firstPageText, + onPageChange + } = this.props; + const { lastPage } = this.state; + + if (newPage === prePageText) { + page = this.backToPrevPage(); + } else if (newPage === nextPageText) { + page = (currPage + 1) > lastPage ? lastPage : currPage + 1; + } else if (newPage === lastPageText) { + page = lastPage; + } else if (newPage === firstPageText) { + page = pageStartIndex; + } else { + page = parseInt(newPage, 10); + } + + if (page !== currPage) { + onPageChange(page); + } + } + + render() { + const { totalPages, lastPage } = this.state; + const pages = this.calculatePageStatus(this.calculatePages(totalPages), lastPage); + + return ( + + ); + } +} diff --git a/packages/react-bootstrap-table2-paginator/src/standalone-adapter.js b/packages/react-bootstrap-table2-paginator/src/standalone-adapter.js new file mode 100644 index 0000000..caa89f3 --- /dev/null +++ b/packages/react-bootstrap-table2-paginator/src/standalone-adapter.js @@ -0,0 +1,14 @@ +/* eslint react/prop-types: 0 */ +import React from 'react'; + +export default Component => ({ + page, + sizePerPage, + ...rest +}) => ( + +); diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js index 804fd65..6f34905 100644 --- a/packages/react-bootstrap-table2-paginator/src/state-context.js +++ b/packages/react-bootstrap-table2-paginator/src/state-context.js @@ -98,6 +98,8 @@ class StateProvider extends React.Component { this.remoteEmitter = remoteEmitter; } + getPaginationRemoteEmitter = () => this.remoteEmitter || this.props.remoteEmitter; + isRemotePagination = () => { const e = {}; this.remoteEmitter.emit('isRemotePagination', e); @@ -115,7 +117,7 @@ class StateProvider extends React.Component { this.currPage = currPage; if (this.isRemotePagination()) { - this.remoteEmitter.emit('paginationChange', currPage, currSizePerPage); + this.getPaginationRemoteEmitter().emit('paginationChange', currPage, currSizePerPage); return; } this.forceUpdate(); @@ -132,7 +134,7 @@ class StateProvider extends React.Component { this.currSizePerPage = currSizePerPage; if (this.isRemotePagination()) { - this.remoteEmitter.emit('paginationChange', currPage, currSizePerPage); + this.getPaginationRemoteEmitter().emit('paginationChange', currPage, currSizePerPage); return; } this.forceUpdate(); From d42a10bbae555c4b6d72952175c492d17a5b42c4 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 8 Dec 2018 15:18:00 +0800 Subject: [PATCH 08/13] implement PaginationListStandalone --- .../react-bootstrap-table2-paginator/index.js | 2 + .../src/page-resolver.js | 13 +-- .../src/pagination-handler.js | 78 ++++++++++++++++++ .../src/pagination-list-adapter.js | 20 +++++ .../src/pagination-list-standalone.js | 57 ++----------- .../src/pagination.js | 2 +- .../src/standalone-adapter.js | 4 +- .../test/page-resolver.test.js | 80 +++++++++---------- .../test/pagination-list-adapter.test.js | 32 ++++++++ .../test/pagination.test.js | 3 +- .../test/standalone-adapter.test.js | 44 ++++++++++ 11 files changed, 229 insertions(+), 106 deletions(-) create mode 100644 packages/react-bootstrap-table2-paginator/src/pagination-handler.js create mode 100644 packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js create mode 100644 packages/react-bootstrap-table2-paginator/test/pagination-list-adapter.test.js create mode 100644 packages/react-bootstrap-table2-paginator/test/standalone-adapter.test.js diff --git a/packages/react-bootstrap-table2-paginator/index.js b/packages/react-bootstrap-table2-paginator/index.js index 8b20636..b399ffa 100644 --- a/packages/react-bootstrap-table2-paginator/index.js +++ b/packages/react-bootstrap-table2-paginator/index.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import createBaseContext from './src/state-context'; import createDataContext from './src/data-context'; +import PaginationListStandalone from './src/pagination-list-standalone'; export default (options = {}) => ({ createContext: createDataContext, @@ -21,3 +22,4 @@ CustomizableProvider.propTypes = { }; export const PaginationProvider = CustomizableProvider; +export { PaginationListStandalone }; diff --git a/packages/react-bootstrap-table2-paginator/src/page-resolver.js b/packages/react-bootstrap-table2-paginator/src/page-resolver.js index 5146faf..3c17e93 100644 --- a/packages/react-bootstrap-table2-paginator/src/page-resolver.js +++ b/packages/react-bootstrap-table2-paginator/src/page-resolver.js @@ -8,12 +8,6 @@ export default ExtendBase => return (currPage - 1) < pageStartIndex ? pageStartIndex : currPage - 1; } - goToNextPage() { - const { currPage } = this.props; - const { lastPage } = this.state; - return (currPage + 1) > lastPage ? lastPage : currPage + 1; - } - initialState() { const totalPages = this.calculateTotalPage(); const lastPage = this.calculateLastPage(totalPages); @@ -47,8 +41,9 @@ export default ExtendBase => } calculatePages( - totalPages = this.state.totalPages, - lastPage = this.state.lastPage) { + totalPages, + lastPage + ) { const { currPage, paginationSize, @@ -94,7 +89,7 @@ export default ExtendBase => return pages; } - calculatePageStatus(pages = [], lastPage = this.state.lastPage) { + calculatePageStatus(pages = [], lastPage) { const { currPage, pageStartIndex, diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-handler.js b/packages/react-bootstrap-table2-paginator/src/pagination-handler.js new file mode 100644 index 0000000..1ffc973 --- /dev/null +++ b/packages/react-bootstrap-table2-paginator/src/pagination-handler.js @@ -0,0 +1,78 @@ +/* eslint react/prop-types: 0 */ +import React, { Component } from 'react'; + +import pageResolver from './page-resolver'; + +export default WrappedComponent => + class PaginationHandler extends pageResolver(Component) { + constructor(props) { + super(props); + this.handleChangePage = this.handleChangePage.bind(this); + this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this); + this.state = this.initialState(); + } + + componentWillReceiveProps(nextProps) { + const { dataSize, currSizePerPage } = nextProps; + if (currSizePerPage !== this.props.currSizePerPage || dataSize !== this.props.dataSize) { + const totalPages = this.calculateTotalPage(currSizePerPage, dataSize); + const lastPage = this.calculateLastPage(totalPages); + this.setState({ totalPages, lastPage }); + } + } + + handleChangeSizePerPage(sizePerPage) { + const { currSizePerPage, onSizePerPageChange } = this.props; + const selectedSize = typeof sizePerPage === 'string' ? parseInt(sizePerPage, 10) : sizePerPage; + let { currPage } = this.props; + if (selectedSize !== currSizePerPage) { + const newTotalPages = this.calculateTotalPage(selectedSize); + const newLastPage = this.calculateLastPage(newTotalPages); + if (currPage > newLastPage) currPage = newLastPage; + onSizePerPageChange(selectedSize, currPage); + } + this.closeDropDown(); + } + + handleChangePage(newPage) { + let page; + const { + currPage, + pageStartIndex, + prePageText, + nextPageText, + lastPageText, + firstPageText, + onPageChange + } = this.props; + const { lastPage } = this.state; + + if (newPage === prePageText) { + page = this.backToPrevPage(); + } else if (newPage === nextPageText) { + page = (currPage + 1) > lastPage ? lastPage : currPage + 1; + } else if (newPage === lastPageText) { + page = lastPage; + } else if (newPage === firstPageText) { + page = pageStartIndex; + } else { + page = parseInt(newPage, 10); + } + if (page !== currPage) { + onPageChange(page); + } + } + + render() { + return ( + + ); + } + }; + diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js b/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js new file mode 100644 index 0000000..a2a8deb --- /dev/null +++ b/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js @@ -0,0 +1,20 @@ +/* eslint react/prop-types: 0 */ +import React, { Component } from 'react'; + +import pageResolver from './page-resolver'; + +export default WrappedComponent => + class PaginationListAdapter extends pageResolver(Component) { + render() { + const { lastPage, totalPages, pageButtonRenderer, onPageChange } = this.props; + const pages = this.calculatePageStatus(this.calculatePages(totalPages, lastPage), lastPage); + return ( + + ); + } + }; + diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-list-standalone.js b/packages/react-bootstrap-table2-paginator/src/pagination-list-standalone.js index e5b0320..930ae2a 100644 --- a/packages/react-bootstrap-table2-paginator/src/pagination-list-standalone.js +++ b/packages/react-bootstrap-table2-paginator/src/pagination-list-standalone.js @@ -1,53 +1,12 @@ import React from 'react'; -import pageResolver from './page-resolver'; import PaginationList from './pagination-list'; +import standaloneAdapter from './standalone-adapter'; +import PaginationHandler from './pagination-handler'; +import paginationListAdapter from './pagination-list-adapter'; -export default class PaginationListStandalone extends pageResolver(React.Component) { - constructor(props) { - super(props); - this.handleChangePage = this.handleChangePage.bind(this); - this.state = this.initialState(); - } +const PaginationListStandalone = props => ( + +); - handleChangePage(newPage) { - let page; - const { - currPage, - pageStartIndex, - prePageText, - nextPageText, - lastPageText, - firstPageText, - onPageChange - } = this.props; - const { lastPage } = this.state; - - if (newPage === prePageText) { - page = this.backToPrevPage(); - } else if (newPage === nextPageText) { - page = (currPage + 1) > lastPage ? lastPage : currPage + 1; - } else if (newPage === lastPageText) { - page = lastPage; - } else if (newPage === firstPageText) { - page = pageStartIndex; - } else { - page = parseInt(newPage, 10); - } - - if (page !== currPage) { - onPageChange(page); - } - } - - render() { - const { totalPages, lastPage } = this.state; - const pages = this.calculatePageStatus(this.calculatePages(totalPages), lastPage); - - return ( - - ); - } -} +export default +standaloneAdapter(PaginationHandler(paginationListAdapter(PaginationListStandalone))); diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js index 9209095..64b1e6a 100644 --- a/packages/react-bootstrap-table2-paginator/src/pagination.js +++ b/packages/react-bootstrap-table2-paginator/src/pagination.js @@ -146,7 +146,7 @@ class Pagination extends pageResolver(Component) { paginationTotalRenderer, hidePageListOnlyOnePage } = this.props; - const pages = this.calculatePageStatus(this.calculatePages(totalPages), lastPage); + const pages = this.calculatePageStatus(this.calculatePages(totalPages, lastPage), lastPage); const [from, to] = this.calculateFromTo(); const pageListClass = cs( 'react-bootstrap-table-pagination-list', diff --git a/packages/react-bootstrap-table2-paginator/src/standalone-adapter.js b/packages/react-bootstrap-table2-paginator/src/standalone-adapter.js index caa89f3..98c16cd 100644 --- a/packages/react-bootstrap-table2-paginator/src/standalone-adapter.js +++ b/packages/react-bootstrap-table2-paginator/src/standalone-adapter.js @@ -1,12 +1,12 @@ /* eslint react/prop-types: 0 */ import React from 'react'; -export default Component => ({ +export default WrappedComponent => ({ page, sizePerPage, ...rest }) => ( - { }); }); - describe('goToNextPage', () => { - const props = createMockProps(); - - describe('when props.currPage is not hitting state.lastPage', () => { - beforeEach(() => { - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - }); - - it('should getting previous page correctly', () => { - const instance = wrapper.instance(); - expect(instance.goToNextPage()).toEqual(props.currPage + 1); - }); - }); - - describe('when props.currPage is hitting state.lastpage', () => { - beforeEach(() => { - props.currPage = 10; - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - }); - - it('should always getting page which must eq props.pageStartIndex', () => { - const instance = wrapper.instance(); - expect(instance.goToNextPage()).toEqual(instance.state.lastPage); - }); - }); - }); - describe('calculateFromTo', () => { const props = createMockProps(); beforeEach(() => { @@ -192,7 +163,7 @@ describe('PageResolver', () => { }); describe('calculatePages', () => { - describe('calculate by state.totalPages and state.lastPage', () => { + describe('calculate by totalPages and lastPage', () => { const props = createMockProps(); beforeEach(() => { const mockElement = React.createElement(MockComponent, props, null); @@ -201,7 +172,7 @@ describe('PageResolver', () => { it('should getting pages list correctly', () => { const instance = wrapper.instance(); - expect(instance.calculatePages()).toEqual( + expect(instance.calculatePages(instance.state.totalPages, instance.state.lastPage)).toEqual( [props.prePageText, 1, 2, 3, 4, 5, props.nextPageText, props.lastPageText]); expect(instance.calculatePages(4, 4)).toEqual( @@ -218,7 +189,9 @@ describe('PageResolver', () => { currPages.forEach((currPage) => { props.currPage = currPage + 1; wrapper = shallow(); - const pageList = wrapper.instance().calculatePages(); + const instance = wrapper.instance(); + const pageList = instance.calculatePages( + instance.state.totalPages, instance.state.lastPage); if (props.currPage < 4) { expect(pageList).toEqual( @@ -253,7 +226,9 @@ describe('PageResolver', () => { [1, 3, 5, 8, 10].forEach((paginationSize) => { props.paginationSize = paginationSize; wrapper = shallow(); - const pageList = wrapper.instance().calculatePages(); + const instance = wrapper.instance(); + const pageList = instance.calculatePages( + instance.state.totalPages, instance.state.lastPage); const result = pageList.filter(p => indicators.indexOf(p) === -1); expect(result.length).toEqual(props.paginationSize); }); @@ -267,7 +242,9 @@ describe('PageResolver', () => { [1, 2, 3, 4, 5, 6, 7].forEach((currPage) => { props.currPage = currPage; wrapper = shallow(); - const pageList = wrapper.instance().calculatePages(); + const instance = wrapper.instance(); + const pageList = instance.calculatePages( + instance.state.totalPages, instance.state.lastPage); expect(pageList.indexOf(props.lastPageText) > -1).toBeTruthy(); }); }); @@ -278,7 +255,9 @@ describe('PageResolver', () => { [10, 9, 8, 7, 6, 5, 4].forEach((currPage) => { props.currPage = currPage; wrapper = shallow(); - const pageList = wrapper.instance().calculatePages(); + const instance = wrapper.instance(); + const pageList = instance.calculatePages( + instance.state.totalPages, instance.state.lastPage); expect(pageList.indexOf(props.firstPageText) > -1).toBeTruthy(); }); }); @@ -293,7 +272,9 @@ describe('PageResolver', () => { props.currPage = currPage + 1; props.withFirstAndLast = false; wrapper = shallow(); - const pageList = wrapper.instance().calculatePages(); + const instance = wrapper.instance(); + const pageList = instance.calculatePages( + instance.state.totalPages, instance.state.lastPage); expect(pageList.indexOf(props.lastPageText) > -1).toBeFalsy(); expect(pageList.indexOf(props.firstPageText) > -1).toBeFalsy(); }); @@ -311,7 +292,9 @@ describe('PageResolver', () => { }); it('should getting last page correctly', () => { - const pageList = wrapper.instance().calculatePages(); + const instance = wrapper.instance(); + const pageList = instance.calculatePages( + instance.state.totalPages, instance.state.lastPage); expect(pageList).toEqual( [props.prePageText, -2, -1, 0, 1, 2, props.nextPageText, props.lastPageText]); }); @@ -329,7 +312,9 @@ describe('PageResolver', () => { }); it('should always having next and previous page indication', () => { - const pageList = wrapper.instance().calculatePages(); + const instance = wrapper.instance(); + const pageList = instance.calculatePages( + instance.state.totalPages, instance.state.lastPage); expect(pageList.indexOf(props.nextPageText) > -1).toBeTruthy(); expect(pageList.indexOf(props.prePageText) > -1).toBeTruthy(); }); @@ -345,7 +330,10 @@ describe('PageResolver', () => { }); it('should getting empty array', () => { - expect(wrapper.instance().calculatePages()).toEqual([]); + const instance = wrapper.instance(); + const pageList = instance.calculatePages( + instance.state.totalPages, instance.state.lastPage); + expect(pageList).toEqual([]); }); }); }); @@ -360,7 +348,9 @@ describe('PageResolver', () => { const mockElement = React.createElement(MockComponent, props, null); wrapper = shallow(mockElement); instance = wrapper.instance(); - pageStatus = instance.calculatePageStatus(instance.calculatePages()); + const pageList = instance.calculatePages( + instance.state.totalPages, instance.state.lastPage); + pageStatus = instance.calculatePageStatus(pageList, instance.state.lastPage); }); it('should returning correct format for page status', () => { @@ -388,8 +378,9 @@ describe('PageResolver', () => { const mockElement = React.createElement(MockComponent, props, null); wrapper = shallow(mockElement); instance = wrapper.instance(); - const pageList = instance.calculatePages(); - pageStatus = instance.calculatePageStatus(pageList); + const pageList = instance.calculatePages( + instance.state.totalPages, instance.state.lastPage); + pageStatus = instance.calculatePageStatus(pageList, instance.state.lastPage); expect(pageStatus.find(p => p.page === props.prePageText)).not.toBeDefined(); }); @@ -401,8 +392,9 @@ describe('PageResolver', () => { const mockElement = React.createElement(MockComponent, props, null); wrapper = shallow(mockElement); instance = wrapper.instance(); - const pageList = instance.calculatePages(); - pageStatus = instance.calculatePageStatus(pageList); + const pageList = instance.calculatePages( + instance.state.totalPages, instance.state.lastPage); + pageStatus = instance.calculatePageStatus(pageList, instance.state.lastPage); expect(pageStatus.find(p => p.page === props.nextPageText)).not.toBeDefined(); }); diff --git a/packages/react-bootstrap-table2-paginator/test/pagination-list-adapter.test.js b/packages/react-bootstrap-table2-paginator/test/pagination-list-adapter.test.js new file mode 100644 index 0000000..9217200 --- /dev/null +++ b/packages/react-bootstrap-table2-paginator/test/pagination-list-adapter.test.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import paginationListAdapter from '../src/pagination-list-adapter'; + + +const MockComponent = () => null; + +const PaginationListAdapter = paginationListAdapter(MockComponent); +describe('paginationListAdapter', () => { + let wrapper; + + const props = { + totalPages: 10, + lastPage: 10, + pageButtonRenderer: jest.fn(), + onPageChange: jest.fn() + }; + + describe('render', () => { + beforeEach(() => { + wrapper = shallow(); + }); + + it('should render successfully', () => { + const mockComponent = wrapper.find(MockComponent); + expect(mockComponent).toHaveLength(1); + expect(mockComponent.props().pages).toBeDefined(); + expect(mockComponent.props().pageButtonRenderer).toBeDefined(); + expect(mockComponent.props().onPageChange).toBeDefined(); + }); + }); +}); diff --git a/packages/react-bootstrap-table2-paginator/test/pagination.test.js b/packages/react-bootstrap-table2-paginator/test/pagination.test.js index 54b3fdc..29c04b5 100644 --- a/packages/react-bootstrap-table2-paginator/test/pagination.test.js +++ b/packages/react-bootstrap-table2-paginator/test/pagination.test.js @@ -54,8 +54,9 @@ describe('Pagination', () => { it('should rendering PaginationList component successfully', () => { const paginationList = wrapper.find(PaginationList); + const pageList = instance.calculatePages(instance.state.totalPages, instance.state.lastPage); expect(paginationList.length).toBe(1); - expect(paginationList.prop('pages')).toEqual(instance.calculatePageStatus(instance.calculatePages())); + expect(paginationList.prop('pages')).toEqual(instance.calculatePageStatus(pageList, instance.state.lastPage)); expect(paginationList.prop('onPageChange')).toEqual(instance.handleChangePage); }); diff --git a/packages/react-bootstrap-table2-paginator/test/standalone-adapter.test.js b/packages/react-bootstrap-table2-paginator/test/standalone-adapter.test.js new file mode 100644 index 0000000..beebfa7 --- /dev/null +++ b/packages/react-bootstrap-table2-paginator/test/standalone-adapter.test.js @@ -0,0 +1,44 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import standaloneAdapter from '../src/standalone-adapter'; + + +const MockStandalone = () => null; + +const MockStandaloneWithAdapter = standaloneAdapter(MockStandalone); +describe('standaloneAdapter', () => { + let wrapper; + + const props = { + page: 2, + sizePerPage: 10, + name1: 'A', + name2: 'B' + }; + describe('render', () => { + beforeEach(() => { + wrapper = shallow(); + }); + + it('should render successfully', () => { + expect(wrapper.find(MockStandalone)).toHaveLength(1); + }); + + it('should convert props.page as currPage to child component', () => { + const mockStandalone = wrapper.find(MockStandalone); + expect(mockStandalone.props().currPage).toEqual(props.page); + }); + + it('should convert props.sizePerPage as currSizePerPage to child component', () => { + const mockStandalone = wrapper.find(MockStandalone); + expect(mockStandalone.props().currSizePerPage).toEqual(props.sizePerPage); + }); + + it('should just pass remain props to child component', () => { + const mockStandalone = wrapper.find(MockStandalone); + const { page, sizePerPage, ...origin } = props; + const { currPage, currSizePerPage, ...rest } = mockStandalone.props(); + expect(rest).toEqual(origin); + }); + }); +}); From 297f3e0c4fdcbd7ab5a10ba290fe3dd379b9348e Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 8 Dec 2018 16:25:59 +0800 Subject: [PATCH 09/13] implement SizePerPageDropdownStandalone --- .../react-bootstrap-table2-paginator/index.js | 3 +- .../src/page-resolver.js | 2 +- .../src/pagination-handler.js | 1 - .../src/size-per-page-dropdown-adapter.js | 63 ++++++++ .../src/size-per-page-dropdown-standalone.js | 12 ++ .../test/page-resolver.test.js | 2 - .../test/pagination.test.js | 1 - .../size-per-page-dropdown-adapter.test.js | 146 ++++++++++++++++++ 8 files changed, 224 insertions(+), 6 deletions(-) create mode 100644 packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js create mode 100644 packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-standalone.js create mode 100644 packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown-adapter.test.js diff --git a/packages/react-bootstrap-table2-paginator/index.js b/packages/react-bootstrap-table2-paginator/index.js index b399ffa..1956416 100644 --- a/packages/react-bootstrap-table2-paginator/index.js +++ b/packages/react-bootstrap-table2-paginator/index.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; 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'; export default (options = {}) => ({ createContext: createDataContext, @@ -22,4 +23,4 @@ CustomizableProvider.propTypes = { }; export const PaginationProvider = CustomizableProvider; -export { PaginationListStandalone }; +export { PaginationListStandalone, SizePerPageDropdownStandalone }; diff --git a/packages/react-bootstrap-table2-paginator/src/page-resolver.js b/packages/react-bootstrap-table2-paginator/src/page-resolver.js index 3c17e93..cb77b17 100644 --- a/packages/react-bootstrap-table2-paginator/src/page-resolver.js +++ b/packages/react-bootstrap-table2-paginator/src/page-resolver.js @@ -11,7 +11,7 @@ export default ExtendBase => initialState() { const totalPages = this.calculateTotalPage(); const lastPage = this.calculateLastPage(totalPages); - return { totalPages, lastPage, dropdownOpen: false }; + return { totalPages, lastPage }; } calculateTotalPage(sizePerPage = this.props.currSizePerPage, dataSize = this.props.dataSize) { diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-handler.js b/packages/react-bootstrap-table2-paginator/src/pagination-handler.js index 1ffc973..fcc9e11 100644 --- a/packages/react-bootstrap-table2-paginator/src/pagination-handler.js +++ b/packages/react-bootstrap-table2-paginator/src/pagination-handler.js @@ -31,7 +31,6 @@ export default WrappedComponent => if (currPage > newLastPage) currPage = newLastPage; onSizePerPageChange(selectedSize, currPage); } - this.closeDropDown(); } handleChangePage(newPage) { diff --git a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js new file mode 100644 index 0000000..88ad6c8 --- /dev/null +++ b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js @@ -0,0 +1,63 @@ +/* eslint react/prop-types: 0 */ +import React, { Component } from 'react'; + +import pageResolver from './page-resolver'; + +export default WrappedComponent => + class SizePerPageDropdownAdapter extends pageResolver(Component) { + constructor(props) { + super(props); + this.closeDropDown = this.closeDropDown.bind(this); + this.toggleDropDown = this.toggleDropDown.bind(this); + this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this); + this.state = { dropdownOpen: false }; + } + + toggleDropDown() { + const dropdownOpen = !this.state.dropdownOpen; + this.setState(() => ({ dropdownOpen })); + } + + closeDropDown() { + this.setState(() => ({ dropdownOpen: false })); + } + + handleChangeSizePerPage(sizePerPage) { + this.props.onSizePerPageChange(sizePerPage); + this.closeDropDown(); + } + + render() { + const { + sizePerPageList, + currSizePerPage, + hideSizePerPage, + sizePerPageRenderer, + sizePerPageOptionRenderer + } = this.props; + const { dropdownOpen: open } = this.state; + + if (sizePerPageList.length > 1 && !hideSizePerPage) { + if (sizePerPageRenderer) { + return sizePerPageRenderer({ + options: this.calculateSizePerPageStatus(), + currSizePerPage: `${currSizePerPage}`, + onSizePerPageChange: this.handleChangeSizePerPage + }); + } + return ( + + ); + } + return null; + } + }; + diff --git a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-standalone.js b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-standalone.js new file mode 100644 index 0000000..48ed0b1 --- /dev/null +++ b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-standalone.js @@ -0,0 +1,12 @@ +import React from 'react'; +import SizePerPageDropdown from './size-per-page-dropdown'; +import standaloneAdapter from './standalone-adapter'; +import paginationHandler from './pagination-handler'; +import sizePerPageDropdownAdapter from './size-per-page-dropdown-adapter'; + +const SizePerPageDropdownStandalone = props => ( + +); + +export default +standaloneAdapter(paginationHandler(sizePerPageDropdownAdapter(SizePerPageDropdownStandalone))); diff --git a/packages/react-bootstrap-table2-paginator/test/page-resolver.test.js b/packages/react-bootstrap-table2-paginator/test/page-resolver.test.js index 1a030b9..ca31da5 100644 --- a/packages/react-bootstrap-table2-paginator/test/page-resolver.test.js +++ b/packages/react-bootstrap-table2-paginator/test/page-resolver.test.js @@ -46,8 +46,6 @@ describe('PageResolver', () => { expect(instance.state.lastPage).toBeDefined(); expect(instance.state.lastPage).toEqual( instance.calculateLastPage(instance.state.totalPages)); - expect(instance.state.dropdownOpen).toBeDefined(); - expect(instance.state.dropdownOpen).toBeFalsy(); }); }); diff --git a/packages/react-bootstrap-table2-paginator/test/pagination.test.js b/packages/react-bootstrap-table2-paginator/test/pagination.test.js index 29c04b5..6091e31 100644 --- a/packages/react-bootstrap-table2-paginator/test/pagination.test.js +++ b/packages/react-bootstrap-table2-paginator/test/pagination.test.js @@ -68,7 +68,6 @@ describe('Pagination', () => { expect(sizePerPageDropDown.prop('options')).toEqual(instance.calculateSizePerPageStatus()); expect(sizePerPageDropDown.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage); expect(sizePerPageDropDown.prop('onClick')).toEqual(instance.toggleDropDown); - expect(sizePerPageDropDown.prop('open')).toEqual(instance.state.dropdownOpen); }); }); diff --git a/packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown-adapter.test.js b/packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown-adapter.test.js new file mode 100644 index 0000000..2a45cfb --- /dev/null +++ b/packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown-adapter.test.js @@ -0,0 +1,146 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import sizePerPageDropdownAdapter from '../src/size-per-page-dropdown-adapter'; + + +const MockComponent = () => null; + +const SizePerPageDropdownAdapter = sizePerPageDropdownAdapter(MockComponent); +describe('sizePerPageDropdownAdapter', () => { + let wrapper; + let instance; + + const createMockProps = props => ({ + dataSize: 100, + sizePerPageList: [10, 20, 30, 50], + currPage: 1, + currSizePerPage: 10, + alwaysShowAllBtns: false, + onSizePerPageChange: jest.fn(), + hidePageListOnlyOnePage: false, + hideSizePerPage: false, + optionRenderer: jest.fn(), + sizePerPageOptionRenderer: jest.fn(), + ...props + }); + + describe('render', () => { + const props = createMockProps(); + beforeEach(() => { + wrapper = shallow(); + instance = wrapper.instance(); + }); + + it('should render successfully', () => { + const mockComponent = wrapper.find(MockComponent); + expect(mockComponent).toHaveLength(1); + + expect(mockComponent.props().currSizePerPage).toEqual(`${props.currSizePerPage}`); + expect(mockComponent.props().options).toBeDefined(); + expect(mockComponent.props().optionRenderer).toBeDefined(); + expect(mockComponent.props().onSizePerPageChange).toEqual(instance.handleChangeSizePerPage); + expect(mockComponent.props().onClick).toEqual(instance.toggleDropDown); + expect(mockComponent.props().onBlur).toEqual(instance.closeDropDown); + expect(mockComponent.props().open).toEqual(instance.state.dropdownOpen); + }); + }); + + describe('when props.sizePerPageList is empty array', () => { + beforeEach(() => { + const props = createMockProps({ sizePerPageList: [] }); + wrapper = shallow(); + instance = wrapper.instance(); + }); + + it('should not render component', () => { + const sizePerPageDropDown = wrapper.find(MockComponent); + expect(sizePerPageDropDown.length).toBe(0); + }); + }); + + describe('when props.hideSizePerPage is true', () => { + beforeEach(() => { + const props = createMockProps({ hideSizePerPage: true }); + wrapper = shallow(); + instance = wrapper.instance(); + }); + + it('should not rendering SizePerPageDropDown component', () => { + const sizePerPageDropDown = wrapper.find(MockComponent); + expect(sizePerPageDropDown.length).toBe(0); + }); + }); + + describe('toggleDropDown', () => { + beforeEach(() => { + const props = createMockProps(); + wrapper = shallow(); + instance = wrapper.instance(); + }); + + it('should set state.dropdownOpen as true when it is false', () => { + instance.toggleDropDown(); + expect(instance.state.dropdownOpen).toBeTruthy(); + }); + + it('should set state.dropdownOpen as false when it is true', () => { + instance.toggleDropDown(); + instance.toggleDropDown(); + expect(instance.state.dropdownOpen).toBeFalsy(); + }); + }); + + describe('closeDropDown', () => { + beforeEach(() => { + const props = createMockProps(); + wrapper = shallow(); + instance = wrapper.instance(); + }); + + it('should always set state.dropdownOpen as false', () => { + instance.closeDropDown(); + expect(instance.state.dropdownOpen).toBeFalsy(); + instance.closeDropDown(); + expect(instance.state.dropdownOpen).toBeFalsy(); + }); + }); + + describe('handleChangeSizePerPage', () => { + let props; + const sizePerPage = 25; + beforeEach(() => { + props = createMockProps(); + wrapper = shallow(); + instance = wrapper.instance(); + instance.handleChangeSizePerPage(sizePerPage); + }); + + it('should call props.onSizePerPageChange correctly', () => { + expect(props.onSizePerPageChange).toHaveBeenCalledTimes(1); + expect(props.onSizePerPageChange).toHaveBeenCalledWith(sizePerPage); + }); + + it('should always set state.dropdownOpen as false', () => { + expect(instance.state.dropdownOpen).toBeFalsy(); + }); + }); + + describe('when props.sizePerPageRenderer is defined', () => { + const sizePerPageRenderer = jest.fn().mockReturnValue(null); + + beforeEach(() => { + sizePerPageRenderer.mockClear(); + const props = createMockProps({ sizePerPageRenderer }); + wrapper = shallow(); + instance = wrapper.instance(); + }); + + it('should not render default component', () => { + expect(wrapper.find(MockComponent)).toHaveLength(0); + }); + + it('should call props.sizePerPageRenderer correctly', () => { + expect(sizePerPageRenderer).toHaveBeenCalledTimes(1); + }); + }); +}); From 620309115f8b42de73ec06e88e0e22df79eed4bc Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 8 Dec 2018 18:04:05 +0800 Subject: [PATCH 10/13] extract useless function from pagination ro paginationHandler --- .../src/pagination-list-adapter.js | 6 +- .../src/pagination.js | 150 +++-------- .../src/size-per-page-dropdown-adapter.js | 6 +- .../test/data-context.test.js | 2 +- .../test/pagination-handler.test.js | 203 ++++++++++++++ .../test/pagination.test.js | 251 +++--------------- 6 files changed, 277 insertions(+), 341 deletions(-) create mode 100644 packages/react-bootstrap-table2-paginator/test/pagination-handler.test.js diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js b/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js index a2a8deb..33c5115 100644 --- a/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js +++ b/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js @@ -2,8 +2,9 @@ import React, { Component } from 'react'; import pageResolver from './page-resolver'; +import PaginationList from './pagination-list'; -export default WrappedComponent => +const paginationListAdapter = WrappedComponent => class PaginationListAdapter extends pageResolver(Component) { render() { const { lastPage, totalPages, pageButtonRenderer, onPageChange } = this.props; @@ -18,3 +19,6 @@ export default WrappedComponent => } }; + +export const PaginationListWithAdapter = paginationListAdapter(PaginationList); +export default paginationListAdapter; diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js index 64b1e6a..5b60acc 100644 --- a/packages/react-bootstrap-table2-paginator/src/pagination.js +++ b/packages/react-bootstrap-table2-paginator/src/pagination.js @@ -4,89 +4,13 @@ import cs from 'classnames'; import React, { Component } from 'react'; import PropTypes from 'prop-types'; import pageResolver from './page-resolver'; -import SizePerPageDropDown from './size-per-page-dropdown'; -import PaginationList from './pagination-list'; +import paginationHandler from './pagination-handler'; +import { SizePerPageDropdownAdapter } from './size-per-page-dropdown-adapter'; +import { PaginationListWithAdapter } from './pagination-list-adapter'; import PaginationTotal from './pagination-total'; import Const from './const'; class Pagination extends pageResolver(Component) { - constructor(props) { - super(props); - this.closeDropDown = this.closeDropDown.bind(this); - this.toggleDropDown = this.toggleDropDown.bind(this); - this.handleChangePage = this.handleChangePage.bind(this); - this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this); - this.state = this.initialState(); - } - - componentWillReceiveProps(nextProps) { - const { dataSize, currSizePerPage } = nextProps; - if (currSizePerPage !== this.props.currSizePerPage || dataSize !== this.props.dataSize) { - const totalPages = this.calculateTotalPage(currSizePerPage, dataSize); - const lastPage = this.calculateLastPage(totalPages); - this.setState({ totalPages, lastPage }); - } - } - - toggleDropDown() { - const dropdownOpen = !this.state.dropdownOpen; - this.setState(() => { - return { dropdownOpen }; - }); - } - - closeDropDown() { - this.setState(() => { - return { dropdownOpen: false }; - }); - } - - handleChangeSizePerPage(sizePerPage) { - const { currSizePerPage, onSizePerPageChange } = this.props; - const selectedSize = typeof sizePerPage === 'string' ? parseInt(sizePerPage, 10) : sizePerPage; - let { currPage } = this.props; - if (selectedSize !== currSizePerPage) { - const newTotalPages = this.calculateTotalPage(selectedSize); - const newLastPage = this.calculateLastPage(newTotalPages); - if (currPage > newLastPage) currPage = newLastPage; - onSizePerPageChange(selectedSize, currPage); - } - this.closeDropDown(); - } - - handleChangePage(newPage) { - let page; - const { - currPage, - pageStartIndex, - prePageText, - nextPageText, - lastPageText, - firstPageText, - onPageChange - // keepSizePerPageState - } = this.props; - const { lastPage } = this.state; - - if (newPage === prePageText) { - page = this.backToPrevPage(); - } else if (newPage === nextPageText) { - page = (currPage + 1) > lastPage ? lastPage : currPage + 1; - } else if (newPage === lastPageText) { - page = lastPage; - } else if (newPage === firstPageText) { - page = pageStartIndex; - } else { - page = parseInt(newPage, 10); - } - - // if (keepSizePerPageState) { this.closeDropDown(); } - - if (page !== currPage) { - onPageChange(page); - } - } - defaultTotal = (from, to, size) => ( 1 && !hideSizePerPage) { - if (sizePerPageRenderer) { - return sizePerPageRenderer({ - options: this.calculateSizePerPageStatus(), - currSizePerPage: `${currSizePerPage}`, - onSizePerPageChange: this.handleChangeSizePerPage - }); - } - return ( - - ); - } - return null; - } - render() { - const { totalPages, lastPage } = this.state; const { showTotal, dataSize, pageListRenderer, pageButtonRenderer, paginationTotalRenderer, - hidePageListOnlyOnePage + hidePageListOnlyOnePage, + totalPages, + lastPage, + onPageChange, + sizePerPageList, + currSizePerPage, + hideSizePerPage, + sizePerPageRenderer, + sizePerPageOptionRenderer, + onSizePerPageChange, + ...rest } = this.props; + const pages = this.calculatePageStatus(this.calculatePages(totalPages, lastPage), lastPage); const [from, to] = this.calculateFromTo(); const pageListClass = cs( @@ -156,7 +57,14 @@ class Pagination extends pageResolver(Component) { return (
    - { this.renderSizePerPageDropDown() } + { showTotal ? this.setTotal( @@ -170,13 +78,15 @@ class Pagination extends pageResolver(Component) { { pageListRenderer ? pageListRenderer({ pages, - onPageChange: this.handleChangePage + onPageChange }) : (
    -
    ) @@ -239,4 +149,4 @@ Pagination.defaultProps = { hidePageListOnlyOnePage: Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE }; -export default Pagination; +export default paginationHandler(Pagination); diff --git a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js index 88ad6c8..a63e5f7 100644 --- a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js +++ b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js @@ -2,8 +2,9 @@ import React, { Component } from 'react'; import pageResolver from './page-resolver'; +import SizePerPageDropDown from './size-per-page-dropdown'; -export default WrappedComponent => +const sizePerPageDropdownAdapter = WrappedComponent => class SizePerPageDropdownAdapter extends pageResolver(Component) { constructor(props) { super(props); @@ -61,3 +62,6 @@ export default WrappedComponent => } }; + +export const SizePerPageDropdownAdapter = sizePerPageDropdownAdapter(SizePerPageDropDown); +export default sizePerPageDropdownAdapter; diff --git a/packages/react-bootstrap-table2-paginator/test/data-context.test.js b/packages/react-bootstrap-table2-paginator/test/data-context.test.js index 6128f7b..ba920cc 100644 --- a/packages/react-bootstrap-table2-paginator/test/data-context.test.js +++ b/packages/react-bootstrap-table2-paginator/test/data-context.test.js @@ -124,7 +124,7 @@ describe('PaginationDataContext', () => { expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE); expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE); expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE); - expect(pagination.prop('paginationTotalRenderer')).toBeNull(); + expect(pagination.prop('paginationTotalRenderer')).toBeUndefined(); }); }); diff --git a/packages/react-bootstrap-table2-paginator/test/pagination-handler.test.js b/packages/react-bootstrap-table2-paginator/test/pagination-handler.test.js new file mode 100644 index 0000000..4c295a1 --- /dev/null +++ b/packages/react-bootstrap-table2-paginator/test/pagination-handler.test.js @@ -0,0 +1,203 @@ +import React from 'react'; +import sinon from 'sinon'; +import { shallow } from 'enzyme'; + +import paginationHandler from '../src/pagination-handler'; + +const MockComponent = () => null; +const MockComponentWithPaginationHandler = paginationHandler(MockComponent); + +describe('paginationHandler', () => { + let wrapper; + let instance; + + const createMockProps = props => ({ + dataSize: 100, + sizePerPageList: [10, 20, 30, 50], + currPage: 1, + currSizePerPage: 10, + pageStartIndex: 1, + paginationSize: 5, + withFirstAndLast: true, + firstPageText: '<<', + prePageText: '<', + nextPageText: '>', + lastPageText: '>>', + alwaysShowAllBtns: false, + onPageChange: sinon.stub(), + onSizePerPageChange: sinon.stub(), + hidePageListOnlyOnePage: false, + hideSizePerPage: false, + ...props + }); + + describe('default pagiantion', () => { + const props = createMockProps(); + + beforeEach(() => { + wrapper = shallow(); + instance = wrapper.instance(); + }); + + it('should having correct state', () => { + expect(instance.state).toBeDefined(); + expect(instance.state.totalPages).toEqual(instance.calculateTotalPage()); + expect(instance.state.lastPage).toEqual( + instance.calculateLastPage(instance.state.totalPages)); + }); + + it('should rendering PaginationList component successfully', () => { + const wrapperedComponent = wrapper.find(MockComponent); + expect(wrapperedComponent.length).toBe(1); + expect(wrapperedComponent.props().lastPage).toEqual(instance.state.lastPage); + expect(wrapperedComponent.props().totalPages).toEqual(instance.state.totalPages); + expect(wrapperedComponent.props().onPageChange).toEqual(instance.handleChangePage); + expect(wrapperedComponent.props().onSizePerPageChange) + .toEqual(instance.handleChangeSizePerPage); + }); + }); + + describe('handleChangePage', () => { + const props = createMockProps(); + + beforeEach(() => { + props.currPage = 6; + wrapper = shallow(); + instance = wrapper.instance(); + }); + + afterEach(() => { + props.onPageChange.reset(); + }); + + it('should calling props.onPageChange correctly when new page is eq props.prePageText', () => { + instance.handleChangePage(props.prePageText); + expect(props.onPageChange.callCount).toBe(1); + expect(props.onPageChange.calledWith(5)).toBeTruthy(); + }); + + it('should calling props.onPageChange correctly when new page is eq props.nextPageText', () => { + instance.handleChangePage(props.nextPageText); + expect(props.onPageChange.callCount).toBe(1); + expect(props.onPageChange.calledWith(7)).toBeTruthy(); + }); + + it('should calling props.onPageChange correctly when new page is eq props.lastPageText', () => { + instance.handleChangePage(props.lastPageText); + expect(props.onPageChange.callCount).toBe(1); + expect(props.onPageChange.calledWith(10)).toBeTruthy(); + }); + + it('should calling props.onPageChange correctly when new page is eq props.firstPageText', () => { + instance.handleChangePage(props.firstPageText); + expect(props.onPageChange.callCount).toBe(1); + expect(props.onPageChange.calledWith(props.pageStartIndex)).toBeTruthy(); + }); + + it('should calling props.onPageChange correctly when new page is a numeric page', () => { + const newPage = '8'; + instance.handleChangePage(newPage); + expect(props.onPageChange.callCount).toBe(1); + expect(props.onPageChange.calledWith(parseInt(newPage, 10))).toBeTruthy(); + }); + + it('should not calling props.onPageChange correctly when page is not changed', () => { + const newPage = props.currPage; + instance.handleChangePage(newPage); + expect(props.onPageChange.callCount).toBe(0); + }); + }); + + describe('handleChangeSizePerPage', () => { + const props = createMockProps(); + + beforeEach(() => { + wrapper = shallow(); + instance = wrapper.instance(); + }); + + it('should always setting state.dropdownOpen to false', () => { + instance.handleChangeSizePerPage(10); + expect(instance.state.dropdownOpen).toBeFalsy(); + }); + + describe('when new sizePerPage is same as current one', () => { + it('should not calling props.onSizePerPageChange callback', () => { + instance.handleChangeSizePerPage(10); + expect(props.onSizePerPageChange.callCount).toBe(0); + }); + }); + + describe('when new sizePerPage is diff than current one', () => { + it('should not calling props.onSizePerPageChange callback', () => { + instance.handleChangeSizePerPage(30); + expect(props.onSizePerPageChange.callCount).toBe(1); + }); + + describe('and new current page is still in the new lagination list', () => { + it('should calling props.onSizePerPageChange with correct argument', () => { + expect(props.onSizePerPageChange.calledWith(30, props.currPage)); + }); + }); + + describe('and new current page is still in the new lagination list', () => { + beforeEach(() => { + wrapper = shallow( + ); + instance = wrapper.instance(); + }); + + it('should calling props.onSizePerPageChange with correct argument', () => { + expect(props.onSizePerPageChange.calledWith(30, 4)); + }); + }); + }); + }); + + describe('componentWillReceiveProps', () => { + describe('when next props.currSizePerPage is diff than current one', () => { + const nextProps = createMockProps({ currSizePerPage: 20 }); + + beforeEach(() => { + wrapper = shallow(); + instance = wrapper.instance(); + }); + + it('should setting correct state.totalPages', () => { + instance.componentWillReceiveProps(nextProps); + expect(instance.state.totalPages).toEqual( + instance.calculateTotalPage(nextProps.currSizePerPage)); + }); + + it('should setting correct state.lastPage', () => { + instance.componentWillReceiveProps(nextProps); + const totalPages = instance.calculateTotalPage(nextProps.currSizePerPage); + expect(instance.state.lastPage).toEqual( + instance.calculateLastPage(totalPages)); + }); + }); + + describe('when next props.dataSize is diff than current one', () => { + const nextProps = createMockProps({ dataSize: 33 }); + + beforeEach(() => { + wrapper = shallow(); + instance = wrapper.instance(); + }); + + it('should setting correct state.totalPages', () => { + instance.componentWillReceiveProps(nextProps); + expect(instance.state.totalPages).toEqual( + instance.calculateTotalPage(nextProps.currSizePerPage, nextProps.dataSize)); + }); + + it('should setting correct state.lastPage', () => { + instance.componentWillReceiveProps(nextProps); + const totalPages = instance.calculateTotalPage( + nextProps.currSizePerPage, nextProps.dataSize); + expect(instance.state.lastPage).toEqual( + instance.calculateLastPage(totalPages)); + }); + }); + }); +}); diff --git a/packages/react-bootstrap-table2-paginator/test/pagination.test.js b/packages/react-bootstrap-table2-paginator/test/pagination.test.js index 6091e31..2c9ee20 100644 --- a/packages/react-bootstrap-table2-paginator/test/pagination.test.js +++ b/packages/react-bootstrap-table2-paginator/test/pagination.test.js @@ -5,6 +5,7 @@ import { shallow } 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; @@ -40,7 +41,7 @@ describe('Pagination', () => { it('should rendering correctly', () => { expect(wrapper.length).toBe(1); - expect(wrapper.hasClass('react-bootstrap-table-pagination')).toBeTruthy(); + expect(wrapper.dive().hasClass('react-bootstrap-table-pagination')).toBeTruthy(); expect(wrapper.find('.react-bootstrap-table-pagination-list-hidden').length).toBe(0); }); @@ -51,50 +52,6 @@ describe('Pagination', () => { instance.calculateLastPage(instance.state.totalPages)); expect(instance.state.dropdownOpen).toBeFalsy(); }); - - it('should rendering PaginationList component successfully', () => { - const paginationList = wrapper.find(PaginationList); - const pageList = instance.calculatePages(instance.state.totalPages, instance.state.lastPage); - expect(paginationList.length).toBe(1); - expect(paginationList.prop('pages')).toEqual(instance.calculatePageStatus(pageList, instance.state.lastPage)); - expect(paginationList.prop('onPageChange')).toEqual(instance.handleChangePage); - }); - - it('should rendering SizePerPageDropDown component successfully', () => { - const sizePerPageDropDown = wrapper.find(SizePerPageDropDown); - expect(sizePerPageDropDown.length).toBe(1); - - expect(sizePerPageDropDown.prop('currSizePerPage')).toEqual(`${props.currSizePerPage}`); - expect(sizePerPageDropDown.prop('options')).toEqual(instance.calculateSizePerPageStatus()); - expect(sizePerPageDropDown.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage); - expect(sizePerPageDropDown.prop('onClick')).toEqual(instance.toggleDropDown); - }); - }); - - describe('when props.sizePerPageList is empty array', () => { - beforeEach(() => { - const props = createMockProps({ sizePerPageList: [] }); - wrapper = shallow(); - instance = wrapper.instance(); - }); - - it('should not rendering SizePerPageDropDown component', () => { - const sizePerPageDropDown = wrapper.find(SizePerPageDropDown); - expect(sizePerPageDropDown.length).toBe(0); - }); - }); - - describe('when props.hideSizePerPage is true', () => { - beforeEach(() => { - const props = createMockProps({ hideSizePerPage: true }); - wrapper = shallow(); - instance = wrapper.instance(); - }); - - it('should not rendering SizePerPageDropDown component', () => { - const sizePerPageDropDown = wrapper.find(SizePerPageDropDown); - expect(sizePerPageDropDown.length).toBe(0); - }); }); describe('when props.hidePageListOnlyOnePage is true', () => { @@ -105,21 +62,22 @@ describe('Pagination', () => { }); it('should find react-bootstrap-table-pagination-list-hidden class when only one page', () => { - expect(wrapper.find('.react-bootstrap-table-pagination-list-hidden').length).toBe(1); + expect(wrapper.dive().find('.react-bootstrap-table-pagination-list-hidden').length).toBe(1); }); }); describe('when props.pageListRenderer is defined', () => { - const pageListRenderer = jest.fn().mockReturnValue(null); + let pageListRenderer; beforeEach(() => { - pageListRenderer.mockClear(); + pageListRenderer = jest.fn().mockReturnValue(null); const props = createMockProps({ pageListRenderer }); wrapper = shallow(); + wrapper.render(); instance = wrapper.instance(); }); it('should not render PaginationList', () => { - expect(wrapper.find(PaginationList)).toHaveLength(0); + expect(wrapper.dive().find(PaginationList)).toHaveLength(0); }); it('should call props.pageListRenderer correctly', () => { @@ -128,16 +86,17 @@ describe('Pagination', () => { }); describe('when props.sizePerPageRenderer is defined', () => { - const sizePerPageRenderer = jest.fn().mockReturnValue(null); + let sizePerPageRenderer; beforeEach(() => { - sizePerPageRenderer.mockClear(); + sizePerPageRenderer = jest.fn().mockReturnValue(null); const props = createMockProps({ sizePerPageRenderer }); wrapper = shallow(); + wrapper.render(); instance = wrapper.instance(); }); it('should not render SizePerPageDropDown', () => { - expect(wrapper.find(SizePerPageDropDown)).toHaveLength(0); + expect(wrapper.dive().find(SizePerPageDropDown)).toHaveLength(0); }); it('should call props.sizePerPageRenderer correctly', () => { @@ -145,180 +104,36 @@ describe('Pagination', () => { }); }); - describe('componentWillReceiveProps', () => { - describe('when next props.currSizePerPage is diff than current one', () => { - const nextProps = createMockProps({ currSizePerPage: 20 }); + describe('when props.showTotal is true', () => { + beforeEach(() => { + const props = createMockProps({ showTotal: true }); + wrapper = shallow(); + wrapper.render(); + instance = wrapper.instance(); + }); + + it('should render PaginationTotal correctly', () => { + expect(wrapper.dive().find(PaginationTotal)).toHaveLength(1); + }); + + describe('if props.paginationTotalRenderer is defined', () => { + let paginationTotalRenderer; beforeEach(() => { - wrapper = shallow(); + paginationTotalRenderer = jest.fn(); + const props = createMockProps({ showTotal: true, paginationTotalRenderer }); + wrapper = shallow(); + wrapper.render(); instance = wrapper.instance(); }); - it('should setting correct state.totalPages', () => { - instance.componentWillReceiveProps(nextProps); - expect(instance.state.totalPages).toEqual( - instance.calculateTotalPage(nextProps.currSizePerPage)); + it('should not render PaginationTotal', () => { + expect(wrapper.dive().find(PaginationTotal)).toHaveLength(0); }); - it('should setting correct state.lastPage', () => { - instance.componentWillReceiveProps(nextProps); - const totalPages = instance.calculateTotalPage(nextProps.currSizePerPage); - expect(instance.state.lastPage).toEqual( - instance.calculateLastPage(totalPages)); + it('should call props.paginationTotalRenderer correctly', () => { + expect(paginationTotalRenderer).toHaveBeenCalledTimes(1); }); }); - - describe('when next props.dataSize is diff than current one', () => { - const nextProps = createMockProps({ dataSize: 33 }); - - beforeEach(() => { - wrapper = shallow(); - instance = wrapper.instance(); - }); - - it('should setting correct state.totalPages', () => { - instance.componentWillReceiveProps(nextProps); - expect(instance.state.totalPages).toEqual( - instance.calculateTotalPage(nextProps.currSizePerPage, nextProps.dataSize)); - }); - - it('should setting correct state.lastPage', () => { - instance.componentWillReceiveProps(nextProps); - const totalPages = instance.calculateTotalPage( - nextProps.currSizePerPage, nextProps.dataSize); - expect(instance.state.lastPage).toEqual( - instance.calculateLastPage(totalPages)); - }); - }); - }); - - describe('toggleDropDown', () => { - beforeEach(() => { - const props = createMockProps(); - wrapper = shallow(); - instance = wrapper.instance(); - }); - - it('should setting state.dropdownOpen as true when it is false', () => { - instance.toggleDropDown(); - expect(instance.state.dropdownOpen).toBeTruthy(); - }); - - it('should setting state.dropdownOpen as false when it is true', () => { - instance.toggleDropDown(); - instance.toggleDropDown(); - expect(instance.state.dropdownOpen).toBeFalsy(); - }); - }); - - describe('closeDropDown', () => { - beforeEach(() => { - const props = createMockProps(); - wrapper = shallow(); - instance = wrapper.instance(); - }); - - it('should always setting state.dropdownOpen as false', () => { - instance.closeDropDown(); - expect(instance.state.dropdownOpen).toBeFalsy(); - instance.closeDropDown(); - expect(instance.state.dropdownOpen).toBeFalsy(); - }); - }); - - describe('handleChangeSizePerPage', () => { - const props = createMockProps(); - - beforeEach(() => { - wrapper = shallow(); - instance = wrapper.instance(); - }); - - it('should always setting state.dropdownOpen to false', () => { - instance.handleChangeSizePerPage(10); - expect(instance.state.dropdownOpen).toBeFalsy(); - }); - - describe('when new sizePerPage is same as current one', () => { - it('should not calling props.onSizePerPageChange callback', () => { - instance.handleChangeSizePerPage(10); - expect(props.onSizePerPageChange.callCount).toBe(0); - }); - }); - - describe('when new sizePerPage is diff than current one', () => { - it('should not calling props.onSizePerPageChange callback', () => { - instance.handleChangeSizePerPage(30); - expect(props.onSizePerPageChange.callCount).toBe(1); - }); - - describe('and new current page is still in the new lagination list', () => { - it('should calling props.onSizePerPageChange with correct argument', () => { - expect(props.onSizePerPageChange.calledWith(30, props.currPage)); - }); - }); - - describe('and new current page is still in the new lagination list', () => { - beforeEach(() => { - wrapper = shallow(); - instance = wrapper.instance(); - }); - - it('should calling props.onSizePerPageChange with correct argument', () => { - expect(props.onSizePerPageChange.calledWith(30, 4)); - }); - }); - }); - }); - - describe('handleChangePage', () => { - const props = createMockProps(); - - beforeEach(() => { - props.currPage = 6; - wrapper = shallow(); - instance = wrapper.instance(); - }); - - afterEach(() => { - props.onPageChange.reset(); - }); - - it('should calling props.onPageChange correctly when new page is eq props.prePageText', () => { - instance.handleChangePage(props.prePageText); - expect(props.onPageChange.callCount).toBe(1); - expect(props.onPageChange.calledWith(5)).toBeTruthy(); - }); - - it('should calling props.onPageChange correctly when new page is eq props.nextPageText', () => { - instance.handleChangePage(props.nextPageText); - expect(props.onPageChange.callCount).toBe(1); - expect(props.onPageChange.calledWith(7)).toBeTruthy(); - }); - - it('should calling props.onPageChange correctly when new page is eq props.lastPageText', () => { - instance.handleChangePage(props.lastPageText); - expect(props.onPageChange.callCount).toBe(1); - expect(props.onPageChange.calledWith(10)).toBeTruthy(); - }); - - it('should calling props.onPageChange correctly when new page is eq props.firstPageText', () => { - instance.handleChangePage(props.firstPageText); - expect(props.onPageChange.callCount).toBe(1); - expect(props.onPageChange.calledWith(props.pageStartIndex)).toBeTruthy(); - }); - - it('should calling props.onPageChange correctly when new page is a numeric page', () => { - const newPage = '8'; - instance.handleChangePage(newPage); - expect(props.onPageChange.callCount).toBe(1); - expect(props.onPageChange.calledWith(parseInt(newPage, 10))).toBeTruthy(); - }); - - it('should not calling props.onPageChange correctly when page is not changed', () => { - const newPage = props.currPage; - instance.handleChangePage(newPage); - expect(props.onPageChange.callCount).toBe(0); - }); }); }); From 91816fcc0129d1a7f6a74d9ebfe9ccd73f2f967b Mon Sep 17 00:00:00 2001 From: AllenFang Date: Fri, 21 Dec 2018 17:48:20 +0800 Subject: [PATCH 11/13] add stories for custom pagination --- .../examples/pagination/custom-page-button.js | 106 +++++++++++ .../examples/pagination/custom-page-list.js | 78 ++++++++ .../pagination/custom-size-per-page-option.js | 96 ++++++++++ .../pagination/custom-size-per-page.js | 89 ++++++++++ .../pagination/fully-custom-pagination.js | 166 ++++++++++++++++++ .../pagination/standalone-pagination-list.js | 102 +++++++++++ .../pagination/standalone-size-per-page.js | 102 +++++++++++ .../stories/index.js | 16 +- 8 files changed, 754 insertions(+), 1 deletion(-) create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/custom-page-button.js create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/custom-page-list.js create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/custom-size-per-page-option.js create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/custom-size-per-page.js create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/fully-custom-pagination.js create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-list.js create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-page-button.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-page-button.js new file mode 100644 index 0000000..4898f60 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-page-button.js @@ -0,0 +1,106 @@ +/* eslint react/prefer-stateless-function: 0 */ +/* eslint react/prop-types: 0 */ +/* eslint jsx-a11y/href-no-hash: 0 */ +/* eslint no-unused-vars: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory from 'react-bootstrap-table2-paginator'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const products = productsGenerator(87); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory from 'react-bootstrap-table2-paginator'; +// ... + +const pageButtonRenderer = ({ + page, + active, + disable, + title, + onPageChange +}) => { + const handleClick = (e) => { + e.preventDefault(); + onPageChange(page); + }; + const activeStyle = {}; + if (active) { + activeStyle.backgroundColor = 'black'; + activeStyle.color = 'white'; + } else { + activeStyle.backgroundColor = 'gray'; + activeStyle.color = 'black'; + } + if (typeof page === 'string') { + activeStyle.backgroundColor = 'white'; + activeStyle.color = 'black'; + } + return ( +
  • + { page } +
    • + ); +}; + +const options = { + pageButtonRenderer +}; + + +`; + +const pageButtonRenderer = ({ + page, + active, + disable, + title, + onPageChange +}) => { + const handleClick = (e) => { + e.preventDefault(); + onPageChange(page); + }; + const activeStyle = {}; + if (active) { + activeStyle.backgroundColor = 'black'; + activeStyle.color = 'white'; + } else { + activeStyle.backgroundColor = 'gray'; + activeStyle.color = 'black'; + } + if (typeof page === 'string') { + activeStyle.backgroundColor = 'white'; + activeStyle.color = 'black'; + } + return ( +
  • + { page } +
    • + ); +}; + +const options = { + pageButtonRenderer +}; + +export default () => ( +
    + + { sourceCode } +
    +); diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-page-list.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-page-list.js new file mode 100644 index 0000000..2198aa5 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-page-list.js @@ -0,0 +1,78 @@ +/* eslint react/prefer-stateless-function: 0 */ +/* eslint react/prop-types: 0 */ +/* eslint jsx-a11y/href-no-hash: 0 */ +/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory from 'react-bootstrap-table2-paginator'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const products = productsGenerator(87); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory from 'react-bootstrap-table2-paginator'; +// ... + +const pageListRenderer = ({ + pages, + onPageChange +}) => { + const pageWithoutIndication = pages.filter(p => typeof p.page !== 'string'); + return ( +
    + { + pageWithoutIndication.map(p => ( + + )) + } +
    + ); +}; + +const options = { + pageListRenderer +}; + + +`; + +const pageListRenderer = ({ + pages, + onPageChange +}) => { + const pageWithoutIndication = pages.filter(p => typeof p.page !== 'string'); + return ( +
    + { + pageWithoutIndication.map(p => ( + + )) + } +
    + ); +}; + +const options = { + pageListRenderer +}; + +export default () => ( +
    + + { sourceCode } +
    +); diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-size-per-page-option.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-size-per-page-option.js new file mode 100644 index 0000000..362bee6 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-size-per-page-option.js @@ -0,0 +1,96 @@ +/* eslint react/prop-types: 0 */ +/* eslint jsx-a11y/href-no-hash: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory from 'react-bootstrap-table2-paginator'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const products = productsGenerator(87); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory from 'react-bootstrap-table2-paginator'; +// ... + +const sizePerPageOptionRenderer = ({ + text, + page, + onSizePerPageChange +}) => ( +
  • + { + e.preventDefault(); + onSizePerPageChange(page); + } } + style={ { color: 'red' } } + > + { text } + +
    • +); + +const options = { + sizePerPageOptionRenderer +}; + + +`; + +const sizePerPageOptionRenderer = ({ + text, + page, + onSizePerPageChange +}) => ( +
  • + { + e.preventDefault(); + onSizePerPageChange(page); + } } + style={ { color: 'red' } } + > + { text } + +
    • +); + +const options = { + sizePerPageOptionRenderer +}; + +export default () => ( +
    + + { sourceCode } +
    +); diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-size-per-page.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-size-per-page.js new file mode 100644 index 0000000..a8bbf42 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-size-per-page.js @@ -0,0 +1,89 @@ +/* eslint react/prop-types: 0 */ +/* eslint jsx-a11y/href-no-hash: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory from 'react-bootstrap-table2-paginator'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const products = productsGenerator(87); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory from 'react-bootstrap-table2-paginator'; +// ... + +const sizePerPageRenderer = ({ + options, + currSizePerPage, + onSizePerPageChange +}) => ( +
    + { + options.map((option) => { + const isSelect = currSizePerPage === \`$\{option.page}\`; + return ( + + ); + }) + } +
    +); + +const options = { + sizePerPageRenderer +}; + +s +`; + +const sizePerPageRenderer = ({ + options, + currSizePerPage, + onSizePerPageChange +}) => ( +
    + { + options.map(option => ( + + )) + } +
    +); + +const options = { + sizePerPageRenderer +}; + +export default () => ( +
    + + { sourceCode } +
    +); diff --git a/packages/react-bootstrap-table2-example/examples/pagination/fully-custom-pagination.js b/packages/react-bootstrap-table2-example/examples/pagination/fully-custom-pagination.js new file mode 100644 index 0000000..a2aa739 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/pagination/fully-custom-pagination.js @@ -0,0 +1,166 @@ +/* eslint react/prefer-stateless-function: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const products = productsGenerator(87); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory from 'react-bootstrap-table2-paginator'; + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const options = { + custom: true, + totalSize: products.length +}; + +class FullyCustomPagination extends React.Component { + handleNextPage = ({ + page, + onPageChange + }) => () => { + onPageChange(page + 1); + } + + handlePrevPage = ({ + page, + onPageChange + }) => () => { + onPageChange(page - 1); + } + + handleSizePerPage = ({ + page, + onSizePerPageChange + }, newSizePerPage) => { + onSizePerPageChange(newSizePerPage, page); + } + + render() { + return ( +
    + + { + ({ + paginationProps, + paginationBaseProps + }) => ( +
    +
    +

    Current Page: { paginationProps.page }

    +

    Current SizePerPage: { paginationProps.sizePerPage }

    +
    +
    + + + + +
    + +
    + ) + } +     + { sourceCode } +
    + ); + } +} +`; + +const options = { + custom: true, + totalSize: products.length +}; + +export default class FullyCustomPagination extends React.Component { + handleNextPage = ({ + page, + onPageChange + }) => () => { + onPageChange(page + 1); + } + + handlePrevPage = ({ + page, + onPageChange + }) => () => { + onPageChange(page - 1); + } + + handleSizePerPage = ({ + page, + onSizePerPageChange + }, newSizePerPage) => { + onSizePerPageChange(newSizePerPage, page); + } + + render() { + return ( +
    + + { + ({ + paginationProps, + paginationBaseProps + }) => ( +
    +
    +

    Current Page: { paginationProps.page }

    +

    Current SizePerPage: { paginationProps.sizePerPage }

    +
    +
    + + + + +
    + +
    + ) + } +     + { sourceCode } +
    + ); + } +} diff --git a/packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-list.js b/packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-list.js new file mode 100644 index 0000000..bec241e --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-list.js @@ -0,0 +1,102 @@ +/* eslint react/prefer-stateless-function: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const products = productsGenerator(87); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator'; + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const options = { + custom: true, + totalSize: products.length +}; + + + { + ({ + paginationProps, + paginationBaseProps + }) => ( +
    + + +
    + ) + } +     +`; + +const options = { + custom: true, + totalSize: products.length +}; +// const pagination = paginationFactory(options); + +export default class StandalonePaginationList extends React.Component { + render() { + return ( +
    + + { + ({ + paginationProps, + paginationBaseProps + }) => ( +
    + + +
    + ) + } +     + { sourceCode } +
    + ); + } +} diff --git a/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js b/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js new file mode 100644 index 0000000..66ecb6f --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js @@ -0,0 +1,102 @@ +/* eslint react/prefer-stateless-function: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory, { PaginationProvider, SizePerPageDropdownStandalone } from 'react-bootstrap-table2-paginator'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const products = productsGenerator(87); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory, { PaginationProvider, SizePerPageDropdownStandalone } from 'react-bootstrap-table2-paginator'; + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const options = { + custom: true, + totalSize: products.length +}; + + + { + ({ + paginationProps, + paginationBaseProps + }) => ( +
    + + +
    + ) + } +     +`; + +const options = { + custom: true, + totalSize: products.length +}; +// const pagination = paginationFactory(options); + +export default class StandaloneSizePerPage extends React.Component { + render() { + return ( +
    + + { + ({ + paginationProps, + paginationBaseProps + }) => ( +
    + + +
    + ) + } +     + { sourceCode } +
    + ); + } +} diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index fe2eecd..ef20d12 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -147,6 +147,13 @@ import ExpandHooks from 'examples/row-expand/expand-hooks'; import PaginationTable from 'examples/pagination'; import PaginationHooksTable from 'examples/pagination/pagination-hooks'; import CustomPaginationTable from 'examples/pagination/custom-pagination'; +import CustomPageButtonTable from 'examples/pagination/custom-page-button'; +import CustomSizePerPageOptionTable from 'examples/pagination/custom-size-per-page-option'; +import CustomSizePerPageTable from 'examples/pagination/custom-size-per-page'; +import CustomPageListTable from 'examples/pagination/custom-page-list'; +import StandalonePaginationList from 'examples/pagination/standalone-pagination-list'; +import StandaloneSizePerPage from 'examples/pagination/standalone-size-per-page'; +import FullyCustomPaginationTable from 'examples/pagination/fully-custom-pagination'; // search import SearchTable from 'examples/search'; @@ -345,7 +352,14 @@ storiesOf('Pagination', module) .addDecorator(bootstrapStyle()) .add('Basic Pagination Table', () => ) .add('Pagination Hooks', () => ) - .add('Custom Pagination', () => ); + .add('Custom Pagination', () => ) + .add('Custom Page Button', () => ) + .add('Custom Page List', () => ) + .add('Custom SizePerPage Option', () => ) + .add('Custom SizePerPage', () => ) + .add('Standalone Pagination List', () => ) + .add('Standalone SizePerPage Dropdown', () => ) + .add('Fully Custom Pagination', () => ); storiesOf('Table Search', module) .addDecorator(bootstrapStyle()) From 41da9afbcb8ce6a6ca4cbac23569c6a5119c4c9a Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 22 Dec 2018 15:55:02 +0800 Subject: [PATCH 12/13] paginationBaseProps -> paginationTableProps --- .../pagination/fully-custom-pagination.js | 8 ++-- .../pagination/standalone-pagination-list.js | 8 ++-- .../pagination/standalone-size-per-page.js | 8 ++-- .../src/state-context.js | 2 +- .../test/state-context.test.js | 40 +++++++++---------- 5 files changed, 33 insertions(+), 33 deletions(-) diff --git a/packages/react-bootstrap-table2-example/examples/pagination/fully-custom-pagination.js b/packages/react-bootstrap-table2-example/examples/pagination/fully-custom-pagination.js index a2aa739..cde3a43 100644 --- a/packages/react-bootstrap-table2-example/examples/pagination/fully-custom-pagination.js +++ b/packages/react-bootstrap-table2-example/examples/pagination/fully-custom-pagination.js @@ -70,7 +70,7 @@ class FullyCustomPagination extends React.Component { { ({ paginationProps, - paginationBaseProps + paginationTableProps }) => (
    @@ -87,7 +87,7 @@ class FullyCustomPagination extends React.Component { keyField="id" data={ products } columns={ columns } - { ...paginationBaseProps } + { ...paginationTableProps } />
    ) @@ -136,7 +136,7 @@ export default class FullyCustomPagination extends React.Component { { ({ paginationProps, - paginationBaseProps + paginationTableProps }) => (
    @@ -153,7 +153,7 @@ export default class FullyCustomPagination extends React.Component { keyField="id" data={ products } columns={ columns } - { ...paginationBaseProps } + { ...paginationTableProps } />
    ) diff --git a/packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-list.js b/packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-list.js index bec241e..e233019 100644 --- a/packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-list.js +++ b/packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-list.js @@ -45,7 +45,7 @@ const options = { { ({ paginationProps, - paginationBaseProps + paginationTableProps }) => (
    ) @@ -79,7 +79,7 @@ export default class StandalonePaginationList extends React.Component { { ({ paginationProps, - paginationBaseProps + paginationTableProps }) => (
    ) diff --git a/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js b/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js index 66ecb6f..e49b4f1 100644 --- a/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js +++ b/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js @@ -45,7 +45,7 @@ const options = { { ({ paginationProps, - paginationBaseProps + paginationTableProps }) => (
    ) @@ -79,7 +79,7 @@ export default class StandaloneSizePerPage extends React.Component { { ({ paginationProps, - paginationBaseProps + paginationTableProps }) => (
    ) diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js index 6f34905..758dd95 100644 --- a/packages/react-bootstrap-table2-paginator/src/state-context.js +++ b/packages/react-bootstrap-table2-paginator/src/state-context.js @@ -151,7 +151,7 @@ class StateProvider extends React.Component { { expect(renderMockComponent).toHaveBeenCalledTimes(1); expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -338,7 +338,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -369,7 +369,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -396,7 +396,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -423,7 +423,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -450,7 +450,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -477,7 +477,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -504,7 +504,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -531,7 +531,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -558,7 +558,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -585,7 +585,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -612,7 +612,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -639,7 +639,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -666,7 +666,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -693,7 +693,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -720,7 +720,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -747,7 +747,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -774,7 +774,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -801,7 +801,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() @@ -828,7 +828,7 @@ describe('PaginationStateContext', () => { expect(renderMockComponent).toHaveBeenCalledWith({ paginationProps: instance.getPaginationProps(), - paginationBaseProps: { + paginationTableProps: { pagination: { createContext: expect.any(Function), options: instance.getPaginationProps() From 83dc888d172a484ea5ff98a50a683d68c6f284c1 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 22 Dec 2018 15:56:14 +0800 Subject: [PATCH 13/13] patch docs for new pagination --- README.md | 4 - docs/migration.md | 2 - .../README.md | 186 +++++++++++++++++- 3 files changed, 185 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 221c074..ca05350 100644 --- a/README.md +++ b/README.md @@ -28,10 +28,6 @@ See [getting started](https://react-bootstrap-table.github.io/react-bootstrap-ta See `react-bootstrap-table2` [storybook](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html). -## Roadmap - -See [release plans](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html). - ## Development Please check the [development guide](./docs/development.md). diff --git a/docs/migration.md b/docs/migration.md index ffe7861..7f5b10d 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -113,8 +113,6 @@ Please see [available pagination configurations](https://react-bootstrap-table.g Remember to install [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator) firstly. -No big changes for pagination, but still can't custom the pagination list, button and sizePerPage dropdown. - ## Table Search Ｔhe usage of search functionality is a little bit different from legacy search. The mainly different thing is developer have to render the search input field, we do believe it will be very flexible for all the developers who want to custom the search position or search field itself. diff --git a/packages/react-bootstrap-table2-paginator/README.md b/packages/react-bootstrap-table2-paginator/README.md index ff0c917..b3d30eb 100644 --- a/packages/react-bootstrap-table2-paginator/README.md +++ b/packages/react-bootstrap-table2-paginator/README.md @@ -37,4 +37,188 @@ import paginationFactory from 'react-bootstrap-table2-paginator'; ## Customization -See [pagination props](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html) \ No newline at end of file +### Basic Customization + +`react-bootstrap-table2` give some simple ways to customize something like text, styling etc, following is all the props we support for basic customization: + +* [paginationSize](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpaginationsize-number) +* [sizePerPageList](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationsizeperpagelist-array) +* [withFirstAndLast](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationwithfirstandlast-bool) +* [alwaysShowAllBtns](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationalwaysshowallbtns-bool) +* [firstPageText](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationfirstpagetext-any) +* [prePageText](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationprepagetext-any) +* [nextPageText](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationnextpagetext-any) +* [lastPageText](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationlastpagetext-any) +* [firstPageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationfirstpagetitle-any) +* [prePageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationprepagetitle-any) +* [nextPageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationnextpagetitle-any) +* [lastPageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationlastpagetitle-any) +* [hideSizePerPage](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationhidesizeperpage-bool) +* [hidePageListOnlyOnePage](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationhidepagelistonlyonepage-bool) +* [showTotal](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationshowtotal-bool) + +You can check [this online demo](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Pagination&selectedStory=Custom%20Pagination&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) for above props usage. + +### Advance Customization + +Sometime, you may feel above props is not satisfied with your requirement, don't worry, we provide following renderer for each part of pagination: + +* [pageListRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpagelistrenderer-function) +* [pageButtonRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpagebuttonrenderer-function) +* [sizePerPageRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationsizeperpagerenderer-function) +* [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 + +If you want to customize the pagination component completely, you may get interesting on following solution: + +* 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: + +#### Import PaginationProvider + +```js +import paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator'; + +``` + +#### Declare custom and totalSize in pagination option: + +```js +const paginationOption = { + custom: true, + totalSize: products.length +}; +``` + +#### Render PaginationProvider + +```js + + { + ({ + paginationProps, + paginationTableProps + }) => ( + ..... + ) + } + +``` + +`PaginationProvider` actually is a wrapper for the concumser of react context, so that now you have to get the props from context provide then render to your compoennt and `BootstrapTable`: + +* `paginationProps`: this include everything about pagination, you will use it when you render standalone component or your custom component. +* `paginationTableProps`: you don't need to know about this, but you have to render this as props to `BootstrapTable`. + +So far, your customization pagination is supposed to look like it: +```js + + { + ({ + paginationProps, + paginationTableProps + }) => ( +
    + +
    + ) + } +     +``` + +Now, you have to choose, your built-in standalne components or you customize all of them by yourself: + +#### Use Standalone Component +`react-bootstrap-table2-paginator` provider two standalone components: + +* Size Per Page Dropdwn Standalone +* Pagination List 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'; + + + { + ({ + paginationProps, + paginationTableProps + }) => ( +
    + + + +
    + ) + } +     +``` + +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 + +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: + +```js +page, +sizePerPage, +pageStartIndex, +hidePageListOnlyOnePage, +hideSizePerPage, +alwaysShowAllBtns, +withFirstAndLast, +dataSize, +sizePerPageList, +paginationSize, +showTotal, +pageListRenderer, +pageButtonRenderer, +sizePerPageRenderer, +paginationTotalRenderer, +sizePerPageOptionRenderer, +firstPageText, +prePageText, +nextPageText, +lastPageText, +prePageTitle, +nextPageTitle, +firstPageTitle, +lastPageTitle, +onPageChange, +onSizePerPageChange +``` + +In most of case, `page`, `sizePerPage`, `onPageChange` and `onSizePerPageChange` are most important things for developer. + +* `page`: Current page. +* `sizePerPage`: Current size per page. +* `onPageChange`: Call it when you nede to change page. This function accept one number argument which indicate the new page +* `onSizePerPageChange`: Call it when you nede to change size per page. This function accept two number argument which indicate the new sizePerPage and new page + +[Here](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Pagination&selectedStory=Fully%20Custom%20Pagination&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) is a online example.