fix sort caret broken on bootstrap4

packages/react-bootstrap-table2-toolkit/context.js

@@ -13,6 +13,7 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
     data: PropTypes.array.isRequired,
     columns: PropTypes.array.isRequired,
     children: PropTypes.node.isRequired,
+    bootstrap4: PropTypes.bool,
     search: PropTypes.oneOfType([
       PropTypes.bool,
       PropTypes.shape({
@@ -32,7 +33,8 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
 
   static defaultProps = {
     search: false,
-    exportCSV: false
+    exportCSV: false,
+    bootstrap4: false
   }
 
   constructor(props) {
@@ -66,6 +68,7 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
       keyField: this.props.keyField,
       columns: this.props.columns,
       data: this.props.data,
+      bootstrap4: this.props.bootstrap4,
       setDependencyModules: this.setDependencyModules
     };
     if (this.props.search) {

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

@@ -114,6 +114,7 @@ BootstrapTable.propTypes = {
   keyField: PropTypes.string.isRequired,
   data: PropTypes.array.isRequired,
   columns: PropTypes.array.isRequired,
+  bootstrap4: PropTypes.bool,
   remote: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
     pagination: PropTypes.bool
   })]),
@@ -184,6 +185,7 @@ BootstrapTable.propTypes = {
 };
 
 BootstrapTable.defaultProps = {
+  bootstrap4: false,
   remote: false,
   striped: false,
   bordered: true,

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

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const BootstrapContext = React.createContext({
+  bootstrap4: false
+});

packages/react-bootstrap-table2/src/contexts/index.js

@@ -7,6 +7,7 @@ import createSortContext from './sort-context';
 import createSelectionContext from './selection-context';
 import createRowExpandContext from './row-expand-context';
 import remoteResolver from '../props-resolver/remote-resolver';
+import { BootstrapContext } from './bootstrap';
 import dataOperator from '../store/operators';
 
 const withContext = Base =>
@@ -267,7 +268,7 @@ const withContext = Base =>
     }
 
     render() {
-      const { keyField, columns } = this.props;
+      const { keyField, columns, bootstrap4 } = this.props;
       const baseProps = { keyField, columns };
 
       let base = this.renderBase();
@@ -301,16 +302,18 @@ const withContext = Base =>
       }
 
       return (
-        <this.DataContext.Provider
+        <BootstrapContext.Provider value={ { bootstrap4 } }>
-          { ...baseProps }
+          <this.DataContext.Provider
-          data={ this.props.data }
+            { ...baseProps }
-        >
+            data={ this.props.data }
-          <this.DataContext.Consumer>
+          >
-            {
+            <this.DataContext.Consumer>
-              base
+              {
-            }
+                base
-          </this.DataContext.Consumer>
+              }
-        </this.DataContext.Provider>
+            </this.DataContext.Consumer>
+          </this.DataContext.Provider>
+        </BootstrapContext.Provider>
       );
     }
   };

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

@@ -19,7 +19,8 @@ const Header = (props) => {
     sortOrder,
     selectRow,
     onExternalFilter,
-    expandRow
+    expandRow,
+    bootstrap4
   } = props;
 
   return (
@@ -46,6 +47,7 @@ const Header = (props) => {
               return (
                 <HeaderCell
                   index={ i }
+                  bootstrap4={ bootstrap4 }
                   key={ column.dataField }
                   column={ column }
                   onSort={ onSort }
@@ -73,7 +75,8 @@ Header.propTypes = {
   selectRow: PropTypes.object,
   onExternalFilter: PropTypes.func,
   className: PropTypes.string,
-  expandRow: PropTypes.object
+  expandRow: PropTypes.object,
+  bootstrap4: PropTypes.bool
 };
 
 export default Header;

packages/react-bootstrap-table2/src/sort/caret.js

@@ -3,19 +3,31 @@ import cs from 'classnames';
 import PropTypes from 'prop-types';
 
 import Const from '../const';
+import { BootstrapContext } from '../contexts/bootstrap';
+
 
 const SortCaret = ({ order }) => {
   const orderClass = cs('react-bootstrap-table-sort-order', {
     dropup: order === Const.SORT_ASC
   });
+
   return (
-    <span className={ orderClass }>
+    <BootstrapContext.Consumer>
-      <span className="caret" />
+      {
-    </span>
+        ({ bootstrap4 }) => (bootstrap4 ? (
+          <span className={ `caret-4-${order}` } />
+        ) : (
+          <span className={ orderClass }>
+            <span className="caret" />
+          </span>
+        ))
+      }
+    </BootstrapContext.Consumer>
   );
 };
 
 SortCaret.propTypes = {
   order: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]).isRequired
 };
+
 export default SortCaret;

packages/react-bootstrap-table2/src/sort/symbol.js

@@ -1,13 +1,23 @@
 import React from 'react';
+import { BootstrapContext } from '../contexts/bootstrap';
 
 const SortSymbol = () => (
-  <span className="order">
+  <BootstrapContext.Consumer>
-    <span className="dropdown">
+    {
-      <span className="caret" />
+      ({ bootstrap4 }) => (bootstrap4 ? (
-    </span>
+        <span className="order-4" />
-    <span className="dropup">
+      ) : (
-      <span className="caret" />
+        <span className="order">
-    </span>
+          <span className="dropdown">
-  </span>);
+            <span className="caret" />
+          </span>
+          <span className="dropup">
+            <span className="caret" />
+          </span>
+        </span>
+      ))
+    }
+  </BootstrapContext.Consumer>
+);
 
 export default SortSymbol;

packages/react-bootstrap-table2/style/react-bootstrap-table2.scss

@@ -8,6 +8,7 @@
     cursor: pointer;
   }
 
+  // bootstrap 3 sort
   th .order > .dropdown > .caret {
     margin: 10px 0 10px 5px;
     color: #cccccc;
@@ -22,6 +23,38 @@
     margin: 10px 6.5px;
   }
 
+  // bootstrap 4 sort
+  th .order-4:before {
+    margin-left: 3.5px;
+    content: "\2191";
+    opacity: 0.4;
+  }
+
+  th .order-4:after {
+    content: "\2193";
+    opacity: 0.4;
+  }
+
+  th .caret-4-asc:before {
+    margin-left: 3.5px;
+    content: "\2191";
+  }
+
+  th .caret-4-asc:after {
+    content: "\2193";
+    opacity: 0.4;
+  }
+
+  th .caret-4-desc:before {
+    margin-left: 3.5px;
+    content: "\2191";
+    opacity: 0.4;
+  }
+
+  th .caret-4-desc:after {
+    content: "\2193";
+  }
+
   th[data-row-selection] {
     width: 30px;
   }

packages/react-bootstrap-table2/test/sort/caret.test.js

@@ -7,31 +7,63 @@ import SortCaret from '../../src/sort/caret';
 describe('SortCaret', () => {
   let wrapper;
 
-  describe(`when order prop is ${Const.SORT_ASC}`, () => {
+  describe('when bootstrap4 context is false', () => {
-    beforeEach(() => {
+    describe(`when order prop is ${Const.SORT_ASC}`, () => {
-      wrapper = shallow(
+      beforeEach(() => {
-        <SortCaret order={ Const.SORT_ASC } />);
+        wrapper = shallow(<SortCaret order={ Const.SORT_ASC } />);
+        const Children = wrapper.props().children({ bootstrap4: false });
+        wrapper = shallow(Children);
+      });
+
+      it('should render caret correctly', () => {
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.find('span').length).toBe(2);
+        expect(wrapper.find('.caret').length).toBe(1);
+        expect(wrapper.find('.dropup').length).toBe(1);
+      });
     });
 
-    it('should render caret correctly', () => {
+    describe(`when order prop is ${Const.SORT_DESC}`, () => {
-      expect(wrapper.length).toBe(1);
+      beforeEach(() => {
-      expect(wrapper.find('span').length).toBe(2);
+        wrapper = shallow(<SortCaret order={ Const.SORT_DESC } />);
-      expect(wrapper.find('.caret').length).toBe(1);
+        const Children = wrapper.props().children({ bootstrap4: false });
-      expect(wrapper.find('.dropup').length).toBe(1);
+        wrapper = shallow(Children);
+      });
+
+      it('should render caret correctly', () => {
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.find('span').length).toBe(2);
+        expect(wrapper.find('.caret').length).toBe(1);
+        expect(wrapper.find('.dropup').length).toBe(0);
+      });
     });
   });
 
-  describe(`when order prop is ${Const.SORT_DESC}`, () => {
+  describe('when bootstrap4 context is true', () => {
-    beforeEach(() => {
+    describe(`when order prop is ${Const.SORT_ASC}`, () => {
-      wrapper = shallow(
+      beforeEach(() => {
-        <SortCaret order={ Const.SORT_DESC } />);
+        wrapper = shallow(<SortCaret order={ Const.SORT_ASC } />);
+        const Children = wrapper.props().children({ bootstrap4: true });
+        wrapper = shallow(Children);
+      });
+
+      it('should render caret correctly', () => {
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.find('.caret-4-asc').length).toBe(1);
+      });
     });
 
-    it('should render caret correctly', () => {
+    describe(`when order prop is ${Const.SORT_DESC}`, () => {
-      expect(wrapper.length).toBe(1);
+      beforeEach(() => {
-      expect(wrapper.find('span').length).toBe(2);
+        wrapper = shallow(<SortCaret order={ Const.SORT_DESC } />);
-      expect(wrapper.find('.caret').length).toBe(1);
+        const Children = wrapper.props().children({ bootstrap4: true });
-      expect(wrapper.find('.dropup').length).toBe(0);
+        wrapper = shallow(Children);
+      });
+
+      it('should render caret correctly', () => {
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.find('.caret-4-desc').length).toBe(1);
+      });
     });
   });
 });

packages/react-bootstrap-table2/test/sort/symbol.test.js

@@ -6,8 +6,9 @@ import SortSymbol from '../../src/sort/symbol';
 describe('SortSymbol', () => {
   let wrapper;
   beforeEach(() => {
-    wrapper = shallow(
+    wrapper = shallow(<SortSymbol />);
-      <SortSymbol />);
+    const Children = wrapper.props().children({ bootstrap4: false });
+    wrapper = shallow(Children);
   });
   it('should render sort symbol correctly', () => {
     expect(wrapper.length).toBe(1);
@@ -16,4 +17,16 @@ describe('SortSymbol', () => {
     expect(wrapper.find('.dropdown').length).toBe(1);
     expect(wrapper.find('.dropup').length).toBe(1);
   });
+
+  describe('if bootstrap4 prop is true', () => {
+    beforeEach(() => {
+      wrapper = shallow(<SortSymbol />);
+      const Children = wrapper.props().children({ bootstrap4: true });
+      wrapper = shallow(Children);
+    });
+    it('should render sort symbol correctly', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.find('.order-4').length).toBe(1);
+    });
+  });
 });