# Filter

## Props
| Name                       | Type                                                       | Default          | Required | Description                                                                                                                                                                                                                                                        |
| -------------------------- | ---------------------------------------------------------- | ---------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| baseClass                  | string                                                     | 'list-filter'    | false    | css class assigned to root div of this component                                                                                                                                                                                                                   |
| groupSelectionCB           | Function                                                   | () => false      | false    | callback function triggered when a value is changed in SimpleSelect                                                                                                                                                                                                |
| name                       | string                                                     | ''               | false    | `name` is prepended to the value of the prop `data-qe-uid`                                                                                                                                                                                                         |
| callback                   | Function                                                   |                  | true     | Callback that is triggered from `handlePropogation` which triggered from<br>the function in addFilter                                                                                                                                                              |
| addFilter                  | Function                                                   | null             | false    | a function that renders custom component that can run `handlePropogration`                                                                                                                                                                                         |
| isLoading                  | boolean                                                    | false            | false    | if true, the props, `isLoadingContent` will render which a custom loader<br>component                                                                                                                                                                              |
| isLoadingContent           | Function                                                   | () => 'LOADING'  | false    | A function that renders a custom loader component passed down                                                                                                                                                                                                      |
| predefined                 | Array&lt;{<br>  text: string,<br>  value: string,<br>}&gt; | []               | false    | An object array. Works with `<PredefinedFilterComponent />` to append<br>one of the array items to the search bar value. each item of the array<br>has following shape `{ text:string, value:string }`                                                             |
| addDatepicker              | boolean                                                    | false            | false    | if true, the component will render the date picker                                                                                                                                                                                                                 |
| datepickerCallback         | Function                                                   | () => null       | false    | callback function that runs when the date changes                                                                                                                                                                                                                  |
| clearInputButton           | Function                                                   | () => null       | false    | Function that renders the click input button. parameter in function contains<br>object with the following shape:  `{ onClick, isEmpty }`,<br>--<br>`onClick` runs the function `this.clearInput`<br>--<br>`isEmpty` holds the state, isEmpty from this comeponent, |
| filterTitle                | string                                                     | ''               | false    | Title the component                                                                                                                                                                                                                                                |
| initialText                | string                                                     | ''               | false    | set the initial state for `state.value`                                                                                                                                                                                                                            |
| searchInputPlaceholderText | string                                                     | ''               | false    | placeholder text for  input[name="filter_text"]                                                                                                                                                                                                                    |
| groupSelection             | Object&#91;&#93;                                           | null             | false    | options for SimpleSelect                                                                                                                                                                                                                                           |
| PredefinedFilterComponent  | any                                                        | PredefinedFilter | false    | this can be custom component that is passed down. the default value for<br>this prop is `<PredefinedFilter />`.                                                                                                                                                    |
| DateRangePickerComponent   | any                                                        | DateRangePicker  | false    | this can be custom component that is passed down. the default value for<br>this prop is `<DateRangePicker />`.                                                                                                                                                     |
