feat: Add clean input button

cozy · Dec 29, 2022 · 9b4aa22 · 9b4aa22
1 parent 09563c1
commit 9b4aa22
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 5 deletions.
diff --git a/src/drive/web/modules/search/components/BarSearchAutosuggest.jsx b/src/drive/web/modules/search/components/BarSearchAutosuggest.jsx
@@ -40,6 +40,11 @@ const BarSearchAutosuggest = ({ t }) => {
     clearSuggestions()
   }
 
+  const handleCleanInput = () => {
+    clearSuggestions()
+    setInput('')
+  }
+
   const onSuggestionSelected = async (event, { suggestion }) => {
     await openOnSelect(client, suggestion.onSelect)
     clearSuggestions()
@@ -64,7 +69,12 @@ const BarSearchAutosuggest = ({ t }) => {
   }
 
   const renderInputComponent = inputProps => (
-    <BarSearchInputGroup isBusy={isBusy} isFocus={focused}>
+    <BarSearchInputGroup
+      isBusy={isBusy}
+      isFocus={focused}
+      isInputNotEmpty={input !== ''}
+      onClean={handleCleanInput}
+    >
       <input {...inputProps} />
     </BarSearchInputGroup>
   )

diff --git a/src/drive/web/modules/search/components/BarSearchInputGroup.jsx b/src/drive/web/modules/search/components/BarSearchInputGroup.jsx
@@ -2,13 +2,21 @@ import React from 'react'
 import cx from 'classnames'
 
 import InputGroup from 'cozy-ui/transpiled/react/InputGroup'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Magnifier from 'cozy-ui/transpiled/react/Icons/Magnifier'
 import Spinner from 'cozy-ui/transpiled/react/Icons/Spinner'
+import CrossCircleIcon from 'cozy-ui/transpiled/react/Icons/CrossCircle'
 
 import styles from 'drive/web/modules/search/components/styles.styl'
 
-const BarSearchInputGroup = ({ children, isBusy, isFocus }) => {
+const BarSearchInputGroup = ({
+  children,
+  isBusy,
+  isFocus,
+  onClean,
+  isInputNotEmpty
+}) => {
   return (
     <InputGroup
       fullwidth={true}
@@ -23,6 +31,17 @@ const BarSearchInputGroup = ({ children, isBusy, isFocus }) => {
           <Icon icon={Magnifier} color="#95999D" />
         )
       }
+      append={
+        isInputNotEmpty ? (
+          <IconButton
+            size="medium"
+            onClick={onClean}
+            className={styles['bar-search-input-group-clean-button']}
+          >
+            <Icon icon={CrossCircleIcon} />
+          </IconButton>
+        ) : null
+      }
     >
       {children}
     </InputGroup>

diff --git a/src/drive/web/modules/search/components/styles.styl b/src/drive/web/modules/search/components/styles.styl
@@ -62,3 +62,6 @@
                 max-width 100%
                 height 100%
                 padding .5625em 1em .5625em .625em
+
+            .bar-search-input-group-clean-button
+                padding 11px
diff --git a/src/drive/web/modules/views/Search/SearchView.jsx b/src/drive/web/modules/views/Search/SearchView.jsx
@@ -19,8 +19,14 @@ import SearchEmpty from './components/SearchEmpty'
 
 const SearchView = () => {
   const { t } = useI18n()
-  const { isBusy, suggestions, fetchSuggestions, hasSuggestions, query } =
-    useSearch()
+  const {
+    isBusy,
+    suggestions,
+    fetchSuggestions,
+    clearSuggestions,
+    hasSuggestions,
+    query
+  } = useSearch()
   const { router } = useRouter()
   const client = useClient()
   const { isMobile } = useBreakpoints()
@@ -43,6 +49,11 @@ const SearchView = () => {
     [client]
   )
 
+  const handleCleanInput = () => {
+    clearSuggestions()
+    setInput('')
+  }
+
   const isSearchEmpty = query !== '' && !hasSuggestions && !isBusy
 
   return (
@@ -60,7 +71,10 @@ const SearchView = () => {
           )}
           role="search"
         >
-          <BarSearchInputGroup>
+          <BarSearchInputGroup
+            isInputNotEmpty={input !== ''}
+            onClean={handleCleanInput}
+          >
             <Input
               fullwidth={true}
               value={input}