From 0d64443b26249714dae16b5112e02f8a1817bf32 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Fri, 20 Jul 2018 17:24:39 +0800 Subject: [PATCH] fix sort caret broken on bootstrap4 --- .../react-bootstrap-table2-toolkit/context.js | 5 +- .../src/bootstrap-table.js | 2 + .../src/contexts/bootstrap.js | 5 ++ .../src/contexts/index.js | 25 ++++--- packages/react-bootstrap-table2/src/header.js | 7 +- .../react-bootstrap-table2/src/sort/caret.js | 18 ++++- .../react-bootstrap-table2/src/sort/symbol.js | 26 ++++--- .../style/react-bootstrap-table2.scss | 33 +++++++++ .../test/sort/caret.test.js | 68 ++++++++++++++----- .../test/sort/symbol.test.js | 17 ++++- 10 files changed, 161 insertions(+), 45 deletions(-) create mode 100644 packages/react-bootstrap-table2/src/contexts/bootstrap.js diff --git a/packages/react-bootstrap-table2-toolkit/context.js b/packages/react-bootstrap-table2-toolkit/context.js index 84027a3..4ae5e19 100644 --- a/packages/react-bootstrap-table2-toolkit/context.js +++ b/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) { diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index 770cf4a..9afaab0 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/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, diff --git a/packages/react-bootstrap-table2/src/contexts/bootstrap.js b/packages/react-bootstrap-table2/src/contexts/bootstrap.js new file mode 100644 index 0000000..c719d9b --- /dev/null +++ b/packages/react-bootstrap-table2/src/contexts/bootstrap.js @@ -0,0 +1,5 @@ +import React from 'react'; + +export const BootstrapContext = React.createContext({ + bootstrap4: false +}); diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js index bdc2402..63f959c 100644 --- a/packages/react-bootstrap-table2/src/contexts/index.js +++ b/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 ( - - - { - base - } - - + + + + { + base + } + + + ); } }; diff --git a/packages/react-bootstrap-table2/src/header.js b/packages/react-bootstrap-table2/src/header.js index 67568ea..4549343 100644 --- a/packages/react-bootstrap-table2/src/header.js +++ b/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 ( { const orderClass = cs('react-bootstrap-table-sort-order', { dropup: order === Const.SORT_ASC }); + return ( - - - + + { + ({ bootstrap4 }) => (bootstrap4 ? ( + + ) : ( + + + + )) + } + ); }; SortCaret.propTypes = { order: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]).isRequired }; + export default SortCaret; diff --git a/packages/react-bootstrap-table2/src/sort/symbol.js b/packages/react-bootstrap-table2/src/sort/symbol.js index ecaf324..76c7e8f 100644 --- a/packages/react-bootstrap-table2/src/sort/symbol.js +++ b/packages/react-bootstrap-table2/src/sort/symbol.js @@ -1,13 +1,23 @@ import React from 'react'; +import { BootstrapContext } from '../contexts/bootstrap'; const SortSymbol = () => ( - - - - - - - - ); + + { + ({ bootstrap4 }) => (bootstrap4 ? ( + + ) : ( + + + + + + + + + )) + } + +); export default SortSymbol; diff --git a/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss b/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss index 55a1a09..498b012 100644 --- a/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss +++ b/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; } diff --git a/packages/react-bootstrap-table2/test/sort/caret.test.js b/packages/react-bootstrap-table2/test/sort/caret.test.js index f2f5407..d524496 100644 --- a/packages/react-bootstrap-table2/test/sort/caret.test.js +++ b/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}`, () => { - beforeEach(() => { - wrapper = shallow( - ); + describe('when bootstrap4 context is false', () => { + describe(`when order prop is ${Const.SORT_ASC}`, () => { + beforeEach(() => { + wrapper = shallow(); + 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', () => { - 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); + describe(`when order prop is ${Const.SORT_DESC}`, () => { + beforeEach(() => { + wrapper = shallow(); + 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(0); + }); }); }); - describe(`when order prop is ${Const.SORT_DESC}`, () => { - beforeEach(() => { - wrapper = shallow( - ); + describe('when bootstrap4 context is true', () => { + describe(`when order prop is ${Const.SORT_ASC}`, () => { + beforeEach(() => { + wrapper = shallow(); + 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', () => { - 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}`, () => { + beforeEach(() => { + wrapper = shallow(); + 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-desc').length).toBe(1); + }); }); }); }); diff --git a/packages/react-bootstrap-table2/test/sort/symbol.test.js b/packages/react-bootstrap-table2/test/sort/symbol.test.js index 4e7cd07..3aa88e1 100644 --- a/packages/react-bootstrap-table2/test/sort/symbol.test.js +++ b/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(); + 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(); + 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); + }); + }); });