feat: add search-and-filter clear fun

bigcommerce · Dec 27, 2023 · 2eeb71b · 2eeb71b
1 parent 3480af4
commit 2eeb71b
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 39 deletions.
diff --git a/apps/storefront/src/components/filter/B3Filter.tsx b/apps/storefront/src/components/filter/B3Filter.tsx
@@ -109,15 +109,15 @@ function B3Filter<T, Y>(props: B3FilterProps<T, Y>) {
         >
           <Box
             sx={{
-              maxWidth: '24rem',
+              maxWidth: '29rem',
               flexBasis: '100%',
               display: 'flex',
               alignItems: 'center',
             }}
           >
             <B3FilterSearch
               handleChange={handleSearchChange}
-              w="70%"
+              w="60%"
               searchValue={searchValue}
             />
             {showB3FilterMoreIcon && (

diff --git a/apps/storefront/src/components/filter/B3FilterMore.tsx b/apps/storefront/src/components/filter/B3FilterMore.tsx
@@ -8,7 +8,7 @@ import {
 import { useForm } from 'react-hook-form'
 import { useB3Lang } from '@b3/lang'
 import FilterListIcon from '@mui/icons-material/FilterList'
-import { Badge, Box, IconButton, useTheme } from '@mui/material'
+import { Badge, Box, Button, IconButton, useTheme } from '@mui/material'
 
 import { B3CustomForm, B3Dialog, CustomButton } from '@/components'
 import { useMobile } from '@/hooks'
@@ -150,6 +150,32 @@ function B3FilterMore<T, Y>({
     pickerRef.current?.setClearPickerValue()
   }
 
+  const handleClearBtn = () => {
+    const pickerValues = startPicker?.isEnabled
+      ? {
+          startValue: '',
+          endValue: '',
+        }
+      : {}
+
+    handleClearFilters()
+    const data = getValues()
+
+    if (onChange) {
+      const submitData: any = {
+        ...pickerValues,
+        ...data,
+      }
+
+      handleFilterStatus(submitData)
+      onChange(submitData)
+
+      setCacheData({
+        ...data,
+      })
+    }
+  }
+
   return (
     <Box
       sx={{
@@ -159,49 +185,63 @@ function B3FilterMore<T, Y>({
     >
       {((fiterMoreInfo && fiterMoreInfo.length) || isShowMore) && (
         <Box
-          onClick={handleDialogClick}
           sx={{
-            mr: '-10px',
+            display: 'flex',
+            alignItems: 'center',
           }}
         >
-          {!isFiltering && (
-            <IconButton
-              aria-label="edit"
-              size="medium"
-              sx={{
-                color: customColor,
-                ':hover': {
-                  backgroundColor: getHoverColor('#FFFFFF', 0.1),
-                },
-              }}
-            >
-              <FilterListIcon />
-            </IconButton>
-          )}
-          {isFiltering && (
-            <IconButton
-              aria-label="edit"
-              size="medium"
-              sx={{
-                color: customColor,
-                ':hover': {
-                  backgroundColor: getHoverColor('#FFFFFF', 0.1),
-                },
-              }}
-            >
-              <Badge
-                badgeContent={filterCounter}
+          <Box onClick={handleDialogClick}>
+            {!isFiltering && (
+              <IconButton
+                aria-label="edit"
+                size="medium"
                 sx={{
-                  '& .MuiBadge-badge.MuiBadge-standard.MuiBadge-anchorOriginTopRight':
-                    {
-                      bgcolor: primaryColor,
-                      borderRadius: '50%',
-                    },
+                  color: customColor,
+                  ':hover': {
+                    backgroundColor: getHoverColor('#FFFFFF', 0.1),
+                  },
                 }}
               >
                 <FilterListIcon />
-              </Badge>
-            </IconButton>
+              </IconButton>
+            )}
+            {isFiltering && (
+              <IconButton
+                aria-label="edit"
+                size="medium"
+                sx={{
+                  color: customColor,
+                  ':hover': {
+                    backgroundColor: getHoverColor('#FFFFFF', 0.1),
+                  },
+                }}
+              >
+                <Badge
+                  badgeContent={filterCounter}
+                  sx={{
+                    '& .MuiBadge-badge.MuiBadge-standard.MuiBadge-anchorOriginTopRight':
+                      {
+                        bgcolor: primaryColor,
+                        borderRadius: '50%',
+                      },
+                  }}
+                >
+                  <FilterListIcon />
+                </Badge>
+              </IconButton>
+            )}
+          </Box>
+          {isFiltering && !isMobile && (
+            <Button
+              aria-label="clear-edit"
+              size="small"
+              sx={{
+                marginLeft: '5px',
+              }}
+              onClick={handleClearBtn}
+            >
+              {b3Lang('global.filter.clearFilters')}
+            </Button>
           )}
         </Box>
       )}

diff --git a/apps/storefront/src/components/filter/B3FilterSearch.tsx b/apps/storefront/src/components/filter/B3FilterSearch.tsx
@@ -1,5 +1,6 @@
 import { ChangeEvent, useEffect, useState } from 'react'
 import { useB3Lang } from '@b3/lang'
+import ClearIcon from '@mui/icons-material/Clear'
 import SearchIcon from '@mui/icons-material/Search'
 import { InputBase, Paper } from '@mui/material'
 
@@ -31,6 +32,10 @@ function B3FilterSearch({
     setSearch(e.target.value)
   }
 
+  const handleClearSearchValue = () => {
+    setSearch('')
+  }
+
   // debounce
   useEffect(() => {
     handleChange(search)
@@ -78,6 +83,16 @@ function B3FilterSearch({
         value={search}
         placeholder={placeholder}
         onChange={handleOnChange}
+        endAdornment={
+          search.length > 0 && (
+            <ClearIcon
+              sx={{
+                marginRight: '8px',
+              }}
+              onClick={handleClearSearchValue}
+            />
+          )
+        }
       />
     </Paper>
   )