feat: optional search clear icon (#173)

TheWidlarzGroup · Mar 25, 2024 · 9939016 · 9939016
1 parent b4ef98c
commit 9939016
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
@@ -11,6 +11,7 @@ export const SearchBar = ({ scrollEmojiCategoryListToIndex }: SearchBarProps) =>
   const {
     searchPhrase,
     setSearchPhrase,
+    hideSearchBarClearIcon,
     translation,
     setActiveCategoryIndex,
     renderList,
@@ -23,11 +24,11 @@ export const SearchBar = ({ scrollEmojiCategoryListToIndex }: SearchBarProps) =>
   } = React.useContext(KeyboardContext)
   const inputRef = React.useRef<TextInput>(null)
 
-  const handleSearch = async (text: string) => {
+  const handleSearch = (text: string) => {
     setSearchPhrase(text)
 
     if (text === '') {
-      await setActiveCategoryIndex(0)
+      setActiveCategoryIndex(0)
       scrollEmojiCategoryListToIndex(0)
       setShouldAnimateScroll(enableCategoryChangeAnimation)
 
@@ -45,8 +46,10 @@ export const SearchBar = ({ scrollEmojiCategoryListToIndex }: SearchBarProps) =>
   const clearPhrase = () => {
     setSearchPhrase('')
     clearEmojiTonesData()
-    inputRef.current?.blur()
     setActiveCategoryIndex(0)
+    setTimeout(() => {
+      inputRef.current?.blur()
+    }, 0)
     scrollEmojiCategoryListToIndex(0)
   }
 
@@ -67,7 +70,7 @@ export const SearchBar = ({ scrollEmojiCategoryListToIndex }: SearchBarProps) =>
         onTouchEndCapture={clearEmojiTonesData}
         placeholderTextColor={theme.search.placeholder}
       />
-      {!!searchPhrase && (
+      {!hideSearchBarClearIcon && !!searchPhrase && (
         <TouchableOpacity onPress={clearPhrase} style={styles.button}>
           <Icon
             iconName={'Close'}

diff --git a/src/contexts/KeyboardContext.ts b/src/contexts/KeyboardContext.ts
@@ -82,6 +82,7 @@ export type KeyboardProps = {
   enableRecentlyUsed?: boolean
   categoryPosition?: CategoryPosition
   enableSearchBar?: boolean
+  hideSearchBarClearIcon?: boolean
   customButtons?: React.ReactNode
   categoryOrder?: CategoryTypes[]
   onRequestClose?: () => void
@@ -176,6 +177,7 @@ export const defaultKeyboardContext: Required<KeyboardProps> & {
   enableRecentlyUsed: false,
   categoryPosition: 'floating',
   enableSearchBar: false,
+  hideSearchBarClearIcon: false,
   customButtons: null,
   categoryOrder: [...CATEGORIES],
   onRequestClose: () => {},