diff --git a/packages/react-bootstrap-table2-filter/src/components/date.js b/packages/react-bootstrap-table2-filter/src/components/date.js index 8e31724..da751d2 100644 --- a/packages/react-bootstrap-table2-filter/src/components/date.js +++ b/packages/react-bootstrap-table2-filter/src/components/date.js @@ -36,7 +36,7 @@ class DateFilter extends Component { const comparator = this.dateFilterComparator.value; const date = this.inputDate.value; if (comparator && date) { - this.applyFilter(date, comparator); + this.applyFilter(date, comparator, true); } // export onFilter function to allow users to access @@ -103,7 +103,7 @@ class DateFilter extends Component { // instead of parsing an invalid Date. The filter function will interpret // null as an empty date field const date = value === '' ? null : new Date(value); - onFilter(column, FILTER_TYPE.DATE)({ date, comparator }); + onFilter(column, FILTER_TYPE.DATE, )({ date, comparator }); }; if (delay) { this.timeout = setTimeout(() => { execute(); }, delay); diff --git a/packages/react-bootstrap-table2-filter/src/components/number.js b/packages/react-bootstrap-table2-filter/src/components/number.js index 960aa5d..447eed2 100644 --- a/packages/react-bootstrap-table2-filter/src/components/number.js +++ b/packages/react-bootstrap-table2-filter/src/components/number.js @@ -36,7 +36,7 @@ class NumberFilter extends Component { const comparator = this.numberFilterComparator.value; const number = this.numberFilter.value; if (comparator && number) { - onFilter(column, FILTER_TYPE.NUMBER)({ number, comparator }); + onFilter(column, FILTER_TYPE.NUMBER, true)({ number, comparator }); } // export onFilter function to allow users to access diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js index 7c4d285..e505138 100644 --- a/packages/react-bootstrap-table2-filter/src/components/select.js +++ b/packages/react-bootstrap-table2-filter/src/components/select.js @@ -29,7 +29,7 @@ class SelectFilter extends Component { const value = this.selectInput.value; if (value && value !== '') { - onFilter(column, FILTER_TYPE.SELECT)(value); + onFilter(column, FILTER_TYPE.SELECT, true)(value); } // export onFilter function to allow users to access diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js index 3af8ae2..a17c3ea 100644 --- a/packages/react-bootstrap-table2-filter/src/components/text.js +++ b/packages/react-bootstrap-table2-filter/src/components/text.js @@ -23,7 +23,7 @@ class TextFilter extends Component { const defaultValue = this.input.value; if (defaultValue) { - onFilter(this.props.column, FILTER_TYPE.TEXT)(defaultValue); + onFilter(this.props.column, FILTER_TYPE.TEXT, true)(defaultValue); } // export onFilter function to allow users to access diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js index 1459b3f..790ce00 100644 --- a/packages/react-bootstrap-table2-filter/src/context.js +++ b/packages/react-bootstrap-table2-filter/src/context.js @@ -27,7 +27,13 @@ export default ( this.onExternalFilter = this.onExternalFilter.bind(this); } - onFilter(column, filterType) { + componentDidMount() { + if (isRemoteFiltering() && Object.keys(this.currFilters).length > 0) { + handleFilterChange(this.currFilters); + } + } + + onFilter(column, filterType, initialize = false) { return (filterVal) => { // watch out here if migration to context API, #334 const currFilters = Object.assign({}, this.currFilters); @@ -52,10 +58,9 @@ export default ( this.currFilters = currFilters; if (isRemoteFiltering()) { - handleFilterChange(currFilters); - // when remote filtering is enable, dont set currFilters state - // in the componentWillReceiveProps, - // it's the key point that we can know the filter is changed + if (!initialize) { + handleFilterChange(this.currFilters); + } return; } diff --git a/packages/react-bootstrap-table2-filter/test/components/date.test.js b/packages/react-bootstrap-table2-filter/test/components/date.test.js index 366a675..b421333 100644 --- a/packages/react-bootstrap-table2-filter/test/components/date.test.js +++ b/packages/react-bootstrap-table2-filter/test/components/date.test.js @@ -124,7 +124,7 @@ describe('Date Filter', () => { it('should do onFilter correctly when exported function was executed', () => { expect(onFilter).toHaveBeenCalledTimes(1); - expect(onFilter).toHaveBeenCalledWith(column, FILTER_TYPE.DATE); + expect(onFilter).toHaveBeenCalledWith(column, FILTER_TYPE.DATE, false); expect(onFilterFirstReturn).toHaveBeenCalledTimes(1); expect(onFilterFirstReturn).toHaveBeenCalledWith({ comparator, date }); }); @@ -148,7 +148,7 @@ describe('Date Filter', () => { it('should calling onFilter on componentDidMount', () => { expect(onFilter).toHaveBeenCalledTimes(1); - expect(onFilter).toHaveBeenCalledWith(column, FILTER_TYPE.DATE); + expect(onFilter).toHaveBeenCalledWith(column, FILTER_TYPE.DATE, true); expect(onFilterFirstReturn).toHaveBeenCalledTimes(1); // expect(onFilterFirstReturn).toHaveBeenCalledWith({ comparator, date }); }); diff --git a/packages/react-bootstrap-table2-filter/test/components/number.test.js b/packages/react-bootstrap-table2-filter/test/components/number.test.js index 3586ec4..1556dac 100644 --- a/packages/react-bootstrap-table2-filter/test/components/number.test.js +++ b/packages/react-bootstrap-table2-filter/test/components/number.test.js @@ -147,7 +147,7 @@ describe('Number Filter', () => { it('should calling onFilter on componentDidMount', () => { expect(onFilter.calledOnce).toBeTruthy(); - expect(onFilter.calledWith(column, FILTER_TYPE.NUMBER)).toBeTruthy(); + expect(onFilter.calledWith(column, FILTER_TYPE.NUMBER, true)).toBeTruthy(); expect(onFilterFirstReturn.calledOnce).toBeTruthy(); expect(onFilterFirstReturn.calledWith({ number: `${number}`, comparator })).toBeTruthy(); }); diff --git a/packages/react-bootstrap-table2-filter/test/components/select.test.js b/packages/react-bootstrap-table2-filter/test/components/select.test.js index 85f9686..80d30d7 100644 --- a/packages/react-bootstrap-table2-filter/test/components/select.test.js +++ b/packages/react-bootstrap-table2-filter/test/components/select.test.js @@ -91,7 +91,7 @@ describe('Select Filter', () => { it('should calling onFilter on componentDidMount', () => { expect(onFilter.calledOnce).toBeTruthy(); - expect(onFilter.calledWith(column, FILTER_TYPE.SELECT)).toBeTruthy(); + expect(onFilter.calledWith(column, FILTER_TYPE.SELECT, true)).toBeTruthy(); expect(onFilterFirstReturn.calledOnce).toBeTruthy(); expect(onFilterFirstReturn.calledWith(defaultValue)).toBeTruthy(); }); diff --git a/packages/react-bootstrap-table2-filter/test/components/text.test.js b/packages/react-bootstrap-table2-filter/test/components/text.test.js index 5a8d297..fbc849f 100644 --- a/packages/react-bootstrap-table2-filter/test/components/text.test.js +++ b/packages/react-bootstrap-table2-filter/test/components/text.test.js @@ -65,7 +65,7 @@ describe('Text Filter', () => { it('should calling onFilter on componentDidMount', () => { expect(onFilter.calledOnce).toBeTruthy(); - expect(onFilter.calledWith(column, FILTER_TYPE.TEXT)).toBeTruthy(); + expect(onFilter.calledWith(column, FILTER_TYPE.TEXT, true)).toBeTruthy(); expect(onFilterFirstReturn.calledOnce).toBeTruthy(); expect(onFilterFirstReturn.calledWith(defaultValue)).toBeTruthy(); }); diff --git a/packages/react-bootstrap-table2-filter/test/context.test.js b/packages/react-bootstrap-table2-filter/test/context.test.js index 4dd03d5..2dc2cb8 100644 --- a/packages/react-bootstrap-table2-filter/test/context.test.js +++ b/packages/react-bootstrap-table2-filter/test/context.test.js @@ -12,7 +12,6 @@ import { textFilter } from '../index'; describe('FilterContext', () => { let wrapper; - // let filter; let FilterContext; const data = [{ @@ -33,8 +32,6 @@ describe('FilterContext', () => { filter: textFilter() }]; - // const defaultFilter = {}; - const mockBase = jest.fn((props => ( { const handleFilterChange = jest.fn(); function shallowContext( - // customFilter = defaultFilter, enableRemote = false ) { mockBase.mockReset(); @@ -115,6 +111,45 @@ describe('FilterContext', () => { }); }); + describe('componentDidMount', () => { + describe('when remote filter is disabled', () => { + beforeEach(() => { + wrapper = shallow(shallowContext()); + wrapper.render(); + wrapper.instance().componentDidMount(); + }); + + it('should not call handleFilterChange', () => { + expect(handleFilterChange).toHaveBeenCalledTimes(0); + }); + }); + + describe('when remote filter is enable but currFilters is empty', () => { + beforeEach(() => { + wrapper = shallow(shallowContext(true)); + wrapper.render(); + wrapper.instance().componentDidMount(); + }); + + it('should not call handleFilterChange', () => { + expect(handleFilterChange).toHaveBeenCalledTimes(0); + }); + }); + + describe('when remote filter is enable and currFilters is not empty', () => { + beforeEach(() => { + wrapper = shallow(shallowContext(true)); + wrapper.instance().currFilters.price = { filterVal: 40, filterType: FILTER_TYPE.TEXT }; + }); + + it('should not call handleFilterChange', () => { + wrapper.instance().componentDidMount(); + expect(handleFilterChange).toHaveBeenCalledTimes(1); + expect(handleFilterChange).toHaveBeenCalledWith(wrapper.instance().currFilters); + }); + }); + }); + describe('onFilter', () => { let instance; describe('when filterVal is empty or undefined', () => { @@ -169,6 +204,25 @@ describe('FilterContext', () => { }); }); + describe('when remote filter is enabled but initialize argument is true', () => { + const filterVal = '3'; + + beforeEach(() => { + wrapper = shallow(shallowContext(true)); + wrapper.render(); + instance = wrapper.instance(); + instance.onFilter(columns[1], FILTER_TYPE.TEXT, true)(filterVal); + }); + + it('should correct currFilters', () => { + expect(Object.keys(instance.currFilters)).toHaveLength(1); + }); + + it('should not call handleFilterChange correctly', () => { + expect(handleFilterChange).toHaveBeenCalledTimes(0); + }); + }); + describe('combination', () => { beforeEach(() => { wrapper = shallow(shallowContext()); diff --git a/packages/react-bootstrap-table2/src/contexts/sort-context.js b/packages/react-bootstrap-table2/src/contexts/sort-context.js index d71dbf5..033d99a 100644 --- a/packages/react-bootstrap-table2/src/contexts/sort-context.js +++ b/packages/react-bootstrap-table2/src/contexts/sort-context.js @@ -38,15 +38,18 @@ export default ( if (sortColumn.onSort) { sortColumn.onSort(sortField, sortOrder); } - - if (isRemoteSort()) { - handleSortChange(sortField, sortOrder); - } } } this.state = { sortOrder, sortColumn }; } + componentDidMount() { + const { sortOrder, sortColumn } = this.state; + if (isRemoteSort() && sortOrder && sortColumn) { + handleSortChange(sortColumn.dataField, sortOrder); + } + } + handleSort = (column) => { const sortOrder = dataOperator.nextOrder(column, this.state, this.props.defaultSortDirection);