20200316 release

packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js

@@ -47,6 +47,7 @@ const options = {
   lastPageTitle: 'Last page',
   showTotal: true,
   paginationTotalRenderer: customTotal,
+  disablePageTitle: true,
   sizePerPageList: [{
     text: '5', value: 5
   }, {
@@ -82,6 +83,7 @@ const options = {
   lastPageTitle: 'Last page',
   showTotal: true,
   paginationTotalRenderer: customTotal,
+  disablePageTitle: true,
   sizePerPageList: [{
     text: '5', value: 5
   }, {

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/README.md

@@ -56,6 +56,7 @@ import paginationFactory from 'react-bootstrap-table2-paginator';
 * [hideSizePerPage](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationhidesizeperpage-bool)
 * [hidePageListOnlyOnePage](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationhidepagelistonlyonepage-bool)
 * [showTotal](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationshowtotal-bool)
+* [disablePageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationdisablepagetitle-bool)
 
 You can check [this online demo](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Pagination&selectedStory=Custom%20Pagination&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) for above props usage.
 
@@ -233,7 +234,8 @@ nextPageTitle,
 firstPageTitle,
 lastPageTitle,
 onPageChange,
-onSizePerPageChange
+onSizePerPageChange,
+disablePageTitle
 ```
 
 In most of case, `page`, `sizePerPage`, `onPageChange` and `onSizePerPageChange` are most important things for developer.

packages/react-bootstrap-table2-paginator/src/data-context.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/page-resolver.js

@@ -107,7 +107,7 @@ export default ExtendBase =>
       return pages;
     }
 
-    calculatePageStatus(pages = [], lastPage) {
+    calculatePageStatus(pages = [], lastPage, disablePageTitle = false) {
       const {
         currPage,
         pageStartIndex,
@@ -146,7 +146,11 @@ export default ExtendBase =>
             title = `${page}`;
           }
 
-          return { page, active, disabled, title };
+          const pageResult = { page, active, disabled };
+          if (!disablePageTitle) {
+            pageResult.title = title;
+          }
+          return pageResult;
         });
     }
 

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

@@ -7,8 +7,22 @@ import PaginationList from './pagination-list';
 const paginationListAdapter = WrappedComponent =>
   class PaginationListAdapter extends pageResolver(Component) {
     render() {
-      const { lastPage, totalPages, pageButtonRenderer, onPageChange } = this.props;
-      const pages = this.calculatePageStatus(this.calculatePages(totalPages, lastPage), lastPage);
+      const {
+        lastPage,
+        totalPages,
+        pageButtonRenderer,
+        onPageChange,
+        disablePageTitle,
+        hidePageListOnlyOnePage
+      } = this.props;
+      const pages = this.calculatePageStatus(
+        this.calculatePages(totalPages, lastPage),
+        lastPage,
+        disablePageTitle
+      );
+      if (totalPages === 1 && hidePageListOnlyOnePage) {
+        return null;
+      }
       return (
         <WrappedComponent
           pageButtonRenderer={ pageButtonRenderer }

packages/react-bootstrap-table2-paginator/src/pagination.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 }
@@ -94,6 +96,7 @@ Pagination.propTypes = {
   currSizePerPage: PropTypes.number.isRequired,
   onPageChange: PropTypes.func.isRequired,
   onSizePerPageChange: PropTypes.func.isRequired,
+  disablePageTitle: PropTypes.bool,
   pageStartIndex: PropTypes.number,
   paginationSize: PropTypes.number,
   showTotal: PropTypes.bool,
@@ -113,10 +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/size-per-page-dropdown-adapter.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.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
 };