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

refine sort logic to wrapper

Browse Source 
* move sort relevant components to sort dir

* refine sort logic to wrapper
This commit is contained in:
Allen 2017-10-17 12:17:53 -05:00 committed by GitHub
parent 0ca6335d92
commit f52baa47ea
10 changed files with 140 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,6 @@ class BootstrapTable extends PropsBaseResolver(Component) {
super(props);
this.validateProps();
this.handleSort = this.handleSort.bind(this);
this.state = {
data: props.store.get()
};
@ -71,7 +70,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
columns={ columns }
sortField={ store.sortField }
sortOrder={ store.sortOrder }
onSort={ this.handleSort }
onSort={ this.props.onSort }
selectRow={ headerCellSelectionInfo }
/>
<Body
@ -89,17 +88,6 @@ class BootstrapTable extends PropsBaseResolver(Component) {
</div>
);
}
handleSort(column) {
const { store } = this.props;
store.sortBy(column);
this.setState(() => {
return {
data: store.get()
};
});
}
}
BootstrapTable.propTypes = {
@ -116,6 +104,7 @@ BootstrapTable.propTypes = {
PropTypes.node,
PropTypes.string
]),
onSort: PropTypes.func,
cellEdit: PropTypes.shape({
mode: PropTypes.oneOf([Const.CLICK_TO_CELL_EDIT, Const.DBCLICK_TO_CELL_EDIT]).isRequired,
onUpdate: PropTypes.func,

14
packages/react-bootstrap-table2/src/container.js vendored
View File

@ -4,6 +4,7 @@
/* eslint react/prop-types: 0 */
import React, { Component } from 'react';
import Store from './store/base';
import SortWrapper from './sort/wrapper';
import CellEditWrapper from './cell-edit/wrapper';
import RowSelectionWrapper from './row-selection/wrapper';
import _ from './utils';
@ -68,6 +69,12 @@ const withDataStore = (Base) => {
);
}
renderSort(elem) {
return (
<SortWrapper elem={ elem } store={ this.store } />
);
}
render() {
const baseProps = {
...this.props,
@ -76,6 +83,13 @@ const withDataStore = (Base) => {
let element = React.createElement(Base, baseProps);
// @TODO
// the logic of checking sort is enable or not should be placed in the props resolver..
// but currently, I've no idea to refactoring this
if (this.props.columns.filter(col => col.sort).length > 0) {
element = this.renderSort(element);
}
if (this.props.selectRow) {
element = this.renderRowSelection(element);
}

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

@ -4,8 +4,8 @@ import cs from 'classnames';
import PropTypes from 'prop-types';
import Const from './const';
import SortSymbol from './sort-symbol';
import SortCaret from './sort-caret';
import SortSymbol from './sort/symbol';
import SortCaret from './sort/caret';
import _ from './utils';

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

@ -2,7 +2,7 @@ import React from 'react';
import cs from 'classnames';
import PropTypes from 'prop-types';
import Const from './const';
import Const from '../const';
const SortCaret = ({ order }) => {
const orderClass = cs('react-bootstrap-table-sort-order', {

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

35
packages/react-bootstrap-table2/src/sort/wrapper.js vendored Normal file
View File

@ -0,0 +1,35 @@
/* eslint arrow-body-style: 0 */
/* eslint react/prop-types: 0 */
/* eslint no-return-assign: 0 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class SortWrapper extends Component {
constructor(props) {
super(props);
this.handleSort = this.handleSort.bind(this);
}
handleSort(column) {
const { store } = this.props;
store.sortBy(column);
this.table.setState({
data: store.get()
});
}
render() {
return React.cloneElement(this.props.elem, {
ref: node => this.table = node,
onSort: this.handleSort
});
}
}
SortWrapper.propTypes = {
elem: PropTypes.element.isRequired,
store: PropTypes.object.isRequired
};
export default SortWrapper;

4
packages/react-bootstrap-table2/test/header-cell.test.js
View File

@ -3,8 +3,8 @@ import sinon from 'sinon';
import { shallow } from 'enzyme';
import Const from '../src/const';
import SortCaret from '../src/sort-caret';
import SortSymbol from '../src/sort-symbol';
import SortCaret from '../src/sort/caret';
import SortSymbol from '../src/sort/symbol';
import HeaderCell from '../src/header-cell';
describe('HeaderCell', () => {

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

@ -1,8 +1,8 @@
import React from 'react';
import { shallow } from 'enzyme';
import Const from '../src/const';
import SortCaret from '../src/sort-caret';
import Const from '../../src/const';
import SortCaret from '../../src/sort/caret';
describe('SortCaret', () => {
let wrapper;

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

@ -1,7 +1,7 @@
import React from 'react';
import { shallow } from 'enzyme';
import SortSymbol from '../src/sort-symbol';
import SortSymbol from '../../src/sort/symbol';
describe('SortSymbol', () => {
let wrapper;

81
packages/react-bootstrap-table2/test/sort/wrapper.test.js Normal file
View File

@ -0,0 +1,81 @@
import 'jsdom-global/register';
import React from 'react';
import { shallow, mount } from 'enzyme';
import Const from '../../src/const';
import Store from '../../src/store/base';
import BootstrapTable from '../../src/bootstrap-table';
import SortWrapper from '../../src/sort/wrapper';
describe('SortWrapper', () => {
let wrapper;
let elem;
const columns = [{
dataField: 'id',
text: 'ID',
sort: true
}, {
dataField: 'name',
text: 'Name'
}];
const data = [{
id: 1,
name: 'A'
}, {
id: 2,
name: 'B'
}];
const keyField = 'id';
let store = new Store({ data, keyField });
beforeEach(() => {
elem = React.createElement(BootstrapTable, { data, columns, keyField, store });
wrapper = shallow(
<SortWrapper
elem={ elem }
store={ store }
/>
);
});
it('should render SortWrapper correctly', () => {
expect(wrapper.length).toBe(1);
expect(wrapper.find(BootstrapTable)).toBeDefined();
});
it('should inject correct props to elem', () => {
expect(wrapper.props().onSort).toBeDefined();
});
describe('call handleSort function', () => {
const sortColumn = columns[0];
beforeEach(() => {
store = new Store({ data, keyField });
wrapper = mount(
<SortWrapper
elem={ elem }
store={ store }
/>
);
wrapper.instance().handleSort(sortColumn);
});
it('should sorting data correctly', () => {
expect(wrapper.instance().table.state.data[0][keyField]).toEqual(data[1][keyField]);
});
it('should operating on store correctly', () => {
expect(store.sortOrder).toEqual(Const.SORT_DESC);
expect(store.sortField).toEqual(sortColumn.dataField);
wrapper.instance().handleSort(sortColumn); // sort same column again
expect(store.sortOrder).toEqual(Const.SORT_ASC);
expect(store.sortField).toEqual(sortColumn.dataField);
});
});
});