diff --git a/packages/react-bootstrap-table2-paginator/src/page-button.js b/packages/react-bootstrap-table2-paginator/src/page-button.js
index 272fa19..e2834ee 100644
--- a/packages/react-bootstrap-table2-paginator/src/page-button.js
+++ b/packages/react-bootstrap-table2-paginator/src/page-button.js
@@ -20,13 +20,14 @@ class PageButton extends Component {
page,
title,
active,
- disabled
+ disabled,
+ className
} = this.props;
const classes = cs({
active,
disabled,
'page-item': true
- });
+ }, className);
return (
@@ -41,6 +42,7 @@ PageButton.propTypes = {
page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
active: PropTypes.bool.isRequired,
disabled: PropTypes.bool.isRequired,
+ className: PropTypes.string,
title: PropTypes.string
};
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-list.js b/packages/react-bootstrap-table2-paginator/src/pagination-list.js
index 805af53..9954538 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination-list.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination-list.js
@@ -6,13 +6,21 @@ import PageButton from './page-button';
const PaginatonList = props => (
{
- props.pages.map(pageProps => (
-
- ))
+ props.pages.map((pageProps) => {
+ if (props.pageButtonRenderer) {
+ return props.pageButtonRenderer({
+ ...pageProps,
+ onPageChange: props.onPageChange
+ });
+ }
+ return (
+
+ );
+ })
}
);
@@ -24,7 +32,12 @@ PaginatonList.propTypes = {
disable: PropTypes.bool,
title: PropTypes.string
})).isRequired,
- onPageChange: PropTypes.func.isRequired
+ onPageChange: PropTypes.func.isRequired,
+ pageButtonRenderer: PropTypes.func
+};
+
+PaginatonList.defaultProps = {
+ pageButtonRenderer: null
};
export default PaginatonList;
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js
index cf29eb9..7e0511a 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination.js
@@ -108,6 +108,7 @@ class Pagination extends pageResolver(Component) {
const {
showTotal,
dataSize,
+ pageButtonRenderer,
paginationTotalRenderer,
sizePerPageList,
currSizePerPage,
@@ -148,7 +149,11 @@ class Pagination extends pageResolver(Component) {
}
);
@@ -165,6 +170,7 @@ Pagination.propTypes = {
pageStartIndex: PropTypes.number,
paginationSize: PropTypes.number,
showTotal: PropTypes.bool,
+ pageButtonRenderer: PropTypes.func,
paginationTotalRenderer: PropTypes.func,
firstPageText: PropTypes.string,
prePageText: PropTypes.string,
@@ -186,6 +192,7 @@ Pagination.defaultProps = {
withFirstAndLast: Const.With_FIRST_AND_LAST,
alwaysShowAllBtns: Const.SHOW_ALL_PAGE_BTNS,
showTotal: Const.SHOW_TOTAL,
+ pageButtonRenderer: null,
paginationTotalRenderer: Const.PAGINATION_TOTAL,
firstPageText: Const.FIRST_PAGE_TEXT,
prePageText: Const.PRE_PAGE_TEXT,
diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js
index 122b62b..de85eac 100644
--- a/packages/react-bootstrap-table2-paginator/src/state-context.js
+++ b/packages/react-bootstrap-table2-paginator/src/state-context.js
@@ -76,6 +76,7 @@ class StateProvider extends React.Component {
sizePerPageList: options.sizePerPageList || Const.SIZE_PER_PAGE_LIST,
paginationSize: options.paginationSize || Const.PAGINATION_SIZE,
showTotal: options.showTotal,
+ pageButtonRenderer: options.pageButtonRenderer,
paginationTotalRenderer: options.paginationTotalRenderer,
firstPageText: options.firstPageText || Const.FIRST_PAGE_TEXT,
prePageText: options.prePageText || Const.PRE_PAGE_TEXT,
diff --git a/packages/react-bootstrap-table2-paginator/test/pagination-list.test.js b/packages/react-bootstrap-table2-paginator/test/pagination-list.test.js
index 0545006..443d435 100644
--- a/packages/react-bootstrap-table2-paginator/test/pagination-list.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/pagination-list.test.js
@@ -39,4 +39,22 @@ describe('PaginationList', () => {
expect(wrapper.find('ul.react-bootstrap-table-page-btns-ul').length).toBe(1);
expect(wrapper.find(PageButton).length).toBe(pages.length);
});
+
+ describe('when props.pageButtonRenderer is existing', () => {
+ const pageButtonRenderer = jest.fn().mockReturnValue(null);
+ beforeEach(() => {
+ wrapper = shallow(
+
+ );
+ });
+
+ it('should call props.pageButtonRenderer correctly', () => {
+ expect(wrapper.length).toBe(1);
+ expect(pageButtonRenderer).toHaveBeenCalledTimes(pages.length);
+ });
+ });
});