From e7ccd4781733ec4fd120c12b6a55d0457bb96ff5 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 10 Feb 2018 17:42:44 +0800 Subject: [PATCH 1/2] implement sort events listener --- docs/columns.md | 14 ++++ docs/migration.md | 1 + .../react-bootstrap-table2/src/header-cell.js | 1 + .../src/sort/wrapper.js | 8 +++ .../test/sort/wrapper.test.js | 71 ++++++++++++++++--- 5 files changed, 84 insertions(+), 11 deletions(-) diff --git a/docs/columns.md b/docs/columns.md index cf546a8..b80c48a 100644 --- a/docs/columns.md +++ b/docs/columns.md @@ -12,6 +12,7 @@ Available properties in a column object: * [formatExtraData](#formatExtraData) * [sort](#sort) * [sortFunc](#sortFunc) +* [onSort](#onSort) * [classes](#classes) * [style](#style) * [title](#title) @@ -122,6 +123,19 @@ Enable the column sort via a `true` value given. ``` > The possible value of `order` argument is **`asc`** and **`desc`**. +## column.onSort - [Function] +`column.onSort` is an event listener for sort change event: + +```js +{ + // omit... + sort: true, + onSort: (field, order) => { + // .... + } +} +``` + ## column.classes - [String | Function] It's availabe to have custom class on table column: diff --git a/docs/migration.md b/docs/migration.md index 65d1040..ae009e4 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -60,6 +60,7 @@ Please see [Work with table sort](https://react-bootstrap-table.github.io/react- - [x] Default Sort - [x] Remote mode - [x] Custom the sorting header +- [x] Sort event listener - [ ] Custom the sort caret - [ ] Sort management - [ ] Multi sort diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js index d5dd47b..b6af21e 100644 --- a/packages/react-bootstrap-table2/src/header-cell.js +++ b/packages/react-bootstrap-table2/src/header-cell.js @@ -131,6 +131,7 @@ HeaderCell.propTypes = { attrs: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), sort: PropTypes.bool, sortFunc: PropTypes.func, + onSort: PropTypes.func, editable: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]), editCellStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), editCellClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), diff --git a/packages/react-bootstrap-table2/src/sort/wrapper.js b/packages/react-bootstrap-table2/src/sort/wrapper.js index 45414e3..90a9bb9 100644 --- a/packages/react-bootstrap-table2/src/sort/wrapper.js +++ b/packages/react-bootstrap-table2/src/sort/wrapper.js @@ -25,6 +25,10 @@ export default Base => if (column.length > 0) { store.setSort(column[0], order); + if (column[0].onSort) { + column[0].onSort(store.sortField, store.sortOrder); + } + if (this.isRemoteSort() || this.isRemotePagination()) { this.handleSortChange(); } else { @@ -48,6 +52,10 @@ export default Base => const { store } = this.props; store.setSort(column); + if (column.onSort) { + column.onSort(store.sortField, store.sortOrder); + } + if (this.isRemoteSort() || this.isRemotePagination()) { this.handleSortChange(); } else { diff --git a/packages/react-bootstrap-table2/test/sort/wrapper.test.js b/packages/react-bootstrap-table2/test/sort/wrapper.test.js index d8a3ce7..1c28b8c 100644 --- a/packages/react-bootstrap-table2/test/sort/wrapper.test.js +++ b/packages/react-bootstrap-table2/test/sort/wrapper.test.js @@ -10,16 +10,7 @@ import wrapperFactory from '../../src/sort/wrapper'; describe('SortWrapper', () => { let wrapper; - - const columns = [{ - dataField: 'id', - text: 'ID', - sort: true - }, { - dataField: 'name', - text: 'Name', - sort: true - }]; + let columns; const data = [{ id: 1, @@ -37,6 +28,15 @@ describe('SortWrapper', () => { const SortWrapper = wrapperFactory(BootstrapTable); beforeEach(() => { + columns = [{ + dataField: 'id', + text: 'ID', + sort: true + }, { + dataField: 'name', + text: 'Name', + sort: true + }]; wrapper = shallow( { describe('call handleSort function', () => { let sortBySpy; - const sortColumn = columns[0]; + let sortColumn; beforeEach(() => { + sortColumn = columns[0]; store = new Store(keyField); store.data = data; sortBySpy = sinon.spy(store, 'sortBy'); @@ -130,6 +131,32 @@ describe('SortWrapper', () => { expect(onTableChangeCB.calledOnce).toBeTruthy(); }); }); + + describe('when column.onSort prop is defined', () => { + const onSortCB = jest.fn(); + + beforeEach(() => { + columns[0].onSort = onSortCB; + wrapper = shallow( + + ); + wrapper.instance().handleSort(sortColumn); + }); + + it('should calling column.onSort function correctly', () => { + expect(onSortCB).toHaveBeenCalledTimes(1); + expect(onSortCB).toHaveBeenCalledWith(columns[0].dataField, Const.SORT_DESC); + + wrapper.instance().handleSort(sortColumn); + expect(onSortCB).toHaveBeenCalledTimes(2); + expect(onSortCB).toHaveBeenCalledWith(columns[0].dataField, Const.SORT_ASC); + }); + }); }); describe('when defaultSorted prop is defined', () => { @@ -161,6 +188,28 @@ describe('SortWrapper', () => { it('should update store.sortOrder correctly', () => { expect(store.sortOrder).toEqual(defaultSorted[0].order); }); + + describe('when column.onSort prop is defined', () => { + const onSortCB = jest.fn(); + + beforeEach(() => { + columns[1].onSort = onSortCB; + wrapper = shallow( + + ); + }); + + it('should calling column.onSort function correctly', () => { + expect(onSortCB).toHaveBeenCalledTimes(1); + expect(onSortCB).toHaveBeenCalledWith(defaultSorted[0].dataField, defaultSorted[0].order); + }); + }); }); describe('componentWillReceiveProps', () => { From ba24990994148e8221d656bd484c3e9e986843b1 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 10 Feb 2018 17:42:59 +0800 Subject: [PATCH 2/2] add story for sort event listener --- .../examples/sort/sort-events.js | 58 +++++++++++++++++++ .../stories/index.js | 2 + 2 files changed, 60 insertions(+) create mode 100644 packages/react-bootstrap-table2-example/examples/sort/sort-events.js diff --git a/packages/react-bootstrap-table2-example/examples/sort/sort-events.js b/packages/react-bootstrap-table2-example/examples/sort/sort-events.js new file mode 100644 index 0000000..06b406f --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/sort/sort-events.js @@ -0,0 +1,58 @@ +/* eslint no-console: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const products = productsGenerator(); + +const columns = [{ + dataField: 'id', + text: 'Product ID', + sort: true +}, { + dataField: 'name', + text: 'Product Name', + sort: true, + onSort: (field, order) => { + console.log(`Sort Field: ${field}, Sort Order: ${order}`); + } +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const defaultSorted = [{ + dataField: 'name', + order: 'desc' +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; + +const columns = [{ + dataField: 'id', + text: 'Product ID', + sort: true +}, { + dataField: 'name', + text: 'Product Name', + sort: true, + onSort: (field, order) => { + console.log(....); + } +}, { + dataField: 'price', + text: 'Product Price' +}]; + + +`; + +export default () => ( +
+ + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 39b5231..09bce47 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -56,6 +56,7 @@ import RowEventTable from 'examples/rows/row-event'; // table sort import EnableSortTable from 'examples/sort/enable-sort-table'; import DefaultSortTable from 'examples/sort/default-sort-table'; +import SortEvents from 'examples/sort/sort-events'; import CustomSortTable from 'examples/sort/custom-sort-table'; import HeaderSortingClassesTable from 'examples/sort/header-sorting-classes'; import HeaderSortingStyleTable from 'examples/sort/header-sorting-style'; @@ -167,6 +168,7 @@ storiesOf('Work on Rows', module) storiesOf('Sort Table', module) .add('Enable Sort', () => ) .add('Default Sort Table', () => ) + .add('Sort Events', () => ) .add('Custom Sort Fuction', () => ) .add('Custom Classes on Sorting Header Column', () => ) .add('Custom Style on Sorting Header Column', () => );