diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 41ef625..f3e502c 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -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 }
/>
);
}
-
- 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,
diff --git a/packages/react-bootstrap-table2/src/container.js b/packages/react-bootstrap-table2/src/container.js
index fe35f9f..d8d964a 100644
--- a/packages/react-bootstrap-table2/src/container.js
+++ b/packages/react-bootstrap-table2/src/container.js
@@ -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 (
+
+ );
+ }
+
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);
}
diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js
index 13c6727..a7bfc25 100644
--- a/packages/react-bootstrap-table2/src/header-cell.js
+++ b/packages/react-bootstrap-table2/src/header-cell.js
@@ -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';
diff --git a/packages/react-bootstrap-table2/src/sort-caret.js b/packages/react-bootstrap-table2/src/sort/caret.js
similarity index 93%
rename from packages/react-bootstrap-table2/src/sort-caret.js
rename to packages/react-bootstrap-table2/src/sort/caret.js
index 08a918a..cc64f9d 100644
--- a/packages/react-bootstrap-table2/src/sort-caret.js
+++ b/packages/react-bootstrap-table2/src/sort/caret.js
@@ -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', {
diff --git a/packages/react-bootstrap-table2/src/sort-symbol.js b/packages/react-bootstrap-table2/src/sort/symbol.js
similarity index 100%
rename from packages/react-bootstrap-table2/src/sort-symbol.js
rename to packages/react-bootstrap-table2/src/sort/symbol.js
diff --git a/packages/react-bootstrap-table2/src/sort/wrapper.js b/packages/react-bootstrap-table2/src/sort/wrapper.js
new file mode 100644
index 0000000..e9643eb
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/sort/wrapper.js
@@ -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;
diff --git a/packages/react-bootstrap-table2/test/header-cell.test.js b/packages/react-bootstrap-table2/test/header-cell.test.js
index 408b853..4e2dda5 100644
--- a/packages/react-bootstrap-table2/test/header-cell.test.js
+++ b/packages/react-bootstrap-table2/test/header-cell.test.js
@@ -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', () => {
diff --git a/packages/react-bootstrap-table2/test/sort-caret.test.js b/packages/react-bootstrap-table2/test/sort/caret.test.js
similarity index 92%
rename from packages/react-bootstrap-table2/test/sort-caret.test.js
rename to packages/react-bootstrap-table2/test/sort/caret.test.js
index 933525d..f2f5407 100644
--- a/packages/react-bootstrap-table2/test/sort-caret.test.js
+++ b/packages/react-bootstrap-table2/test/sort/caret.test.js
@@ -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;
diff --git a/packages/react-bootstrap-table2/test/sort-symbol.test.js b/packages/react-bootstrap-table2/test/sort/symbol.test.js
similarity index 91%
rename from packages/react-bootstrap-table2/test/sort-symbol.test.js
rename to packages/react-bootstrap-table2/test/sort/symbol.test.js
index d13346c..4e7cd07 100644
--- a/packages/react-bootstrap-table2/test/sort-symbol.test.js
+++ b/packages/react-bootstrap-table2/test/sort/symbol.test.js
@@ -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;
diff --git a/packages/react-bootstrap-table2/test/sort/wrapper.test.js b/packages/react-bootstrap-table2/test/sort/wrapper.test.js
new file mode 100644
index 0000000..e0a9ed4
--- /dev/null
+++ b/packages/react-bootstrap-table2/test/sort/wrapper.test.js
@@ -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(
+
+ );
+ });
+
+ 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(
+
+ );
+ 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);
+ });
+ });
+});