diff --git a/packages/react-bootstrap-table2-example/examples/pagination/remote-pagination.js b/packages/react-bootstrap-table2-example/examples/pagination/remote-pagination.js new file mode 100644 index 0000000..ccae5c7 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/pagination/remote-pagination.js @@ -0,0 +1,133 @@ +/* eslint react/no-multi-comp: 0 */ +import React from 'react'; +import PropTypes from 'prop-types'; +import BootstrapTable from 'react-bootstrap-table2'; +import paginator 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-table2'; +import paginator from 'react-bootstrap-table2-paginator'; +// ... +const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => ( +
+ + { sourceCode } +
+); + +class Container extends React.Component { + constructor(props) { + super(props); + this.state = { + page: 1, + data: products.slice(0, 10), + sizePerPage: 10 + }; + } + + handleTableChange = ({ page, sizePerPage }) => { + const currentIndex = (page - 1) * sizePerPage; + setTimeout(() => { + this.setState(() => ({ + page, + data: products.slice(currentIndex, currentIndex + sizePerPage), + sizePerPage + })); + }, 2000); + } + + render() { + const { data, sizePerPage, page } = this.state; + return ( + + ); + } +} +`; + +const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => ( +
+ + { sourceCode } +
+); + +RemotePagination.propTypes = { + data: PropTypes.array.isRequired, + page: PropTypes.number.isRequired, + totalSize: PropTypes.number.isRequired, + sizePerPage: PropTypes.number.isRequired, + onTableChange: PropTypes.func.isRequired +}; + +class Container extends React.Component { + constructor(props) { + super(props); + this.state = { + page: 1, + data: products.slice(0, 10), + sizePerPage: 10 + }; + } + + handleTableChange = ({ page, sizePerPage }) => { + const currentIndex = (page - 1) * sizePerPage; + setTimeout(() => { + this.setState(() => ({ + page, + data: products.slice(currentIndex, currentIndex + sizePerPage), + sizePerPage + })); + }, 2000); + } + + render() { + const { data, sizePerPage, page } = this.state; + return ( + + ); + } +} + +export default Container; diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 78a1c0e..71746da 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -72,6 +72,7 @@ import HideSelectionColumnTable from 'examples/row-selection/hide-selection-colu import PaginationTable from 'examples/pagination'; import PaginationHooksTable from 'examples/pagination/pagination-hooks'; import CustomPaginationTable from 'examples/pagination/custom-pagination'; +import RemotePaginationTable from 'examples/pagination/remote-pagination'; // css style import 'bootstrap/dist/css/bootstrap.min.css'; @@ -153,4 +154,5 @@ storiesOf('Row Selection', module) storiesOf('Pagination', module) .add('Basic Pagination Table', () => ) .add('Pagination Hooks', () => ) - .add('Custom Pagination', () => ); + .add('Custom Pagination', () => ) + .add('Remote Pagination', () => ); diff --git a/packages/react-bootstrap-table2-paginator/src/wrapper.js b/packages/react-bootstrap-table2-paginator/src/wrapper.js index fcc6cb7..0adc3c9 100644 --- a/packages/react-bootstrap-table2-paginator/src/wrapper.js +++ b/packages/react-bootstrap-table2-paginator/src/wrapper.js @@ -17,17 +17,46 @@ const wrapperFactory = baseElement => this.handleChangePage = this.handleChangePage.bind(this); this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this); + let currPage; + let currSizePerPage; const options = props.pagination.options || {}; - const currPage = options.pageStartIndex || Const.PAGE_START_INDEX; const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST; - const currSizePerPage = typeof sizePerPageList[0] === 'object' ? sizePerPageList[0].value : sizePerPageList[0]; + + // initialize current page + if (typeof options.page !== 'undefined') { + currPage = options.page; + } else if (typeof options.pageStartIndex !== 'undefined') { + currPage = options.pageStartIndex; + } else { + currPage = Const.PAGE_START_INDEX; + } + + // initialize current sizePerPage + if (typeof options.sizePerPage !== 'undefined') { + currSizePerPage = options.sizePerPage; + } else if (typeof sizePerPageList[0] === 'object') { + currSizePerPage = sizePerPageList[0].value; + } else { + currSizePerPage = sizePerPageList[0]; + } + this.state = { currPage, currSizePerPage }; } + isRemote() { + const { remote } = this.props; + return remote === true || (typeof remote === 'object' && remote.pagination); + } + handleChangePage(currPage) { - const { pagination: { options } } = this.props; + const { currSizePerPage } = this.state; + const { pagination: { options }, onRemotePageChange } = this.props; if (options.onPageChange) { - options.onPageChange(currPage, this.state.currSizePerPage); + options.onPageChange(currPage, currSizePerPage); + } + if (this.isRemote()) { + onRemotePageChange(currPage, currSizePerPage); + return; } this.setState(() => { return { @@ -37,10 +66,14 @@ const wrapperFactory = baseElement => } handleChangeSizePerPage(currSizePerPage, currPage) { - const { pagination: { options } } = this.props; + const { pagination: { options }, onRemotePageChange } = this.props; if (options.onSizePerPageChange) { options.onSizePerPageChange(currSizePerPage, currPage); } + if (this.isRemote()) { + onRemotePageChange(currPage, currSizePerPage); + return; + } this.setState(() => { return { currPage, @@ -60,25 +93,31 @@ const wrapperFactory = baseElement => Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage; const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ? Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage; + const pageStartIndex = typeof options.pageStartIndex === 'undefined' ? + Const.PAGE_START_INDEX : options.pageStartIndex; + + const data = this.isRemote() ? + this.props.data : + store.getByCurrPage(currPage, currSizePerPage, pageStartIndex); const base = baseElement({ ...this.props, key: 'table', - data: store.getByCurrPage(currPage, currSizePerPage) + data }); return [ base, { const pureTable = props => (); + const createPaginationWrapper = (props, renderFragment = true) => { + PaginationWrapper = wrapperFactory(pureTable); + wrapper = shallow(); + instance = wrapper.instance(); + if (renderFragment) { + const fragment = instance.render(); + wrapper = shallow(
{ fragment }
); + } + }; + describe('default pagination', () => { const props = createTableProps(); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); - const fragment = instance.render(); - wrapper = shallow(
{ fragment }
); + createPaginationWrapper(props); }); it('should rendering correctly', () => { @@ -92,15 +98,64 @@ describe('Wrapper', () => { }); }); + describe('when options.page is defined', () => { + const page = 3; + const props = createTableProps({ options: { page } }); + beforeEach(() => { + createPaginationWrapper(props); + }); + + it('should setting correct state.currPage', () => { + expect(instance.state.currPage).toEqual(page); + }); + + it('should rendering Pagination correctly', () => { + const pagination = wrapper.find(Pagination); + expect(wrapper.length).toBe(1); + expect(pagination.length).toBe(1); + expect(pagination.prop('currPage')).toEqual(page); + }); + }); + + describe('when options.sizePerPage is defined', () => { + const sizePerPage = 30; + const props = createTableProps({ options: { sizePerPage } }); + beforeEach(() => { + createPaginationWrapper(props); + }); + + it('should setting correct state.currPage', () => { + expect(instance.state.currSizePerPage).toEqual(sizePerPage); + }); + + it('should rendering Pagination correctly', () => { + const pagination = wrapper.find(Pagination); + expect(wrapper.length).toBe(1); + expect(pagination.length).toBe(1); + expect(pagination.prop('currSizePerPage')).toEqual(sizePerPage); + }); + }); + + describe('when options.totalSize is defined', () => { + const totalSize = 100; + const props = createTableProps({ options: { totalSize } }); + beforeEach(() => { + createPaginationWrapper(props); + }); + + it('should rendering Pagination correctly', () => { + const pagination = wrapper.find(Pagination); + expect(wrapper.length).toBe(1); + expect(pagination.length).toBe(1); + expect(pagination.prop('dataSize')).toEqual(totalSize); + }); + }); + describe('when options.pageStartIndex is defined', () => { const pageStartIndex = -1; const props = createTableProps({ options: { pageStartIndex } }); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); - const fragment = instance.render(); - wrapper = shallow(
{ fragment }
); + createPaginationWrapper(props); }); it('should setting correct state.currPage', () => { @@ -119,11 +174,7 @@ describe('Wrapper', () => { const sizePerPageList = [10, 40]; const props = createTableProps({ options: { sizePerPageList } }); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); - const fragment = instance.render(); - wrapper = shallow(
{ fragment }
); + createPaginationWrapper(props); }); it('should rendering Pagination correctly', () => { @@ -138,11 +189,7 @@ describe('Wrapper', () => { const paginationSize = 10; const props = createTableProps({ options: { paginationSize } }); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); - const fragment = instance.render(); - wrapper = shallow(
{ fragment }
); + createPaginationWrapper(props); }); it('should rendering Pagination correctly', () => { @@ -157,11 +204,7 @@ describe('Wrapper', () => { const withFirstAndLast = false; const props = createTableProps({ options: { withFirstAndLast } }); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); - const fragment = instance.render(); - wrapper = shallow(
{ fragment }
); + createPaginationWrapper(props); }); it('should rendering Pagination correctly', () => { @@ -176,11 +219,7 @@ describe('Wrapper', () => { const alwaysShowAllBtns = true; const props = createTableProps({ options: { alwaysShowAllBtns } }); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); - const fragment = instance.render(); - wrapper = shallow(
{ fragment }
); + createPaginationWrapper(props); }); it('should rendering Pagination correctly', () => { @@ -195,11 +234,7 @@ describe('Wrapper', () => { const firstPageText = '1st'; const props = createTableProps({ options: { firstPageText } }); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); - const fragment = instance.render(); - wrapper = shallow(
{ fragment }
); + createPaginationWrapper(props); }); it('should rendering Pagination correctly', () => { @@ -214,11 +249,7 @@ describe('Wrapper', () => { const prePageText = 'PRE'; const props = createTableProps({ options: { prePageText } }); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); - const fragment = instance.render(); - wrapper = shallow(
{ fragment }
); + createPaginationWrapper(props); }); it('should rendering Pagination correctly', () => { @@ -233,11 +264,7 @@ describe('Wrapper', () => { const nextPageText = 'NEXT'; const props = createTableProps({ options: { nextPageText } }); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); - const fragment = instance.render(); - wrapper = shallow(
{ fragment }
); + createPaginationWrapper(props); }); it('should rendering Pagination correctly', () => { @@ -252,11 +279,7 @@ describe('Wrapper', () => { const lastPageText = 'nth'; const props = createTableProps({ options: { lastPageText } }); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); - const fragment = instance.render(); - wrapper = shallow(
{ fragment }
); + createPaginationWrapper(props); }); it('should rendering Pagination correctly', () => { @@ -271,11 +294,7 @@ describe('Wrapper', () => { const firstPageTitle = '1st'; const props = createTableProps({ options: { firstPageTitle } }); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); - const fragment = instance.render(); - wrapper = shallow(
{ fragment }
); + createPaginationWrapper(props); }); it('should rendering Pagination correctly', () => { @@ -290,11 +309,7 @@ describe('Wrapper', () => { const prePageTitle = 'PRE'; const props = createTableProps({ options: { prePageTitle } }); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); - const fragment = instance.render(); - wrapper = shallow(
{ fragment }
); + createPaginationWrapper(props); }); it('should rendering Pagination correctly', () => { @@ -309,11 +324,7 @@ describe('Wrapper', () => { const nextPageTitle = 'NEXT'; const props = createTableProps({ options: { nextPageTitle } }); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); - const fragment = instance.render(); - wrapper = shallow(
{ fragment }
); + createPaginationWrapper(props); }); it('should rendering Pagination correctly', () => { @@ -328,11 +339,7 @@ describe('Wrapper', () => { const lastPageTitle = 'nth'; const props = createTableProps({ options: { lastPageTitle } }); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); - const fragment = instance.render(); - wrapper = shallow(
{ fragment }
); + createPaginationWrapper(props); }); it('should rendering Pagination correctly', () => { @@ -347,11 +354,7 @@ describe('Wrapper', () => { const hideSizePerPage = true; const props = createTableProps({ options: { hideSizePerPage } }); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); - const fragment = instance.render(); - wrapper = shallow(
{ fragment }
); + createPaginationWrapper(props); }); it('should rendering Pagination correctly', () => { @@ -366,11 +369,7 @@ describe('Wrapper', () => { const hidePageListOnlyOnePage = true; const props = createTableProps({ options: { hidePageListOnlyOnePage } }); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); - const fragment = instance.render(); - wrapper = shallow(
{ fragment }
); + createPaginationWrapper(props); }); it('should rendering Pagination correctly', () => { @@ -385,9 +384,7 @@ describe('Wrapper', () => { const newPage = 3; const props = createTableProps({ options: { onPageChange: sinon.stub() } }); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); + createPaginationWrapper(props, false); instance.handleChangePage(newPage); }); @@ -404,6 +401,25 @@ describe('Wrapper', () => { expect(onPageChange.calledOnce).toBeTruthy(); expect(onPageChange.calledWith(newPage, instance.state.currSizePerPage)).toBeTruthy(); }); + + describe('when pagination remote is enable', () => { + beforeEach(() => { + props.remote = true; + props.onRemotePageChange = sinon.stub(); + createPaginationWrapper(props, false); + instance.handleChangePage(newPage); + }); + + it('should not setting state.currPage', () => { + expect(instance.state.currPage).not.toEqual(newPage); + }); + + it('should calling options.onRemotePageChange correctly', () => { + expect(props.onRemotePageChange.calledOnce).toBeTruthy(); + expect(props.onRemotePageChange.calledWith( + newPage, instance.state.currSizePerPage)).toBeTruthy(); + }); + }); }); describe('handleChangeSizePerPage', () => { @@ -411,9 +427,7 @@ describe('Wrapper', () => { const newSizePerPage = 30; const props = createTableProps({ options: { onSizePerPageChange: sinon.stub() } }); beforeEach(() => { - PaginationWrapper = wrapperFactory(pureTable); - wrapper = shallow(); - instance = wrapper.instance(); + createPaginationWrapper(props, false); instance.handleChangeSizePerPage(newSizePerPage, newPage); }); @@ -431,5 +445,85 @@ describe('Wrapper', () => { expect(onSizePerPageChange.calledOnce).toBeTruthy(); expect(onSizePerPageChange.calledWith(newSizePerPage, newPage)).toBeTruthy(); }); + + describe('when pagination remote is enable', () => { + beforeEach(() => { + props.remote = true; + props.onRemotePageChange = sinon.stub(); + createPaginationWrapper(props, false); + instance.handleChangeSizePerPage(newSizePerPage, newPage); + }); + + it('should not setting state.currPage', () => { + expect(instance.state.currPage).not.toEqual(newPage); + expect(instance.state.currSizePerPage).not.toEqual(newSizePerPage); + }); + + it('should calling options.onRemotePageChange correctly', () => { + expect(props.onRemotePageChange.calledOnce).toBeTruthy(); + expect(props.onRemotePageChange.calledWith(newPage, newSizePerPage)).toBeTruthy(); + }); + }); + }); + + describe('isRemote', () => { + let result; + describe('when options.remote is true', () => { + const props = createTableProps(); + props.remote = true; + + beforeEach(() => { + createPaginationWrapper(props, false); + result = instance.isRemote(); + }); + + it('should return true', () => { + expect(result).toBeTruthy(); + }); + }); + + describe('when options.remote is false', () => { + const props = createTableProps(); + props.remote = false; + + beforeEach(() => { + createPaginationWrapper(props, false); + result = instance.isRemote(); + }); + + it('should return false', () => { + expect(result).toBeFalsy(); + }); + }); + + describe('when options.remote.pagination is defined as true', () => { + const props = createTableProps(); + props.remote = {}; + props.remote.pagination = true; + + beforeEach(() => { + createPaginationWrapper(props, false); + result = instance.isRemote(); + }); + + it('should return true', () => { + expect(result).toBeTruthy(); + }); + }); + + describe('when options.remote.pagination is defined as false', () => { + const props = createTableProps(); + props.remote = {}; + props.remote.pagination = false; + + beforeEach(() => { + createPaginationWrapper(props, false); + result = instance.isRemote(); + }); + + it('should return false', () => { + expect(result).toBeFalsy(); + }); + }); }); }); diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index 9d6293a..fa5aee3 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -100,6 +100,9 @@ BootstrapTable.propTypes = { keyField: PropTypes.string.isRequired, data: PropTypes.array.isRequired, columns: PropTypes.array.isRequired, + remote: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({ + pagination: PropTypes.bool + })]), store: PropTypes.object, noDataIndication: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), striped: PropTypes.bool, @@ -153,10 +156,12 @@ BootstrapTable.propTypes = { defaultSorted: PropTypes.arrayOf(PropTypes.shape({ dataField: PropTypes.string.isRequired, order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired - })) + })), + onTableChange: PropTypes.func }; BootstrapTable.defaultProps = { + remote: false, striped: false, bordered: true, hover: false, diff --git a/packages/react-bootstrap-table2/src/container.js b/packages/react-bootstrap-table2/src/container.js index d321998..0236b9c 100644 --- a/packages/react-bootstrap-table2/src/container.js +++ b/packages/react-bootstrap-table2/src/container.js @@ -18,12 +18,18 @@ const withDataStore = Base => super(props); this.store = new Store(props); this.handleUpdateCell = this.handleUpdateCell.bind(this); + this.onRemotePageChange = this.onRemotePageChange.bind(this); } componentWillReceiveProps(nextProps) { this.store.set(nextProps.data); } + onRemotePageChange(page, sizePerPage) { + const newState = { page, sizePerPage }; + this.props.onTableChange(newState); + } + handleUpdateCell(rowId, dataField, newValue) { const { cellEdit } = this.props; // handle cell editing internal @@ -66,7 +72,10 @@ const withDataStore = Base => } else if (this.props.columns.filter(col => col.sort).length > 0) { return wrapWithSort(baseProps); } else if (this.props.pagination) { - return wrapWithPagination(baseProps); + return wrapWithPagination({ + ...baseProps, + onRemotePageChange: this.onRemotePageChange + }); } return React.createElement(Base, baseProps); diff --git a/packages/react-bootstrap-table2/src/store/base.js b/packages/react-bootstrap-table2/src/store/base.js index e9ac9f5..d3b6a30 100644 --- a/packages/react-bootstrap-table2/src/store/base.js +++ b/packages/react-bootstrap-table2/src/store/base.js @@ -40,14 +40,19 @@ export default class Store { return this.data; } - getByCurrPage(page, sizePerPage) { - const end = (page * sizePerPage) - 1; + getByCurrPage(page, sizePerPage, pageStartIndex) { + const getNormalizedPage = () => { + const offset = Math.abs(1 - pageStartIndex); + return page + offset; + }; + const end = (getNormalizedPage() * sizePerPage) - 1; const start = end - (sizePerPage - 1); + const dataSize = this.getDataSize(); const result = []; for (let i = start; i <= end; i += 1) { result.push(this.data[i]); - if (i + 1 === this.getDataSize()) break; + if (i + 1 === dataSize) break; } return result; } diff --git a/packages/react-bootstrap-table2/src/table-factory.js b/packages/react-bootstrap-table2/src/table-factory.js index 9936b15..7ebfbd7 100644 --- a/packages/react-bootstrap-table2/src/table-factory.js +++ b/packages/react-bootstrap-table2/src/table-factory.js @@ -20,13 +20,9 @@ export const pureTable = props => React.createElement(BootstrapTable, { ...props }); export const wrapWithPagination = (props) => { - if (props.pagination) { - const { wrapper } = props.pagination; - const PaginationBase = wrapper(pureTable); - return React.createElement(PaginationBase, { ...props }); - } - - return pureTable(props); + const { wrapper } = props.pagination; + const PaginationBase = wrapper(pureTable); + return React.createElement(PaginationBase, { ...props }); }; export const paginationElement = props => pureTable(props); diff --git a/packages/react-bootstrap-table2/test/container.test.js b/packages/react-bootstrap-table2/test/container.test.js index dc6cbd2..4bb2f3c 100644 --- a/packages/react-bootstrap-table2/test/container.test.js +++ b/packages/react-bootstrap-table2/test/container.test.js @@ -152,6 +152,33 @@ describe('withDataStore', () => { }); }); + describe('when pagination prop is defined', () => { + const PaginationWrapper = () =>
test
; + const pagination = { + wrapper: jest.fn().mockReturnValue(PaginationWrapper) + }; + + beforeEach(() => { + wrapper = shallow( + + ); + }); + + it('should render Pagination wrapper successfully', () => { + expect(wrapper.find(PaginationWrapper).length).toBe(1); + }); + + it('should injecting correct props to Pagination wrapper', () => { + const component = wrapper.find(PaginationWrapper); + expect(component.props().onRemotePageChange).toBeDefined(); + }); + }); + describe('when any column.sort is defined', () => { beforeEach(() => { const columnsWithSort = [{ @@ -172,4 +199,27 @@ describe('withDataStore', () => { expect(wrapper.find(SortWrapper).length).toBe(1); }); }); + + describe('onRemotePageChange', () => { + const page = 2; + const sizePerPage = 25; + const onTableChangeCallBack = sinon.stub(); + + beforeEach(() => { + wrapper = shallow( + + ); + wrapper.instance().onRemotePageChange(page, sizePerPage); + }); + + it('should calling onTableChange correctly', () => { + expect(onTableChangeCallBack.calledOnce).toBeTruthy(); + expect(onTableChangeCallBack.calledWith({ page, sizePerPage })).toBeTruthy(); + }); + }); }); diff --git a/packages/react-bootstrap-table2/test/store/base.test.js b/packages/react-bootstrap-table2/test/store/base.test.js index c60260f..28dea64 100644 --- a/packages/react-bootstrap-table2/test/store/base.test.js +++ b/packages/react-bootstrap-table2/test/store/base.test.js @@ -212,4 +212,34 @@ describe('Store Base', () => { expect(store.isAnySelectedRow()).not.toBeTruthy(); }); }); + + describe('getByCurrPage', () => { + beforeEach(() => { + data = []; + for (let i = 0; i < 100; i += 1) { + data.push({ id: i, name: `test_name${i}` }); + } + store = new Base({ data, keyField: 'id' }); + }); + + it('should always return correct data', () => { + [ + // [page, sizePerPage, pageStartIndex] + [1, 10, 1], + [1, 25, 1], + [1, 30, 1], + [3, 30, 1], + [4, 30, 1], + [10, 10, 1], + [0, 10, 0], + [1, 10, 0], + [9, 10, 0] + ].forEach(([page, sizePerPage, pageStartIndex]) => { + const rows = store.getByCurrPage(page, sizePerPage, pageStartIndex); + expect(rows).toBeDefined(); + expect(Array.isArray(rows)).toBeTruthy(); + expect(rows.every(row => !!row)).toBeTruthy(); + }); + }); + }); });