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-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
+};
+
+
+ { 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 => (
+ onPageChange(p.page) }>{ p.page }
+ ))
+ }
+
+ );
+};
+
+const options = {
+ pageListRenderer
+};
+
+
+ {
+ pageWithoutIndication.map(p => (
+ onPageChange(p.page) }>{ p.page }
+ ))
+ }
+
+ );
+};
+
+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
+};
+
+
+ {
+ 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 (
+ onSizePerPageChange(option.page) }
+ className={ \`btn $\{isSelect ? 'btn-secondary' : 'btn-warning'}\` }
+ >
+ { option.text }
+
+ );
+ })
+ }
+
+);
+
+const options = {
+ sizePerPageRenderer
+};
+
+
+ {
+ options.map(option => (
+ onSizePerPageChange(option.page) }
+ className={ `btn ${currSizePerPage === `${option.page}` ? 'btn-secondary' : 'btn-warning'}` }
+ >
+ { option.text }
+
+ ))
+ }
+
+);
+
+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..cde3a43
--- /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,
+ paginationTableProps
+ }) => (
+
+
+
Current Page: { paginationProps.page }
+
Current SizePerPage: { paginationProps.sizePerPage }
+
+
+ Next Page
+ Prev Page
+ this.handleSizePerPage(paginationProps, 10) }>Size Per Page: 10
+ this.handleSizePerPage(paginationProps, 25) }>Size Per Page: 25
+
+
+
+
{ sourceCode }
+
+
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+
+
+
Current Page: { paginationProps.page }
+
Current SizePerPage: { paginationProps.sizePerPage }
+
+
+ Next Page
+ Prev Page
+ this.handleSizePerPage(paginationProps, 10) }>Size Per Page: 10
+ this.handleSizePerPage(paginationProps, 25) }>Size Per Page: 25
+
+
+
+
{ sourceCode }
+
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+
+ )
+ }
+
+`;
+
+const options = {
+ custom: true,
+ totalSize: products.length
+};
+// const pagination = paginationFactory(options);
+
+export default class StandalonePaginationList extends React.Component {
+ render() {
+ return (
+
+
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+
+ )
+ }
+
+
{ sourceCode }
+
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+
+
+ )
+ }
+
+`;
+
+const options = {
+ custom: true,
+ totalSize: products.length
+};
+// const pagination = paginationFactory(options);
+
+export default class StandaloneSizePerPage extends React.Component {
+ render() {
+ return (
+
+
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+
+
+ )
+ }
+
+
{ sourceCode }
+
+ {
+ ({
+ 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.
diff --git a/packages/react-bootstrap-table2-paginator/index.js b/packages/react-bootstrap-table2-paginator/index.js
index 8750183..1956416 100644
--- a/packages/react-bootstrap-table2-paginator/index.js
+++ b/packages/react-bootstrap-table2-paginator/index.js
@@ -1,6 +1,26 @@
-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';
+import PaginationListStandalone from './src/pagination-list-standalone';
+import SizePerPageDropdownStandalone from './src/size-per-page-dropdown-standalone';
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;
+export { PaginationListStandalone, SizePerPageDropdownStandalone };
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-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/page-resolver.js b/packages/react-bootstrap-table2-paginator/src/page-resolver.js
index 5146faf..cb77b17 100644
--- a/packages/react-bootstrap-table2-paginator/src/page-resolver.js
+++ b/packages/react-bootstrap-table2-paginator/src/page-resolver.js
@@ -8,16 +8,10 @@ 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);
- return { totalPages, lastPage, dropdownOpen: false };
+ return { totalPages, lastPage };
}
calculateTotalPage(sizePerPage = this.props.currSizePerPage, dataSize = this.props.dataSize) {
@@ -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/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/pagination-handler.js b/packages/react-bootstrap-table2-paginator/src/pagination-handler.js
new file mode 100644
index 0000000..fcc9e11
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/src/pagination-handler.js
@@ -0,0 +1,77 @@
+/* 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);
+ }
+ }
+
+ 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 (
+
{
- props.pages.map(pageProps => (
-
);
@@ -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..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) => (
- {
- sizePerPageList.length > 1 && !hideSizePerPage ?
- (
-
-
+ {
+ pageListRenderer ? pageListRenderer({
+ pages,
+ onPageChange
+ }) : (
+
+ )
+ }
);
}
@@ -165,7 +106,11 @@ Pagination.propTypes = {
pageStartIndex: PropTypes.number,
paginationSize: PropTypes.number,
showTotal: PropTypes.bool,
+ pageListRenderer: PropTypes.func,
+ pageButtonRenderer: PropTypes.func,
+ sizePerPageRenderer: PropTypes.func,
paginationTotalRenderer: PropTypes.func,
+ sizePerPageOptionRenderer: PropTypes.func,
firstPageText: PropTypes.string,
prePageText: PropTypes.string,
nextPageText: PropTypes.string,
@@ -186,7 +131,11 @@ Pagination.defaultProps = {
withFirstAndLast: Const.With_FIRST_AND_LAST,
alwaysShowAllBtns: Const.SHOW_ALL_PAGE_BTNS,
showTotal: Const.SHOW_TOTAL,
+ pageListRenderer: null,
+ pageButtonRenderer: null,
+ sizePerPageRenderer: null,
paginationTotalRenderer: Const.PAGINATION_TOTAL,
+ sizePerPageOptionRenderer: null,
firstPageText: Const.FIRST_PAGE_TEXT,
prePageText: Const.PRE_PAGE_TEXT,
nextPageText: Const.NEXT_PAGE_TEXT,
@@ -200,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
new file mode 100644
index 0000000..a63e5f7
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js
@@ -0,0 +1,67 @@
+/* eslint react/prop-types: 0 */
+import React, { Component } from 'react';
+
+import pageResolver from './page-resolver';
+import SizePerPageDropDown from './size-per-page-dropdown';
+
+const sizePerPageDropdownAdapter = 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 (
+
+ { this.props.children }
+
+ );
+ }
+}
+
+export default () => ({
+ Provider: StateProvider,
+ Consumer: StateContext.Consumer
+});
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 => (
-
-
- {
- 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..ba920cc
--- /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 => (
+
+
+ {
+ 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')).toBeUndefined();
+ });
+ });
+
+ 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-resolver.test.js b/packages/react-bootstrap-table2-paginator/test/page-resolver.test.js
index 7dbc198..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();
});
});
@@ -81,35 +79,6 @@ describe('PageResolver', () => {
});
});
- 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 +161,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 +170,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 +187,9 @@ describe('PageResolver', () => {
currPages.forEach((currPage) => {
props.currPage = currPage + 1;
wrapper = shallow(
+
+ {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ 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(),
+ paginationTableProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+});
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 = () => {