refine advanced search filter

client/src/components/advancedSearch/Filter.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
 import {
   makeStyles,
   Theme,
@@ -12,10 +12,11 @@ import { FilterProps, ConditionData } from './Types';
 import { generateIdByHash } from '../../utils/Common';
 import CustomButton from '../customButton/CustomButton';
 
-const Filter = function Filter(props: FilterProps) {
+const Filter = forwardRef((props: FilterProps, ref) => {
   const {
     title = 'title',
     showTitle = true,
+    showTooltip = true,
     className = '',
     filterDisabled = false,
     tooltipPlacement = 'top',
@@ -245,6 +246,7 @@ const Filter = function Filter(props: FilterProps) {
     setInitConditions(flatConditions);
     setOpen(false);
   };
+  // Only reset current conditions. Former conditions are remained.
   const handleReset = () => {
     setFilteredFlatConditions([
       {
@@ -256,9 +258,21 @@ const Filter = function Filter(props: FilterProps) {
       },
     ]);
   };
+  // Reset all conditions(both current and former).
+  const handleHardReset = () => {
+    setInitConditions([]);
+    handleReset();
+  };
   const handleFallback = () => {
     setFilteredFlatConditions(initConditions);
   };
+  // Expose func
+  useImperativeHandle(ref, () => ({
+    // Expose handleHardReset
+    getReset() {
+      handleHardReset();
+    },
+  }));
 
   return (
     <>
@@ -271,7 +285,7 @@ const Filter = function Filter(props: FilterProps) {
           <FilterListIcon />
           {showTitle ? title : ''}
         </CustomButton>
-        {initConditions.length > 0 && (
+        {showTooltip && initConditions.length > 0 && (
           <Tooltip
             arrow
             interactive
@@ -304,7 +318,7 @@ const Filter = function Filter(props: FilterProps) {
       </div>
     </>
   );
-};
+});
 
 Filter.displayName = 'AdvancedFilter';
 

client/src/components/advancedSearch/Types.ts

@@ -69,8 +69,9 @@ export interface FilterProps {
   className?: string;
   title: string;
   showTitle?: boolean;
+  showTooltip?: boolean;
   filterDisabled?: boolean;
-  others?: object;
+  others?: { [key: string]: any };
   onSubmit: (data: any) => void;
   tooltipPlacement?: 'left' | 'right' | 'bottom' | 'top';
   fields: Field[];