添加搜索历史清理

src/screens/Home/Views/Search/BlankView/HistorySearch.tsx

@@ -1,41 +1,47 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
-import { View } from 'react-native'
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
+import { TouchableOpacity, View } from 'react-native'
 import { type InitState } from '@/store/hotSearch/state'
 import Button from '@/components/common/Button'
 import Text from '@/components/common/Text'
 import { createStyle } from '@/utils/tools'
 import { useTheme } from '@/store/theme/hook'
 import { useI18n } from '@/lang'
-import { getSearchHistory } from '@/core/search/search'
+import { clearHistoryList, getSearchHistory, removeHistoryWord } from '@/core/search/search'
+import { Icon } from '@/components/common/Icon'
 
 
-interface ListProps {
+export type List = NonNullable<InitState['sourceList'][keyof InitState['sourceList']]>
+
+const ListItem = ({ keyword, onSearch, onRemove }: {
+  keyword: string
+  onSearch: (keyword: string) => void
+  onRemove: (keyword: string) => void
+}) => {
+  const theme = useTheme()
+  return (
+    <Button
+      style={{ ...styles.button, backgroundColor: theme['c-button-background'] }}
+      onPress={() => { onSearch(keyword) }}
+      onLongPress={() => { onRemove(keyword) }}
+    >
+      <Text color={theme['c-button-font']} size={13}>{keyword}</Text>
+    </Button>
+  )
+}
+
+
+interface HistorySearchProps {
   onSearch: (keyword: string) => void
 }
 export interface HistorySearchType {
   show: () => void
 }
 
-
-export type List = NonNullable<InitState['sourceList'][keyof InitState['sourceList']]>
-
-const ListItem = ({ keyword, onSearch }: {
-  keyword: string
-  onSearch: (keyword: string) => void
-}) => {
-  const theme = useTheme()
-  return (
-    <Button style={{ ...styles.button, backgroundColor: theme['c-button-background'] }} onPress={() => { onSearch(keyword) }}>
-      <Text color={theme['c-button-font']} size={13}>{keyword}</Text>
-    </Button>
-  )
-}
-
-export default forwardRef<HistorySearchType, ListProps>((props, ref) => {
+export default forwardRef<HistorySearchType, HistorySearchProps>((props, ref) => {
   const [list, setList] = useState<List>([])
   const isUnmountedRef = useRef(false)
   const t = useI18n()
-  // const theme = useTheme()
+  const theme = useTheme()
 
   useEffect(() => {
     isUnmountedRef.current = false
@@ -53,14 +59,34 @@ export default forwardRef<HistorySearchType, ListProps>((props, ref) => {
     },
   }), [])
 
+  const handleClear = () => {
+    clearHistoryList()
+    setList([])
+  }
+
+  const handleRemove = useCallback((keyword: string) => {
+    setList(list => {
+      list = [...list]
+      const index = list.indexOf(keyword)
+      list.splice(index, 1)
+      removeHistoryWord(index)
+      return list
+    })
+  }, [])
+
   return (
     list.length
       ? (
           <View>
-            <Text style={styles.title} size={16}>{t('search_history_search')}</Text>
+            <View style={styles.titleContent}>
+              <Text size={16}>{t('search_history_search')}</Text>
+              <TouchableOpacity onPress={handleClear} style={styles.titleBtn}>
+                <Icon name="eraser" color={theme['c-300']} size={14} />
+              </TouchableOpacity>
+            </View>
             <View style={styles.list}>
               {
-                list.map(keyword => <ListItem keyword={keyword} key={keyword} onSearch={props.onSearch} />)
+                list.map(keyword => <ListItem keyword={keyword} key={keyword} onSearch={props.onSearch} onRemove={handleRemove} />)
               }
             </View>
           </View>
@@ -71,11 +97,19 @@ export default forwardRef<HistorySearchType, ListProps>((props, ref) => {
 
 
 const styles = createStyle({
+  titleContent: {
+    paddingTop: 15,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
   title: {
     // paddingLeft: 15,
-    paddingTop: 15,
     // paddingBottom: 5,
   },
+  titleBtn: {
+    marginLeft: 10,
+    padding: 5,
+  },
   list: {
     // paddingLeft: 15,
     // paddingRight: 15,