refine caseSensitive for filter (#201)

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',

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'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <h3>Product Name is case sensitive</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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', () => <TextFilter />)
   .add('Text Filter with Default Value', () => <TextFilterWithDefaultValue />)
   .add('Text Filter with Comparator', () => <TextFilterComparator />)
+  .add('Text Filter with Case Sensitive', () => <TextFilterCaseSensitive />)
   // add another filter type example right here.
   .add('Select Filter', () => <SelectFilter />)
   .add('Select Filter with Default Value', () => <SelectFilterWithDefaultValue />)

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
 });

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;

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.toLocaleUpperCase().includes(filterVal.toLocaleUpperCase());
   });
 
 export const filterByNumber = _ => (

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 = {