vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2025-10-16 11:55:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix sort caret broken on bootstrap4

Browse Source
This commit is contained in:
AllenFang 2018-07-20 17:24:39 +08:00
parent 7919a4001d
commit 0d64443b26
10 changed files with 161 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/react-bootstrap-table2-toolkit/context.js vendored
View File

@ -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) {

2
packages/react-bootstrap-table2/src/bootstrap-table.js vendored
View File

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

5
packages/react-bootstrap-table2/src/contexts/bootstrap.js vendored Normal file
View File

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

25
packages/react-bootstrap-table2/src/contexts/index.js vendored
View File

@ -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
{ ...baseProps }
data={ this.props.data }
>
<this.DataContext.Consumer>
{
base
}
</this.DataContext.Consumer>
</this.DataContext.Provider>
<BootstrapContext.Provider value={ { bootstrap4 } }>
<this.DataContext.Provider
{ ...baseProps }
data={ this.props.data }
>
<this.DataContext.Consumer>
{
base
}
</this.DataContext.Consumer>
</this.DataContext.Provider>
</BootstrapContext.Provider>
);
}
};

7
packages/react-bootstrap-table2/src/header.js vendored
View File

@ -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;

18
packages/react-bootstrap-table2/src/sort/caret.js vendored
View File

@ -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 }>
<span className="caret" />
</span>
<BootstrapContext.Consumer>
{
({ 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;

26
packages/react-bootstrap-table2/src/sort/symbol.js vendored
View File

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

33
packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
View File

@ -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;
}

68
packages/react-bootstrap-table2/test/sort/caret.test.js
View File

@ -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(
<SortCaret order={ Const.SORT_ASC } />);
describe('when bootstrap4 context is false', () => {
describe(`when order prop is ${Const.SORT_ASC}`, () => {
beforeEach(() => {
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', () => {
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(<SortCaret order={ Const.SORT_DESC } />);
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(
<SortCaret order={ Const.SORT_DESC } />);
describe('when bootstrap4 context is true', () => {
describe(`when order prop is ${Const.SORT_ASC}`, () => {
beforeEach(() => {
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', () => {
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(<SortCaret order={ Const.SORT_DESC } />);
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);
});
});
});
});

17
packages/react-bootstrap-table2/test/sort/symbol.test.js
View File

@ -6,8 +6,9 @@ import SortSymbol from '../../src/sort/symbol';
describe('SortSymbol', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(
<SortSymbol />);
wrapper = shallow(<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);
});
});
});