feat(Filter): Add case sensitive prop

Allow case sensitive filtering

Author: Aidurber

README.md

@@ -159,8 +159,8 @@ Picky.propTypes = {
 - `defaultFocusFilter` - If set to true, will focus the filter by default when opened.
 - `renderList` - Render prop for whole list, you can use this to add virtualization/windowing if necessary
 - `filterPlaceholder` - Override the filter placeholder. Defaults to 'Filter...'
-- `getFilterValue` -   Will provide the input value of filter to the picky dropdown, so that if we have a larger list of options then we can only supply the matching options based on this value.
-
+- `getFilterValue` - Will provide the input value of filter to the picky dropdown, so that if we have a larger list of options then we can only supply the matching options based on this value.
+- `caseSensitiveFilter` - If true options will be returned when they match case
 
 ## Custom rendering
 

dist/index.js

@@ -160,6 +160,7 @@ Picky.propTypes = {
 - `renderList` - Render prop for whole list, you can use this to add virtualization/windowing if necessary
 - `filterPlaceholder` - Override the filter placeholder. Defaults to 'Filter...'
 - `getFilterValue` - Will provide the input value of filter to the picky dropdown, so that if we have a larger list of options then we can only supply the matching options based on this value.
+- `caseSensitiveFilter` - If true options will be returned when they match case
 
 ## Custom rendering
 

docs/README.md

@@ -380,6 +380,10 @@ declare module 'react-picky' {
      * Will provide the input value of filter to the picky dropdown, so that if we have a larger list of options then we can only supply the matching options based on this value.
      */
     getFilterValue: (term: string) => any;
+    /**
+     *  If true options will be returned when they match case, defaults to false
+     */
+    caseSensitiveFilter?: boolean;
   }
 
   export default class Picky extends React.PureComponent<PickyProps, any> {

index.d.ts

@@ -13,7 +13,7 @@
     "pretest": "npm run build",
     "lint": "eslint src/**/*.js",
     "test": "cross-env NODE_ENV=test jest",
-    "test:watch": "cross-env NODE_ENV=test jest --watchAll",
+    "test:watch": "cross-env NODE_ENV=test jest --watch",
     "semantic-release": "semantic-release",
     "precommit": "npm run test"
   },

package.json

@@ -258,9 +258,13 @@ class Picky extends React.PureComponent {
     );
     const filteredOptions = this.props.options.filter(option => {
       if (isObject) {
-        return includes(option[this.props.labelKey], term);
+        return includes(
+          option[this.props.labelKey],
+          term,
+          this.props.caseSensitiveFilter
+        );
       }
-      return includes(option, term);
+      return includes(option, term, this.props.caseSensitiveFilter);
     });
     this.setState(
       {
@@ -494,6 +498,7 @@ Picky.propTypes = {
   filterPlaceholder: PropTypes.string,
   disabled: PropTypes.bool,
   getFilterValue: PropTypes.func,
+  caseSensitiveFilter: PropTypes.bool,
 };
 
 export default Picky;

src/Picky.js

@@ -1,4 +1,16 @@
-export default (str, term) =>
-  String(str)
-    .toLowerCase()
-    .indexOf(String(term).toLowerCase()) > -1;
+/**
+ * Check if a string contains a value
+ */
+function includes(str, term, caseSensitive) {
+  if (!caseSensitive) {
+    return (
+      String(str)
+        .toLowerCase()
+        .indexOf(String(term).toLowerCase()) > -1
+    );
+  } else {
+    return String(str).indexOf(String(term)) > -1;
+  }
+}
+
+export default includes;

src/lib/includes.js

@@ -494,6 +494,35 @@ describe('Picky', () => {
       expect(wrapper.state('filteredOptions')).toEqual([1]);
     });
 
+    it('should filter values when case sensitive', () => {
+      const options = [
+        { label: 'Item 1', value: 1 },
+        { label: 'item 2', value: 2 },
+        { label: 'item 3', value: 3 },
+        { label: 'Item 4', value: 4 },
+      ];
+      const wrapper = mount(
+        <Picky
+          options={options}
+          value={[]}
+          valueKey="value"
+          labelKey="label"
+          caseSensitiveFilter={true}
+          multiple={true}
+          filterDebounce={0}
+          open={true}
+          includeFilter={true}
+        />
+      );
+      const event = { target: { value: 'i' } };
+      expect(wrapper.state('filteredOptions')).toEqual([]);
+      wrapper.find(sel('picky__filter__input')).simulate('change', event);
+      expect(wrapper.state('filteredOptions')).toEqual([
+        { label: 'item 2', value: 2 },
+        { label: 'item 3', value: 3 },
+      ]);
+    });
+
     it('shouldnt filter if filter query is blank or empty string', () => {
       const wrapper = mount(
         <Picky
@@ -971,7 +1000,7 @@ describe('Picky', () => {
 
   it('should be disabled when disabled prop supplied', () => {
     const options = [1, 2];
-    const { getByTestId, rerender } = rtlRender(
+    const { getByTestId } = rtlRender(
       <Picky
         options={options}
         includeSelectAll
@@ -997,7 +1026,7 @@ describe('Picky', () => {
 
   it('should not have select all checked when there are no options', () => {
     const options = [];
-    const { getByTestId, debug } = rtlRender(
+    const { getByTestId } = rtlRender(
       <Picky
         options={options}
         includeSelectAll