All the downstream wrapper for filter wrapper should checking props.isDataChange

This commit is contained in:
AllenFang
2017-12-13 21:48:52 +08:00
parent 297c5ad438
commit ba93a6ce9c
5 changed files with 80 additions and 16 deletions

View File

@@ -48,11 +48,16 @@ class PaginationWrapper extends Component {
componentWillReceiveProps(nextProps) {
let needNewState = false;
let { currPage, currSizePerPage } = this.state;
const { page, sizePerPage } = nextProps.pagination.options;
if (typeof page !== 'undefined') {
const { page, sizePerPage, pageStartIndex } = nextProps.pagination.options;
if (typeof page !== 'undefined') { // user defined page
currPage = page;
needNewState = true;
} else if (nextProps.isDataChanged) { // user didn't defined page but data change
currPage = typeof pageStartIndex !== 'undefined' ? pageStartIndex : Const.PAGE_START_INDEX;
needNewState = true;
}
if (typeof sizePerPage !== 'undefined') {
currSizePerPage = sizePerPage;
needNewState = true;

View File

@@ -100,29 +100,47 @@ describe('Wrapper', () => {
});
describe('componentWillReceiveProps', () => {
it('should setting currPage state correclt by options.page', () => {
props.pagination.options.page = 2;
instance.componentWillReceiveProps(props);
expect(instance.state.currPage).toEqual(props.pagination.options.page);
let nextProps;
beforeEach(() => {
nextProps = createTableProps();
});
it('should setting currPage state correctly by options.page', () => {
nextProps.pagination.options.page = 2;
instance.componentWillReceiveProps(nextProps);
expect(instance.state.currPage).toEqual(nextProps.pagination.options.page);
});
it('should not setting currPage state if options.page not existing', () => {
const { currPage } = instance.state;
instance.componentWillReceiveProps(props);
instance.componentWillReceiveProps(nextProps);
expect(instance.state.currPage).toBe(currPage);
});
it('should setting currSizePerPage state correclt by options.sizePerPage', () => {
props.pagination.options.sizePerPage = 20;
instance.componentWillReceiveProps(props);
expect(instance.state.currSizePerPage).toEqual(props.pagination.options.sizePerPage);
it('should setting currSizePerPage state correctly by options.sizePerPage', () => {
nextProps.pagination.options.sizePerPage = 20;
instance.componentWillReceiveProps(nextProps);
expect(instance.state.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
});
it('should not setting currSizePerPage state if options.sizePerPage not existing', () => {
const { currSizePerPage } = instance.state;
instance.componentWillReceiveProps(props);
instance.componentWillReceiveProps(nextProps);
expect(instance.state.currSizePerPage).toBe(currSizePerPage);
});
it('should setting currPage state when nextProps.isDataChanged is true', () => {
nextProps.isDataChanged = true;
instance.componentWillReceiveProps(nextProps);
expect(instance.state.currPage).toBe(Const.PAGE_START_INDEX);
});
it('should setting currPage state when nextProps.isDataChanged is true and options.pageStartIndex is existing', () => {
nextProps.isDataChanged = true;
nextProps.pagination.options.pageStartIndex = 0;
instance.componentWillReceiveProps(nextProps);
expect(instance.state.currPage).toBe(nextProps.pagination.options.pageStartIndex);
});
});
});

View File

@@ -26,6 +26,16 @@ class SortWrapper extends Component {
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.isDataChanged) {
const sortedColumn = nextProps.columns.find(
column => column.dataField === nextProps.store.sortField);
if (sortedColumn) {
nextProps.store.sortBy(sortedColumn, nextProps.store.sortOrder);
}
}
}
handleSort(column) {
const { store } = this.props;
store.sortBy(column);

View File

@@ -12,7 +12,6 @@ export default class Store {
this._sortField = undefined;
this._selected = [];
this._filtering = false;
this._isDataChanged = false;
}
edit(rowId, dataField, newValue) {
@@ -50,9 +49,6 @@ export default class Store {
get keyField() { return this._keyField; }
set keyField(keyField) { this._keyField = keyField; }
get isDataChanged() { return this._isDataChanged; }
set isDataChanged(isDataChanged) { this._isDataChanged = isDataChanged; }
get sortOrder() { return this._sortOrder; }
set sortOrder(sortOrder) { this._sortOrder = sortOrder; }

View File

@@ -1,5 +1,6 @@
import 'jsdom-global/register';
import React from 'react';
import sinon from 'sinon';
import { shallow, mount } from 'enzyme';
import Const from '../../src/const';
@@ -114,4 +115,38 @@ describe('SortWrapper', () => {
expect(store.sortOrder).toEqual(defaultSorted[0].order);
});
});
describe('componentWillReceiveProps', () => {
let nextProps;
beforeEach(() => {
nextProps = { columns, store };
store.sortField = columns[1].dataField;
store.sortOrder = Const.SORT_DESC;
});
describe('if nextProps.isDataChanged is true', () => {
beforeEach(() => {
nextProps.isDataChanged = true;
store.sortBy = sinon.stub();
});
it('should sorting again', () => {
wrapper.instance().componentWillReceiveProps(nextProps);
expect(store.sortBy.calledOnce).toBeTruthy();
});
});
describe('if nextProps.isDataChanged is false', () => {
beforeEach(() => {
nextProps.isDataChanged = false;
store.sortBy = sinon.stub();
});
it('should not sorting', () => {
wrapper.instance().componentWillReceiveProps(nextProps);
expect(store.sortBy.calledOnce).toBeFalsy();
});
});
});
});