1import React, {useEffect, useState} from 'react'; 2import {StyleSheet, Text, View} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import Loading from '@/components/loading'; 5import {Chip, useTheme} from 'react-native-paper'; 6import useSearch from '../hooks/useSearch'; 7import {addHistory, getHistory, removeHistory} from '../common/historySearch'; 8import {useSetAtom} from 'jotai'; 9import { 10 PageStatus, 11 pageStatusAtom, 12 queryAtom, 13 searchResultsAtom, 14} from '../store/atoms'; 15import {fontSizeConst, fontWeightConst} from '@/constants/uiConst'; 16 17interface IProps {} 18export default function (props: IProps) { 19 const [history, setHistory] = useState<string[] | null>(null); 20 const search = useSearch(); 21 22 const setQuery = useSetAtom(queryAtom); 23 const setPageStatus = useSetAtom(pageStatusAtom); 24 const setSearchResultsState = useSetAtom(searchResultsAtom); 25 const {colors} = useTheme(); 26 27 useEffect(() => { 28 getHistory().then(setHistory); 29 }, []); 30 31 return ( 32 <View style={style.wrapper}> 33 {history === null ? ( 34 <Loading></Loading> 35 ) : ( 36 <> 37 <Text style={[style.title, {color: colors.text}]}>历史记录</Text> 38 {history.map(_ => ( 39 <Chip 40 key={`search-history-${_}`} 41 style={style.chip} 42 onClose={async () => { 43 await removeHistory(_); 44 getHistory().then(setHistory); 45 }} 46 onPress={() => { 47 search(_, 'all'); 48 addHistory(_); 49 setPageStatus(PageStatus.SEARCHING); 50 setSearchResultsState({}); 51 setQuery(_); 52 }}> 53 {_} 54 </Chip> 55 ))} 56 </> 57 )} 58 </View> 59 ); 60} 61 62const style = StyleSheet.create({ 63 wrapper: { 64 width: rpx(750), 65 maxWidth: rpx(750), 66 flexDirection: 'row', 67 flexWrap: 'wrap', 68 padding: rpx(24), 69 }, 70 title: { 71 width: '100%', 72 marginBottom: rpx(28), 73 fontSize: fontSizeConst.normal, 74 fontWeight: fontWeightConst.bold, 75 }, 76 chip: { 77 flexGrow: 0, 78 marginRight: rpx(24), 79 marginBottom: rpx(24), 80 }, 81}); 82