mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
implement sort events listener
This commit is contained in:
parent
a0af964d76
commit
e7ccd47817
@ -12,6 +12,7 @@ Available properties in a column object:
|
|||||||
* [formatExtraData](#formatExtraData)
|
* [formatExtraData](#formatExtraData)
|
||||||
* [sort](#sort)
|
* [sort](#sort)
|
||||||
* [sortFunc](#sortFunc)
|
* [sortFunc](#sortFunc)
|
||||||
|
* [onSort](#onSort)
|
||||||
* [classes](#classes)
|
* [classes](#classes)
|
||||||
* [style](#style)
|
* [style](#style)
|
||||||
* [title](#title)
|
* [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`**.
|
> The possible value of `order` argument is **`asc`** and **`desc`**.
|
||||||
|
|
||||||
|
## <a name='sortFunc'>column.onSort - [Function]</a>
|
||||||
|
`column.onSort` is an event listener for sort change event:
|
||||||
|
|
||||||
|
```js
|
||||||
|
{
|
||||||
|
// omit...
|
||||||
|
sort: true,
|
||||||
|
onSort: (field, order) => {
|
||||||
|
// ....
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
## <a name='classes'>column.classes - [String | Function]</a>
|
## <a name='classes'>column.classes - [String | Function]</a>
|
||||||
It's availabe to have custom class on table column:
|
It's availabe to have custom class on table column:
|
||||||
|
|
||||||
|
|||||||
@ -60,6 +60,7 @@ Please see [Work with table sort](https://react-bootstrap-table.github.io/react-
|
|||||||
- [x] Default Sort
|
- [x] Default Sort
|
||||||
- [x] Remote mode
|
- [x] Remote mode
|
||||||
- [x] Custom the sorting header
|
- [x] Custom the sorting header
|
||||||
|
- [x] Sort event listener
|
||||||
- [ ] Custom the sort caret
|
- [ ] Custom the sort caret
|
||||||
- [ ] Sort management
|
- [ ] Sort management
|
||||||
- [ ] Multi sort
|
- [ ] Multi sort
|
||||||
|
|||||||
@ -131,6 +131,7 @@ HeaderCell.propTypes = {
|
|||||||
attrs: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
|
attrs: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
|
||||||
sort: PropTypes.bool,
|
sort: PropTypes.bool,
|
||||||
sortFunc: PropTypes.func,
|
sortFunc: PropTypes.func,
|
||||||
|
onSort: PropTypes.func,
|
||||||
editable: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
|
editable: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
|
||||||
editCellStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
|
editCellStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
|
||||||
editCellClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
editCellClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
||||||
|
|||||||
@ -25,6 +25,10 @@ export default Base =>
|
|||||||
if (column.length > 0) {
|
if (column.length > 0) {
|
||||||
store.setSort(column[0], order);
|
store.setSort(column[0], order);
|
||||||
|
|
||||||
|
if (column[0].onSort) {
|
||||||
|
column[0].onSort(store.sortField, store.sortOrder);
|
||||||
|
}
|
||||||
|
|
||||||
if (this.isRemoteSort() || this.isRemotePagination()) {
|
if (this.isRemoteSort() || this.isRemotePagination()) {
|
||||||
this.handleSortChange();
|
this.handleSortChange();
|
||||||
} else {
|
} else {
|
||||||
@ -48,6 +52,10 @@ export default Base =>
|
|||||||
const { store } = this.props;
|
const { store } = this.props;
|
||||||
store.setSort(column);
|
store.setSort(column);
|
||||||
|
|
||||||
|
if (column.onSort) {
|
||||||
|
column.onSort(store.sortField, store.sortOrder);
|
||||||
|
}
|
||||||
|
|
||||||
if (this.isRemoteSort() || this.isRemotePagination()) {
|
if (this.isRemoteSort() || this.isRemotePagination()) {
|
||||||
this.handleSortChange();
|
this.handleSortChange();
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@ -10,16 +10,7 @@ import wrapperFactory from '../../src/sort/wrapper';
|
|||||||
|
|
||||||
describe('SortWrapper', () => {
|
describe('SortWrapper', () => {
|
||||||
let wrapper;
|
let wrapper;
|
||||||
|
let columns;
|
||||||
const columns = [{
|
|
||||||
dataField: 'id',
|
|
||||||
text: 'ID',
|
|
||||||
sort: true
|
|
||||||
}, {
|
|
||||||
dataField: 'name',
|
|
||||||
text: 'Name',
|
|
||||||
sort: true
|
|
||||||
}];
|
|
||||||
|
|
||||||
const data = [{
|
const data = [{
|
||||||
id: 1,
|
id: 1,
|
||||||
@ -37,6 +28,15 @@ describe('SortWrapper', () => {
|
|||||||
const SortWrapper = wrapperFactory(BootstrapTable);
|
const SortWrapper = wrapperFactory(BootstrapTable);
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
columns = [{
|
||||||
|
dataField: 'id',
|
||||||
|
text: 'ID',
|
||||||
|
sort: true
|
||||||
|
}, {
|
||||||
|
dataField: 'name',
|
||||||
|
text: 'Name',
|
||||||
|
sort: true
|
||||||
|
}];
|
||||||
wrapper = shallow(
|
wrapper = shallow(
|
||||||
<SortWrapper
|
<SortWrapper
|
||||||
keyField={ keyField }
|
keyField={ keyField }
|
||||||
@ -58,9 +58,10 @@ describe('SortWrapper', () => {
|
|||||||
|
|
||||||
describe('call handleSort function', () => {
|
describe('call handleSort function', () => {
|
||||||
let sortBySpy;
|
let sortBySpy;
|
||||||
const sortColumn = columns[0];
|
let sortColumn;
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
sortColumn = columns[0];
|
||||||
store = new Store(keyField);
|
store = new Store(keyField);
|
||||||
store.data = data;
|
store.data = data;
|
||||||
sortBySpy = sinon.spy(store, 'sortBy');
|
sortBySpy = sinon.spy(store, 'sortBy');
|
||||||
@ -130,6 +131,32 @@ describe('SortWrapper', () => {
|
|||||||
expect(onTableChangeCB.calledOnce).toBeTruthy();
|
expect(onTableChangeCB.calledOnce).toBeTruthy();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('when column.onSort prop is defined', () => {
|
||||||
|
const onSortCB = jest.fn();
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
columns[0].onSort = onSortCB;
|
||||||
|
wrapper = shallow(
|
||||||
|
<SortWrapper
|
||||||
|
keyField={ keyField }
|
||||||
|
data={ data }
|
||||||
|
columns={ columns }
|
||||||
|
store={ store }
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
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', () => {
|
describe('when defaultSorted prop is defined', () => {
|
||||||
@ -161,6 +188,28 @@ describe('SortWrapper', () => {
|
|||||||
it('should update store.sortOrder correctly', () => {
|
it('should update store.sortOrder correctly', () => {
|
||||||
expect(store.sortOrder).toEqual(defaultSorted[0].order);
|
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(
|
||||||
|
<SortWrapper
|
||||||
|
keyField={ keyField }
|
||||||
|
data={ data }
|
||||||
|
columns={ columns }
|
||||||
|
store={ store }
|
||||||
|
defaultSorted={ defaultSorted }
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should calling column.onSort function correctly', () => {
|
||||||
|
expect(onSortCB).toHaveBeenCalledTimes(1);
|
||||||
|
expect(onSortCB).toHaveBeenCalledWith(defaultSorted[0].dataField, defaultSorted[0].order);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('componentWillReceiveProps', () => {
|
describe('componentWillReceiveProps', () => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user