feat: add search reset icon in grants table

globalfund · Mar 21, 2023 · a1b8e17 · a1b8e17
1 parent 1785449
commit a1b8e17
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/src/app/components/ToolBoxPanel/components/filters/common/group/index.tsx b/src/app/components/ToolBoxPanel/components/filters/common/group/index.tsx
@@ -31,11 +31,6 @@ export function FilterGroup(props: FilterGroupCompProps) {
   });
 
   function onFilterRemove(option: string) {
-    console.log(
-      appliedFilters,
-      appliedFiltersChildren,
-      appliedFiltersGrandChildren
-    );
     let fAppliedFilterOption: FilterGroupOptionModel | undefined;
     props.options.every((o) => {
       if (o.value === option) {

diff --git a/src/app/modules/grants-module/components/Search/layout.tsx b/src/app/modules/grants-module/components/Search/layout.tsx
@@ -1,11 +1,13 @@
 import React from "react";
 import get from "lodash/get";
+import CloseIcon from "@material-ui/icons/Close";
+import { useCMSData } from "app/hooks/useCMSData";
 import { SearchIcon } from "app/assets/icons/Search";
+import IconButton from "@material-ui/core/IconButton";
 import {
   container,
   input,
 } from "app/modules/grants-module/components/Search/styles";
-import { useCMSData } from "app/hooks/useCMSData";
 
 interface SearchLayoutProps {
   value: string;
@@ -26,7 +28,18 @@ export function SearchLayout(props: SearchLayoutProps) {
           props.setValue(e.target.value)
         }
       />
-      <SearchIcon />
+      {props.value.length === 0 ? (
+        <SearchIcon />
+      ) : (
+        <IconButton
+          onClick={() => props.setValue("")}
+          css={`
+            padding: 0;
+          `}
+        >
+          <CloseIcon />
+        </IconButton>
+      )}
     </div>
   );
 }