feat(Picky): Add getFilterValue prop

Callback added so the user can override the filter mechanism fix #118
Aidurber · Apr 18, 2019 · fb8fe77 · fb8fe77
1 parent 8846fb0
commit fb8fe77
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 10 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/docs/README.md b/docs/README.md
@@ -127,6 +127,7 @@ Picky.propTypes = {
   defaultFocusFilter: PropTypes.bool,
   className: PropTypes.string,
   renderList: PropTypes.func,
+  getFilterValue: PropTypes.func,
 };
 ```
 
@@ -158,6 +159,7 @@ 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.
 
 ## Custom rendering
 
@@ -178,6 +180,7 @@ You can render out custom items for the dropdown.
   multiple={true}
   includeSelectAll={true}
   includeFilter={true}
+  getFilterValue={this.getFilterValue}
   dropdownHeight={600}
   render={({
     style,
@@ -257,7 +260,7 @@ Gets called with the following properties:
 - `tabIndex`: number used for specifying tab index.
 - `multiple`: boolean true if multiselect.
 
-##= Render List
+### Render List
 
 ```javascript
 <Picky

diff --git a/index.d.ts b/index.d.ts
@@ -369,14 +369,17 @@ declare module 'react-picky' {
      */
     renderList?: (props: RenderListProps) => any;
 
-
     /**
      * Override the placeholder of the filter
      *
      * @type {string}
      * @memberof PickyProps
      */
-    filterPlaceholder?:string;
+    filterPlaceholder?: string;
+    /**
+     * 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;
   }
 
   export default class Picky extends React.PureComponent<PickyProps, any> {

diff --git a/src/Picky.js b/src/Picky.js
@@ -246,13 +246,13 @@ class Picky extends React.PureComponent {
    * @memberof Picky
    */
   onFilterChange(term) {
-      /**
+
+    /**
      * getFilterValue function 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
-       */
-
-      if (this.props.getFilterValue) {
-        this.props.getFilterValue(term)
-      }
+     */
+    if (this.props.getFilterValue) {
+      this.props.getFilterValue(term)
+    }
     if (!term.trim()) {
       return this.setState({
         filtered: false,