From 156559fbf84b9609bb4f0649a588d9b4c5f6b42a Mon Sep 17 00:00:00 2001
From: jloborod <jloborod@gmail.com>
Date: Tue, 6 Jun 2017 23:33:21 +0100
Subject: [PATCH] issue-1130: added show to make size dropdown compatible with
 bootstrap4

---
 src/pagination/PaginationList.js      | 25 ++++++++++++++++++++-----
 src/pagination/SizePerPageDropDown.js |  5 ++++-
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/pagination/PaginationList.js b/src/pagination/PaginationList.js
index ee47677cf..eed05d599 100644
--- a/src/pagination/PaginationList.js
+++ b/src/pagination/PaginationList.js
@@ -10,14 +10,18 @@ class PaginationList extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      open: this.props.open
+      open: this.props.open,
+      show: this.props.show
     };
   }
 
   componentWillReceiveProps() {
     const { keepSizePerPageState } = this.props;
     if (!keepSizePerPageState) {
-      this.setState({ open: false });
+      this.setState({
+        open: false,
+        show: false
+      });
     }
   }
 
@@ -45,7 +49,12 @@ class PaginationList extends Component {
       page = parseInt(page, 10);
     }
 
-    if (keepSizePerPageState) { this.setState({ open: false }); }
+    if (keepSizePerPageState) {
+      this.setState({
+        open: false,
+        show: false
+      });
+    }
 
     if (page !== currPage) {
       this.props.changePage(page, sizePerPage);
@@ -64,12 +73,16 @@ class PaginationList extends Component {
         this.props.onSizePerPageList(selectSize);
       }
     }
-    this.setState({ open: false });
+    this.setState({
+      open: false,
+      show: false
+    });
   }
 
   toggleDropDown = () => {
     this.setState({
-      open: !this.state.open
+      open: !this.state.open,
+      show: !this.state.show
     });
   }
 
@@ -149,6 +162,7 @@ class PaginationList extends Component {
     if (sizePerPageDropDown) {
       dropdown = sizePerPageDropDown({
         open: this.state.open,
+        show: this.state.show,
         hideSizePerPage,
         currSizePerPage: sizePerPage,
         sizePerPageList,
@@ -182,6 +196,7 @@ class PaginationList extends Component {
       dropdown = (
         <SizePerPageDropDown
           open={ this.state.open }
+          show={ this.state.show }
           hidden={ hideSizePerPage }
           currSizePerPage={ String(sizePerPageText) }
           options={ sizePerPageOptions }
diff --git a/src/pagination/SizePerPageDropDown.js b/src/pagination/SizePerPageDropDown.js
index 9d47e97b4..fc300d9ad 100644
--- a/src/pagination/SizePerPageDropDown.js
+++ b/src/pagination/SizePerPageDropDown.js
@@ -7,6 +7,7 @@ class SizePerPageDropDown extends Component {
   render() {
     const {
       open,
+      show,
       hidden,
       onClick,
       options,
@@ -17,11 +18,12 @@ class SizePerPageDropDown extends Component {
     } = this.props;
 
     const openClass = open ? 'open' : '';
+    const showClass = show ? 'show' : '';
     const dropDownStyle = { visibility: hidden ? 'hidden' : 'visible' };
 
     return (
       <span style={ dropDownStyle }
-        className={ `${variation} ${openClass} ${className} ${sizePerPageDefaultClass}` }>
+        className={ `${variation} ${openClass} ${showClass} ${className} ${sizePerPageDefaultClass}` }>
         <button className={ `btn ${btnContextual} dropdown-toggle` }
           id='pageDropDown' data-toggle='dropdown'
           aria-expanded={ open }
@@ -52,6 +54,7 @@ SizePerPageDropDown.propTypes = {
 };
 SizePerPageDropDown.defaultProps = {
   open: false,
+  show: false,
   hidden: false,
   btnContextual: 'btn-default',
   variation: 'dropdown',