From 865be93ef729ca53b58d1bca90dd3a92f86cbc2e Mon Sep 17 00:00:00 2001 From: Allen Date: Sat, 10 Feb 2018 16:54:01 +0800 Subject: [PATCH] refine caseSensitive for filter (#201) --- .../column-filter/custom-text-filter.js | 4 +- .../text-filter-caseSensitive.js | 51 +++++++++++++++++++ .../stories/index.js | 2 + .../react-bootstrap-table2-filter/README.md | 1 + .../src/components/select.js | 7 ++- .../src/filter.js | 6 +-- .../test/filter.test.js | 14 +++++ 7 files changed, 78 insertions(+), 7 deletions(-) create mode 100644 packages/react-bootstrap-table2-example/examples/column-filter/text-filter-caseSensitive.js diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js index 10e97d8..e4be0a8 100644 --- a/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js +++ b/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js @@ -13,7 +13,7 @@ const columns = [{ }, { dataField: 'name', text: 'Product Name', - filter: textFilter({ caseSensitive: true }) + filter: textFilter() }, { dataField: 'price', text: 'Product Price', @@ -38,7 +38,7 @@ const columns = [{ }, { dataField: 'name', text: 'Product Name', - filter: textFilter({ caseSensitive: true }) + filter: textFilter() }, { dataField: 'price', text: 'Product Price', diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-caseSensitive.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-caseSensitive.js new file mode 100644 index 0000000..aa1f421 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-caseSensitive.js @@ -0,0 +1,51 @@ +import React from 'react'; +import BootstrapTable from 'react-bootstrap-table-next'; +import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const products = productsGenerator(8); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name', + filter: textFilter({ caseSensitive: true }) +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name', + filter: textFilter({ caseSensitive: true }) +}, { + dataField: 'price', + text: 'Product Price' +}]; + + +`; + +export default () => ( +
+

Product Name is case sensitive

+ + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index f4a000a..39b5231 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -37,6 +37,7 @@ import HeaderColumnAttrsTable from 'examples/header-columns/column-attrs-table'; import TextFilter from 'examples/column-filter/text-filter'; import TextFilterWithDefaultValue from 'examples/column-filter/text-filter-default-value'; import TextFilterComparator from 'examples/column-filter/text-filter-eq-comparator'; +import TextFilterCaseSensitive from 'examples/column-filter/text-filter-caseSensitive'; import CustomTextFilter from 'examples/column-filter/custom-text-filter'; import CustomFilterValue from 'examples/column-filter/custom-filter-value'; import SelectFilter from 'examples/column-filter/select-filter'; @@ -146,6 +147,7 @@ storiesOf('Column Filter', module) .add('Text Filter', () => ) .add('Text Filter with Default Value', () => ) .add('Text Filter with Comparator', () => ) + .add('Text Filter with Case Sensitive', () => ) // add another filter type example right here. .add('Select Filter', () => ) .add('Select Filter with Default Value', () => ) diff --git a/packages/react-bootstrap-table2-filter/README.md b/packages/react-bootstrap-table2-filter/README.md index f98ecc7..07561bf 100644 --- a/packages/react-bootstrap-table2-filter/README.md +++ b/packages/react-bootstrap-table2-filter/README.md @@ -59,6 +59,7 @@ const priceFilter = textFilter({ className: 'my-custom-text-filter', // custom classname on input defaultValue: 'test', // default filtering value comparator: Comparator.EQ, // default is Comparator.LIKE + caseSensitive: true, // default is false, and true will only work when comparator is LIKE style: { ... }, // your custom styles on input delay: 1000 // how long will trigger filtering after user typing, default is 500 ms }); diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js index 0374280..7e17afd 100644 --- a/packages/react-bootstrap-table2-filter/src/components/select.js +++ b/packages/react-bootstrap-table2-filter/src/components/select.js @@ -89,6 +89,7 @@ class SelectFilter extends Component { options, comparator, withoutEmptyOption, + caseSensitive, ...rest } = this.props; @@ -119,14 +120,16 @@ SelectFilter.propTypes = { style: PropTypes.object, className: PropTypes.string, withoutEmptyOption: PropTypes.bool, - defaultValue: PropTypes.any + defaultValue: PropTypes.any, + caseSensitive: PropTypes.bool }; SelectFilter.defaultProps = { defaultValue: '', className: '', withoutEmptyOption: false, - comparator: EQ + comparator: EQ, + caseSensitive: true }; export default SelectFilter; diff --git a/packages/react-bootstrap-table2-filter/src/filter.js b/packages/react-bootstrap-table2-filter/src/filter.js index 7ac043e..f166742 100644 --- a/packages/react-bootstrap-table2-filter/src/filter.js +++ b/packages/react-bootstrap-table2-filter/src/filter.js @@ -6,7 +6,7 @@ import { LIKE, EQ, NE, GT, GE, LT, LE } from './comparison'; export const filterByText = _ => ( data, dataField, - { filterVal, comparator = LIKE, caseSensitive }, + { filterVal = '', comparator = LIKE, caseSensitive }, customFilterValue ) => data.filter((row) => { @@ -19,9 +19,9 @@ export const filterByText = _ => ( return cellStr === filterVal; } if (caseSensitive) { - return cellStr.toLocaleUpperCase().includes(filterVal.toLocaleUpperCase()); + return cellStr.includes(filterVal); } - return cellStr.includes(filterVal); + return cellStr.toLocaleUpperCase().includes(filterVal.toLocaleUpperCase()); }); export const filterByNumber = _ => ( diff --git a/packages/react-bootstrap-table2-filter/test/filter.test.js b/packages/react-bootstrap-table2-filter/test/filter.test.js index 28be4a5..ae66a38 100644 --- a/packages/react-bootstrap-table2-filter/test/filter.test.js +++ b/packages/react-bootstrap-table2-filter/test/filter.test.js @@ -55,6 +55,20 @@ describe('filter', () => { }); }); + describe('when caseSensitive is true', () => { + it('should returning correct result', () => { + currFilters.name = { + filterVal: 'NAME', + caseSensitive: true, + filterType: FILTER_TYPE.TEXT + }; + + const result = filterFn(currFilters); + expect(result).toBeDefined(); + expect(result).toHaveLength(0); + }); + }); + describe(`when default comparator is ${EQ}`, () => { it('should returning correct result', () => { currFilters.name = {