From f54c1f77b41720953afbb0476ea1a52700f8f95e Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Wed, 4 Apr 2018 15:39:23 +0800 Subject: [PATCH] display filter condition correctly and make sure text filter to be String --- .../programmatically-select-filter.js | 8 ++-- .../programmatically-text-filter.js | 4 +- .../src/components/number.js | 3 ++ .../src/components/select.js | 2 + .../src/filter.js | 44 +++++++++++-------- .../src/wrapper.js | 1 + 6 files changed, 38 insertions(+), 24 deletions(-) diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js index 96f00de..d368af5 100644 --- a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js +++ b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js @@ -22,7 +22,7 @@ const columns = [{ text: 'Product Name' }, { dataField: 'quality', - text: 'Product Quailty', + text: 'Product Quality', formatter: cell => selectOptions[cell], filter: selectFilter({ options: selectOptions, @@ -34,7 +34,7 @@ const columns = [{ }]; const handleClick = () => { - qualityFilter('0'); + qualityFilter(0); }; const sourceCode = `\ @@ -57,7 +57,7 @@ const columns = [{ text: 'Product Name' }, { dataField: 'quality', - text: 'Product Quailty', + text: 'Product Quality', formatter: cell => selectOptions[cell], filter: selectFilter({ options: selectOptions, @@ -69,7 +69,7 @@ const columns = [{ }]; const handleClick = () => { - qualityFilter('0'); + qualityFilter(0); }; export default () => ( diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js index 2db8698..f1080c0 100644 --- a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js +++ b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js @@ -27,7 +27,7 @@ const columns = [{ }]; const handleClick = () => { - nameFilter('0'); + nameFilter(0); }; const sourceCode = `\ @@ -55,7 +55,7 @@ const columns = [{ }]; const handleClick = () => { - nameFilter('0'); + nameFilter(0); }; export default () => ( diff --git a/packages/react-bootstrap-table2-filter/src/components/number.js b/packages/react-bootstrap-table2-filter/src/components/number.js index c2d07ce..ebf55e8 100644 --- a/packages/react-bootstrap-table2-filter/src/components/number.js +++ b/packages/react-bootstrap-table2-filter/src/components/number.js @@ -42,6 +42,9 @@ class NumberFilter extends Component { if (getFilter) { getFilter((filterVal) => { this.setState(() => ({ isSelected: (filterVal !== '') })); + this.numberFilterComparator.value = filterVal.comparator; + this.numberFilter.value = filterVal.number; + onFilter(column, FILTER_TYPE.NUMBER)({ number: filterVal.number, comparator: filterVal.comparator diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js index 91ab934..ba2d306 100644 --- a/packages/react-bootstrap-table2-filter/src/components/select.js +++ b/packages/react-bootstrap-table2-filter/src/components/select.js @@ -36,6 +36,8 @@ class SelectFilter extends Component { if (getFilter) { getFilter((filterVal) => { this.setState(() => ({ isSelected: filterVal !== '' })); + this.selectInput.value = filterVal; + onFilter(column, FILTER_TYPE.SELECT)(filterVal); }); } diff --git a/packages/react-bootstrap-table2-filter/src/filter.js b/packages/react-bootstrap-table2-filter/src/filter.js index e0d7a45..9f7812c 100644 --- a/packages/react-bootstrap-table2-filter/src/filter.js +++ b/packages/react-bootstrap-table2-filter/src/filter.js @@ -6,30 +6,37 @@ import { LIKE, EQ, NE, GT, GE, LT, LE } from './comparison'; export const filterByText = _ => ( data, dataField, - { filterVal = '', comparator = LIKE, caseSensitive }, + { filterVal: userInput = '', comparator = LIKE, caseSensitive }, customFilterValue -) => - data.filter((row) => { - let cell = _.get(row, dataField); - if (customFilterValue) { - cell = customFilterValue(cell, row); - } - const cellStr = _.isDefined(cell) ? cell.toString() : ''; - if (comparator === EQ) { - return cellStr === filterVal; - } - if (caseSensitive) { - return cellStr.includes(filterVal); - } - return cellStr.toLocaleUpperCase().indexOf(filterVal.toLocaleUpperCase()) !== -1; - }); +) => { + // make sure filter value to be a string + const filterVal = userInput.toString(); + + return ( + data.filter((row) => { + let cell = _.get(row, dataField); + if (customFilterValue) { + cell = customFilterValue(cell, row); + } + const cellStr = _.isDefined(cell) ? cell.toString() : ''; + if (comparator === EQ) { + return cellStr === filterVal; + } + if (caseSensitive) { + return cellStr.includes(filterVal); + } + + return cellStr.toLocaleUpperCase().indexOf(filterVal.toLocaleUpperCase()) !== -1; + }) + ); +}; export const filterByNumber = _ => ( data, dataField, { filterVal: { comparator, number } }, customFilterValue -) => +) => ( data.filter((row) => { if (number === '' || !comparator) return true; let valid = true; @@ -81,7 +88,8 @@ export const filterByNumber = _ => ( } } return valid; - }); + }) +); export const filterFactory = _ => (filterType) => { let filterFn; diff --git a/packages/react-bootstrap-table2-filter/src/wrapper.js b/packages/react-bootstrap-table2-filter/src/wrapper.js index 9a64eb1..f13e615 100644 --- a/packages/react-bootstrap-table2-filter/src/wrapper.js +++ b/packages/react-bootstrap-table2-filter/src/wrapper.js @@ -63,6 +63,7 @@ export default (Base, { } = filter.props; currFilters[dataField] = { filterVal, filterType, comparator, caseSensitive }; } + store.filters = currFilters; if (this.isRemoteFiltering() || this.isRemotePagination()) {