From a30a8fd96bb20f0253444487559a8387425c5c53 Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Sun, 2 Dec 2018 13:32:01 +0800
Subject: [PATCH] implement sizePerPageOptionRenderer

---
 .../src/pagination.js                         |  4 +++
 .../src/size-per-page-dropdown.js             | 31 +++++++++++++------
 .../src/state-context.js                      |  1 +
 .../test/size-per-page-dropdown.test.js       | 19 ++++++++++++
 4 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js
index e914f93..d63bc7c 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination.js
+++ b/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,
diff --git a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js
index 2d8fcc4..e7588b3 100644
--- a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js
+++ b/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 => (
-                  <SizePerPageOption
-                    { ...option }
-                    key={ option.text }
-                    bootstrap4={ bootstrap4 }
-                    onSizePerPageChange={ onSizePerPageChange }
-                  />
-                ))
+                options.map((option) => {
+                  if (optionRenderer) {
+                    return optionRenderer({
+                      ...option,
+                      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
 };
 
 
diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js
index 33a4b7b..ff8d806 100644
--- a/packages/react-bootstrap-table2-paginator/src/state-context.js
+++ b/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,
diff --git a/packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown.test.js b/packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown.test.js
index fdf55bd..8e1b964 100644
--- a/packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown.test.js
+++ b/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);
+    });
+  });
 });