implement sizePerPageOptionRenderer

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

@@ -111,6 +111,7 @@ class Pagination extends pageResolver(Component) {
       pageListRenderer,
       pageButtonRenderer,
       paginationTotalRenderer,
+      sizePerPageOptionRenderer,
       sizePerPageList,
       currSizePerPage,
       hideSizePerPage,
@@ -132,6 +133,7 @@ class Pagination extends pageResolver(Component) {
                 <SizePerPageDropDown
                   currSizePerPage={ `${currSizePerPage}` }
                   options={ this.calculateSizePerPageStatus() }
+                  optionRenderer={ sizePerPageOptionRenderer }
                   onSizePerPageChange={ this.handleChangeSizePerPage }
                   onClick={ this.toggleDropDown }
                   onBlur={ this.closeDropDown }
@@ -181,6 +183,7 @@ Pagination.propTypes = {
   pageListRenderer: PropTypes.func,
   pageButtonRenderer: PropTypes.func,
   paginationTotalRenderer: PropTypes.func,
+  sizePerPageOptionRenderer: PropTypes.func,
   firstPageText: PropTypes.string,
   prePageText: PropTypes.string,
   nextPageText: PropTypes.string,
@@ -204,6 +207,7 @@ Pagination.defaultProps = {
   pageListRenderer: null,
   pageButtonRenderer: null,
   paginationTotalRenderer: Const.PAGINATION_TOTAL,
+  sizePerPageOptionRenderer: null,
   firstPageText: Const.FIRST_PAGE_TEXT,
   prePageText: Const.PRE_PAGE_TEXT,
   nextPageText: Const.NEXT_PAGE_TEXT,

packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js

@@ -16,6 +16,7 @@ const SizePerPageDropDown = (props) => {
     className,
     variation,
     btnContextual,
+    optionRenderer,
     currSizePerPage,
     onSizePerPageChange
   } = props;
@@ -61,14 +62,22 @@ const SizePerPageDropDown = (props) => {
               aria-labelledby="pageDropDown"
             >
               {
-                options.map(option => (
+                options.map((option) => {
-                  <SizePerPageOption
+                  if (optionRenderer) {
-                    { ...option }
+                    return optionRenderer({
-                    key={ option.text }
+                      ...option,
-                    bootstrap4={ bootstrap4 }
+                      onSizePerPageChange
-                    onSizePerPageChange={ onSizePerPageChange }
+                    });
-                  />
+                  }
-                ))
+                  return (
+                    <SizePerPageOption
+                      { ...option }
+                      key={ option.text }
+                      bootstrap4={ bootstrap4 }
+                      onSizePerPageChange={ onSizePerPageChange }
+                    />
+                  );
+                })
               }
             </ul>
           </span>
@@ -88,14 +97,16 @@ SizePerPageDropDown.propTypes = {
   hidden: PropTypes.bool,
   btnContextual: PropTypes.string,
   variation: PropTypes.oneOf(['dropdown', 'dropup']),
-  className: PropTypes.string
+  className: PropTypes.string,
+  optionRenderer: PropTypes.func
 };
 SizePerPageDropDown.defaultProps = {
   open: false,
   hidden: false,
   btnContextual: 'btn-default btn-secondary',
   variation: 'dropdown',
-  className: ''
+  className: '',
+  optionRenderer: null
 };
 
 

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

@@ -79,6 +79,7 @@ class StateProvider extends React.Component {
       pageListRenderer: options.pageListRenderer,
       pageButtonRenderer: options.pageButtonRenderer,
       paginationTotalRenderer: options.paginationTotalRenderer,
+      sizePerPageOptionRenderer: options.sizePerPageOptionRenderer,
       firstPageText: options.firstPageText || Const.FIRST_PAGE_TEXT,
       prePageText: options.prePageText || Const.PRE_PAGE_TEXT,
       nextPageText: options.nextPageText || Const.NEXT_PAGE_TEXT,

packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown.test.js

@@ -178,4 +178,23 @@ describe('SizePerPageDropDown', () => {
       expect(wrapper.hasClass(className)).toBeTruthy();
     });
   });
+
+  describe('when optionRenderer prop is defined', () => {
+    const optionRenderer = jest.fn();
+    beforeEach(() => {
+      optionRenderer.mockReset();
+      wrapper = shallowWithContext(
+        <SizePerPageDropDown { ...props } optionRenderer={ optionRenderer } />,
+        { bootstrap4: false }
+      );
+    });
+
+    it('should not render SizePerPageOption', () => {
+      expect(wrapper.find(SizePerPageOption)).toHaveLength(0);
+    });
+
+    it('should call optionRenderer prop correctly', () => {
+      expect(optionRenderer).toHaveBeenCalledTimes(props.options.length);
+    });
+  });
 });