fix mode header of insert modal was broken when use bootstrap 4

Author: AllenFang

src/BootstrapTable.js

@@ -1248,6 +1248,7 @@ class BootstrapTable extends Component {
         <div className={ `react-bs-table-tool-bar ${ print ? '' : 'hidden-print' }` }>
           <ToolBar
             ref='toolbar'
+            version={ this.props.version }
             defaultSearch={ this.props.options.defaultSearch }
             clearSearch={ this.props.options.clearSearch }
             searchPosition={ this.props.options.searchPosition }

src/toolbar/InsertModal.js

@@ -74,6 +74,7 @@ export default class InsertModal extends Component {
         {
           headerComponent ||
           (<InsertModalHeader
+            version={ this.props.version }
             className='react-bs-table-inser-modal-header'
             onModalClose={ onModalClose }/>)
         }
@@ -93,6 +94,7 @@ export default class InsertModal extends Component {
   }
 }
 InsertModal.propTypes = {
+  version: PropTypes.string.isRequired,
   columns: PropTypes.array.isRequired,
   validateState: PropTypes.object.isRequired,
   ignoreEditable: PropTypes.bool,

src/toolbar/InsertModalHeader.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import Util from '../util';
 
 class InsertModalHeader extends Component {
 
@@ -9,9 +10,23 @@ class InsertModalHeader extends Component {
     onModalClose();
   }
 
+  renderContent(closeBtn) {
+    const { version, title: titleText } = this.props;
+    const title = <h4 key='title' className='modal-title'>{ titleText }</h4>;
+    if (Util.isBootstrap4(version)) {
+      return [ title, closeBtn ];
+    } else {
+      return (
+        <span>
+          { closeBtn }
+          { title }
+        </span>
+      );
+    }
+  }
+
   render() {
     const {
-      title,
       hideClose,
       className,
       children
@@ -25,12 +40,7 @@ class InsertModalHeader extends Component {
       </button>
     );
 
-    const content = children || (
-      <span>
-        { closeBtn }
-        <h4 className='modal-title'>{ title }</h4>
-      </span>
-    );
+    const content = children || this.renderContent(closeBtn);
 
     return (
       <div className={ `modal-header ${className}` }>
@@ -41,13 +51,15 @@ class InsertModalHeader extends Component {
 }
 
 InsertModalHeader.propTypes = {
+  version: PropTypes.string,
   className: PropTypes.string,
   title: PropTypes.string,
   onModalClose: PropTypes.func,
   hideClose: PropTypes.bool,
   beforeClose: PropTypes.func
 };
 InsertModalHeader.defaultProps = {
+  version: '3',
   className: '',
   title: 'Add Row',
   onModalClose: undefined,

src/toolbar/ToolBar.js

@@ -404,6 +404,7 @@ class ToolBar extends Component {
   renderInsertRowModal() {
     const validateState = this.state.validateState || {};
     const {
+      version,
       columns,
       ignoreEditable,
       insertModalHeader,
@@ -424,6 +425,7 @@ class ToolBar extends Component {
     if (!modal) {
       modal = (
         <InsertModal
+          version={ version }
           columns={ columns }
           validateState={ validateState }
           ignoreEditable={ ignoreEditable }
@@ -457,6 +459,7 @@ class ToolBar extends Component {
 }
 
 ToolBar.propTypes = {
+  version: PropTypes.string,
   onAddRow: PropTypes.func,
   onDropRow: PropTypes.func,
   onShowOnlySelected: PropTypes.func,