feat(core): add filters clear

packages/core/src/components/CheckboxTree/CheckboxTree.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/* eslint-disable guard-for-in */
 import React, { useEffect, useReducer } from 'react';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import {
@@ -98,6 +99,7 @@ type Option = {
 export type CheckboxTreeProps = {
   subCategories: SubCategory[];
   label: string;
+  triggerReset?: boolean;
   onChange: (arg: any) => any;
 };
 
@@ -111,7 +113,8 @@ type checkOptionPayload = {
 type Action =
   | { type: 'checkOption'; payload: checkOptionPayload }
   | { type: 'checkCategory'; payload: string }
-  | { type: 'toggleCategory'; payload: string };
+  | { type: 'toggleCategory'; payload: string }
+  | { type: 'triggerReset' };
 
 const reducer = (
   state: IndexedObject<SubCategoryWithIndexedOptions>,
@@ -128,21 +131,32 @@ const reducer = (
         );
       });
     }
-    case 'checkCategory':
+    case 'checkCategory': {
       return produce(state, newState => {
         const category = newState[action.payload];
         const options = category.options;
         category.isChecked = !category.isChecked;
-        // eslint-disable-next-line guard-for-in
         for (const option in options) {
           options[option].isChecked = category.isChecked;
         }
       });
+    }
     case 'toggleCategory':
       return produce(state, newState => {
         const category = newState[action.payload];
         category.isOpen = !category.isOpen;
       });
+    case 'triggerReset': {
+      return produce(state, newState => {
+        for (const category in newState) {
+          newState[category].isChecked = false;
+          for (const option in newState[category].options) {
+            newState[category].options[option].isChecked =
+              newState[category].isChecked;
+          }
+        }
+      });
+    }
     default:
       return state;
   }
@@ -191,6 +205,10 @@ export const CheckboxTree = (props: CheckboxTreeProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state]);
 
+  useEffect(() => {
+    dispatch({ type: 'triggerReset' });
+  }, [props.triggerReset]);
+
   return (
     <div>
       <Typography variant="button">{props.label}</Typography>

packages/core/src/components/Select/Select.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   createStyles,
   makeStyles,
@@ -102,6 +102,7 @@ export type SelectProps = {
   label: string;
   placeholder?: string;
   onChange: (arg: any) => any;
+  triggerReset?: boolean;
 };
 
 export const SelectComponent = (props: SelectProps) => {
@@ -112,6 +113,10 @@ export const SelectComponent = (props: SelectProps) => {
   );
   const [canOpen, setCanOpen] = React.useState(false);
 
+  useEffect(() => {
+    setValue(multiple ? [] : "")
+  }, [props.triggerReset, multiple])
+
   const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
     setValue(event.target.value as any);
     onChange(event.target.value);

packages/core/src/components/Table/Filters.tsx

@@ -75,11 +75,13 @@ export const Filters = (props: Props) => {
 
   const [filters, setFilters] = useState(props.filters);
   const [selectedFilters, setSelectedFilters] = useState<SelectedFilters>({});
+  const [reset, triggerReset] = useState(false);
 
   // Trigger re-rendering
   const handleClick = () => {
     setSelectedFilters({});
     setFilters([...props.filters]);
+    triggerReset(el => !el)
   };
 
   useEffect(() => {
@@ -101,6 +103,7 @@ export const Filters = (props: Props) => {
           filters.map(filter =>
             filter.type === 'checkbox-tree' ? (
               <CheckboxTree
+                triggerReset={reset}
                 key={filter.element.label}
                 {...(filter.element as CheckboxTreeProps)}
                 onChange={el =>
@@ -126,6 +129,7 @@ export const Filters = (props: Props) => {
               />
             ) : (
               <Select
+                triggerReset={reset}
                 key={filter.element.label}
                 {...(filter.element as SelectProps)}
                 onChange={el =>