implement pageListRenderer

Author: AllenFang

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

@@ -108,6 +108,7 @@ class Pagination extends pageResolver(Component) {
     const {
       showTotal,
       dataSize,
+      pageListRenderer,
       pageButtonRenderer,
       paginationTotalRenderer,
       sizePerPageList,
@@ -148,13 +149,20 @@ class Pagination extends pageResolver(Component) {
               ) : null
           }
         </div>
-        <div className={ pageListClass }>
-          <PaginationList
-            pages={ pages }
-            pageButtonRenderer={ pageButtonRenderer }
-            onPageChange={ this.handleChangePage }
-          />
-        </div>
+        {
+          pageListRenderer ? pageListRenderer({
+            pages,
+            onPageChange: this.handleChangePage
+          }) : (
+            <div className={ pageListClass }>
+              <PaginationList
+                pages={ pages }
+                pageButtonRenderer={ pageButtonRenderer }
+                onPageChange={ this.handleChangePage }
+              />
+            </div>
+          )
+        }
       </div>
     );
   }
@@ -170,6 +178,7 @@ Pagination.propTypes = {
   pageStartIndex: PropTypes.number,
   paginationSize: PropTypes.number,
   showTotal: PropTypes.bool,
+  pageListRenderer: PropTypes.func,
   pageButtonRenderer: PropTypes.func,
   paginationTotalRenderer: PropTypes.func,
   firstPageText: PropTypes.string,
@@ -192,6 +201,7 @@ Pagination.defaultProps = {
   withFirstAndLast: Const.With_FIRST_AND_LAST,
   alwaysShowAllBtns: Const.SHOW_ALL_PAGE_BTNS,
   showTotal: Const.SHOW_TOTAL,
+  pageListRenderer: null,
   pageButtonRenderer: null,
   paginationTotalRenderer: Const.PAGINATION_TOTAL,
   firstPageText: Const.FIRST_PAGE_TEXT,

packages/react-bootstrap-table2-paginator/src/state-context.js

@@ -76,6 +76,7 @@ class StateProvider extends React.Component {
       sizePerPageList: options.sizePerPageList || Const.SIZE_PER_PAGE_LIST,
       paginationSize: options.paginationSize || Const.PAGINATION_SIZE,
       showTotal: options.showTotal,
+      pageListRenderer: options.pageListRenderer,
       pageButtonRenderer: options.pageButtonRenderer,
       paginationTotalRenderer: options.paginationTotalRenderer,
       firstPageText: options.firstPageText || Const.FIRST_PAGE_TEXT,

packages/react-bootstrap-table2-paginator/test/pagination.test.js

@@ -109,6 +109,24 @@ describe('Pagination', () => {
     });
   });
 
+  describe('when props.pageListRenderer is defined', () => {
+    const pageListRenderer = jest.fn().mockReturnValue(null);
+    beforeEach(() => {
+      pageListRenderer.mockClear();
+      const props = createMockProps({ pageListRenderer });
+      wrapper = shallow(<Pagination { ...props } />);
+      instance = wrapper.instance();
+    });
+
+    it('should not render PaginationList', () => {
+      expect(wrapper.find(PaginationList)).toHaveLength(0);
+    });
+
+    it('should call props.pageListRenderer correctly', () => {
+      expect(pageListRenderer).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe('componentWillReceiveProps', () => {
     describe('when next props.currSizePerPage is diff than current one', () => {
       const nextProps = createMockProps({ currSizePerPage: 20 });