Merge branch 'issue-1130-pagination-page-size-dropdown' of https://github.com/JLoboRod/react-bootstrap-table into JLoboRod-issue-1130-pagination-page-size-dropdown

Author: AllenFang

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: String(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 }

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',