implement pageButtonRenderer

Author: AllenFang

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 (
       <li className={ classes } title={ title }>
@@ -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
 };
 

packages/react-bootstrap-table2-paginator/src/pagination-list.js

@@ -6,13 +6,21 @@ import PageButton from './page-button';
 const PaginatonList = props => (
   <ul className="pagination react-bootstrap-table-page-btns-ul">
     {
-      props.pages.map(pageProps => (
-        <PageButton
-          key={ pageProps.page }
-          { ...pageProps }
-          onPageChange={ props.onPageChange }
-        />
-      ))
+      props.pages.map((pageProps) => {
+        if (props.pageButtonRenderer) {
+          return props.pageButtonRenderer({
+            ...pageProps,
+            onPageChange: props.onPageChange
+          });
+        }
+        return (
+          <PageButton
+            key={ pageProps.page }
+            { ...pageProps }
+            onPageChange={ props.onPageChange }
+          />
+        );
+      })
     }
   </ul>
 );
@@ -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;

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) {
           }
         </div>
         <div className={ pageListClass }>
-          <PaginationList pages={ pages } onPageChange={ this.handleChangePage } />
+          <PaginationList
+            pages={ pages }
+            pageButtonRenderer={ pageButtonRenderer }
+            onPageChange={ this.handleChangePage }
+          />
         </div>
       </div>
     );
@@ -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,

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,

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(
+        <PaginationList
+          pages={ pages }
+          onPageChange={ onPageChange }
+          pageButtonRenderer={ pageButtonRenderer }
+        />
+      );
+    });
+
+    it('should call props.pageButtonRenderer correctly', () => {
+      expect(wrapper.length).toBe(1);
+      expect(pageButtonRenderer).toHaveBeenCalledTimes(pages.length);
+    });
+  });
 });