@bigbinary/neeto-filters-frontend 2.7.3 → 2.8.0

package/README.md

@@ -17,7 +17,7 @@ yarn add @bigbinary/neetoui @bigbinary/neeto-icons axios@0.27.2 classnames@2.3.1
 ```
 ## Usage
 
-neeto-filters-frontend exports 2 components (`Filters` & `Bar`) and a function, `buildFiltersFromUrl()`.
+neeto-filters-frontend exports 2 components (`Filters` & `Bar`) and 2 functions (`buildFiltersFromURL()` & `buildSelectorsFromURL()`).
 ### 1. `Filters` component
 
 #### Props
@@ -26,11 +26,12 @@ neeto-filters-frontend exports 2 components (`Filters` & `Bar`) and a function,
 2.  **setIsOpen**: To trigger the isOpen state.
 3.  **columns**: The list of columns/fields that needs to be represented in the filters pane.
 4.  **onChange**: To specify the callback function that is triggered whenever a filter is applied or cleared. This function will get the  updated filters as argument.
-5.  **buttonProps**: To specify the props to be passed to the button component.
-6.  **paneProps**: To specify the props to be passed to the pane component.
-7.  **isSearchable**: To specify whether you need a search bar in filters pane to search through filter fields.
-8.  **className**: To specify classes to the Filters component.
-9. **keyword**: To specify the props related to searching.
+5. **onSelectorsChange**: To specify the callback function that is triggered whenever a selector value is changed. This function will get the updated selectors as argument.
+6.  **buttonProps**: To specify the props to be passed to the button component.
+7.  **paneProps**: To specify the props to be passed to the pane component.
+8.  **isSearchable**: To specify whether you need a search bar in filters pane to search through filter fields.
+9.  **className**: To specify classes to the Filters component.
+10. **keyword**: To specify the props related to searching.
 
 Here is an example of `keyword` prop:
 ```js
@@ -103,6 +104,31 @@ Then the node will be `address.line_1,line_2`. In such cases we need to pass thi
 - `values`: The list of label-value pair to be shown in dropdown, if the `type` provided is `single_option` or `multi_option`.
 - `showRuleSelector` : Boolean value, which determines whether to show a rule selector above the `text` , `number` and `decimal` type fields. `false` by default.
 - `hidden`: Boolean value, which determines to show or hide field from filter pane. `false ` by default.
+- `defaultValue`: The default value that should appear as chosen one in the filter fields.
+- `isClearable`: Boolean value which specifies whether the field can be cleared or not.
+
+- By `selectors` we mean the filter fields which doesn't have any relation (`node`) to a DB >table column.
+ - For example, consider a field in filter pane called `Group by`. We cannot provide a `node` to associate it with a column in DB table. Still it can provide an important value which can be used for  the computation as if by telling a means by which the records can be grouped after filtering.
+  - Fields without a `node`, among the ones passed as value to the `column` prop of `Filters` are >considered as selectors.
+  ```js
+  {
+    key:  "groupBy",
+    label:  "Group by",
+    type:  "single_option",
+    values: [
+      {
+        label: "Team",
+        value: "team"
+      },
+      {
+        label: "Location",
+        value: "location"
+      }
+    ],
+	}
+  ```
+  When user selects a value from this dropdown we get that value in the `selectors` state. This can be used for further computations outside the neeto-filters.
+
 
 ### 2. `Bar` component
 
@@ -113,6 +139,7 @@ Then the node will be `address.line_1,line_2`. In such cases we need to pass thi
 3.  **setIsPaneOpen**: To trigger the isOpen state.
 4.  **className**: To specify classes to the Bar component.
 5. **keyword**: To specify the props related to searching.
+6. **onSelectorsChange**: To specify the callback function that is triggered whenever a selector value is changed. This function will get the updated selectors as argument.
 
 All these props must be same as that passed to the `Filters` component.
 
@@ -120,11 +147,24 @@ All these props must be same as that passed to the `Filters` component.
 
 - This function takes a list as argument.
 - This list should contains all the filter columns/fields and the value passed to `keyword` prop of `Filters` and `Bar`.
-- It builds the filter payload from the URL search params. This function should be called for initizing the `filters` state.
+- It builds the filter payload from the URL search params. This function should be called for initializing the `filters` state.
 ```js
 const [filters, setFilters] = useState(() =>  buildFiltersFromURL([...SAMPLE_FILTER_COLUMNS, searchKeywordProps]));
 ```
 
+### 4. `buildSelectorsFromURL` function
+
+- By `selectors` we mean the filter fields which doesn't have any relation (`node`) to a DB table column.
+  - For example, consider a field in filter pane called `Group by`. We cannot provide a `node` to associate it with a column in DB table. Still it can provide an important value which can be used for  the computation as if by telling a means by which the records can be grouped after filtering.
+  - Fields without a `node`, among the ones passed as value to the `column` prop of `Filters` are considered as selectors.
+- This function takes a list as argument.
+- This list should contains all the filter columns/fields.
+- It builds the selectors' value from the URL search params. This function should be called for initializing the `selectors` state.
+- `selectors` will be an object with keys same as provided in filter fields and selected value as its value.
+```js
+const [selectors, setSelectors] = useState(() =>  buildSelectorsFromURL(FILTER_COLUMNS));
+```
+
 ## Development
 
 Install all the dependencies by executing the following command