fix react-bootstrap-table#1280

Author: AllenFang

packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js

@@ -74,6 +74,7 @@ export default class StandaloneSizePerPage extends React.Component {
     return (
       <div>
         <PaginationProvider
+          bootstrap4
           pagination={ paginationFactory(options) }
         >
           {
@@ -84,7 +85,7 @@ export default class StandaloneSizePerPage extends React.Component {
               <div>
                 <SizePerPageDropdownStandalone
                   { ...paginationProps }
-                  btnContextual="btn btn-primary"
+                  btnContextual="btn btn-warning"
                 />
                 <BootstrapTable
                   keyField="id"

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

@@ -5,7 +5,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Const from './const';
-import { BootstrapContext } from './bootstrap';
 import Pagination from './pagination';
 import { getByCurrPage, alignPage } from './page';
 import createBaseContext from './state-context';
@@ -57,22 +56,19 @@ class PaginationDataProvider extends Provider {
   renderDefaultPagination = () => {
     if (!this.props.pagination.options.custom) {
       const {
-        bootstrap4,
         page: currPage,
         sizePerPage: currSizePerPage,
         dataSize,
         ...rest
       } = this.getPaginationProps();
       return (
-        <BootstrapContext.Provider value={ { bootstrap4 } }>
-          <Pagination
-            { ...rest }
-            key="pagination"
-            dataSize={ dataSize || this.props.data.length }
-            currPage={ currPage }
-            currSizePerPage={ currSizePerPage }
-          />
-        </BootstrapContext.Provider>
+        <Pagination
+          { ...rest }
+          key="pagination"
+          dataSize={ dataSize || this.props.data.length }
+          currPage={ currPage }
+          currSizePerPage={ currSizePerPage }
+        />
       );
     }
     return null;

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

@@ -31,6 +31,7 @@ class Pagination extends pageResolver(Component) {
       sizePerPageRenderer,
       sizePerPageOptionRenderer,
       onSizePerPageChange,
+      bootstrap4,
       ...rest
     } = this.props;
 
@@ -44,6 +45,7 @@ class Pagination extends pageResolver(Component) {
       <div className="row react-bootstrap-table-pagination">
         <div className="col-md-6 col-xs-6 col-sm-6 col-lg-6">
           <SizePerPageDropdownWithAdapter
+            bootstrap4={ bootstrap4 }
             tableId={ tableId }
             sizePerPageList={ sizePerPageList }
             currSizePerPage={ currSizePerPage }
@@ -114,11 +116,13 @@ Pagination.propTypes = {
   withFirstAndLast: PropTypes.bool,
   alwaysShowAllBtns: PropTypes.bool,
   hideSizePerPage: PropTypes.bool,
-  hidePageListOnlyOnePage: PropTypes.bool
+  hidePageListOnlyOnePage: PropTypes.bool,
+  bootstrap4: PropTypes.bool
 };
 
 Pagination.defaultProps = {
   disablePageTitle: false,
+  bootstrap4: false,
   pageStartIndex: Const.PAGE_START_INDEX,
   paginationSize: Const.PAGINATION_SIZE,
   withFirstAndLast: Const.With_FIRST_AND_LAST,

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

@@ -31,6 +31,7 @@ const sizePerPageDropdownAdapter = WrappedComponent =>
     render() {
       const {
         tableId,
+        bootstrap4,
         sizePerPageList,
         currSizePerPage,
         hideSizePerPage,
@@ -58,6 +59,7 @@ const sizePerPageDropdownAdapter = WrappedComponent =>
             onBlur={ this.closeDropDown }
             open={ open }
             tableId={ tableId }
+            bootstrap4={ bootstrap4 }
           />
         );
       }

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import cs from 'classnames';
 import PropTypes from 'prop-types';
-import { BootstrapContext } from './bootstrap';
 import SizePerPageOption from './size-per-page-option';
 
 const sizePerPageDefaultClass = 'react-bs-table-sizePerPage-dropdown';
@@ -16,6 +15,7 @@ const SizePerPageDropDown = (props) => {
     options,
     className,
     variation,
+    bootstrap4,
     btnContextual,
     optionRenderer,
     currSizePerPage,
@@ -34,60 +34,54 @@ const SizePerPageDropDown = (props) => {
   const id = tableId ? `${tableId}-pageDropDown` : 'pageDropDown';
 
   return (
-    <BootstrapContext.Consumer>
-      {
-        ({ bootstrap4 }) => (
-          <span
-            style={ dropDownStyle }
-            className={ dropdownClasses }
-          >
-            <button
-              id={ id }
-              type="button"
-              className={ `btn ${btnContextual} dropdown-toggle` }
-              data-toggle="dropdown"
-              aria-expanded={ open }
-              onClick={ onClick }
-              onBlur={ onBlur }
-            >
-              { currSizePerPage }
-              { ' ' }
-              {
-                bootstrap4 ? null : (
-                  <span>
-                    <span className="caret" />
-                  </span>
-                )
-              }
-            </button>
-            <ul
-              className={ `dropdown-menu ${openClass}` }
-              role="menu"
-              aria-labelledby={ id }
-            >
-              {
-                options.map((option) => {
-                  if (optionRenderer) {
-                    return optionRenderer({
-                      ...option,
-                      onSizePerPageChange
-                    });
-                  }
-                  return (
-                    <SizePerPageOption
-                      { ...option }
-                      key={ option.text }
-                      bootstrap4={ bootstrap4 }
-                      onSizePerPageChange={ onSizePerPageChange }
-                    />
-                  );
-                })
-              }
-            </ul>
-          </span>
-        )
-      }
-    </BootstrapContext.Consumer>
+    <span
+      style={ dropDownStyle }
+      className={ dropdownClasses }
+    >
+      <button
+        id={ id }
+        type="button"
+        className={ `btn ${btnContextual} dropdown-toggle` }
+        data-toggle="dropdown"
+        aria-expanded={ open }
+        onClick={ onClick }
+        onBlur={ onBlur }
+      >
+        { currSizePerPage }
+        { ' ' }
+        {
+          bootstrap4 ? null : (
+            <span>
+              <span className="caret" />
+            </span>
+          )
+        }
+      </button>
+      <ul
+        className={ `dropdown-menu ${openClass}` }
+        role="menu"
+        aria-labelledby={ id }
+      >
+        {
+          options.map((option) => {
+            if (optionRenderer) {
+              return optionRenderer({
+                ...option,
+                onSizePerPageChange
+              });
+            }
+            return (
+              <SizePerPageOption
+                { ...option }
+                key={ option.text }
+                bootstrap4={ bootstrap4 }
+                onSizePerPageChange={ onSizePerPageChange }
+              />
+            );
+          })
+        }
+      </ul>
+    </span>
   );
 };
 
@@ -97,6 +91,7 @@ SizePerPageDropDown.propTypes = {
   onClick: PropTypes.func.isRequired,
   onBlur: PropTypes.func.isRequired,
   onSizePerPageChange: PropTypes.func.isRequired,
+  bootstrap4: PropTypes.bool,
   tableId: PropTypes.string,
   open: PropTypes.bool,
   hidden: PropTypes.bool,
@@ -112,6 +107,7 @@ SizePerPageDropDown.defaultProps = {
   variation: 'dropdown',
   className: '',
   optionRenderer: null,
+  bootstrap4: false,
   tableId: null
 };