xref: /MusicFree/src/pages/searchPage/components/navBar.tsx (revision b882a19d884fffa32f7c8cef31652b909dceaa0f) 
1import React from 'react';
2import {Keyboard, StyleSheet} from 'react-native';
3import rpx from '@/utils/rpx';
4import {useNavigation} from '@react-navigation/native';
5import {useAtom, useSetAtom} from 'jotai';
6import {
7    pageStatusAtom,
8    PageStatus,
9    queryAtom,
10    searchResultsAtom,
11    initSearchResults,
12} from '../store/atoms';
13import useSearch from '../hooks/useSearch';
14import {Appbar, Button, Searchbar} from 'react-native-paper';
15import {addHistory} from '../common/historySearch';
16import {fontSizeConst} from '@/constants/uiConst';
17import useTextColor from '@/hooks/useTextColor';
18import useColors from '@/hooks/useColors';
19
20export default function NavBar() {
21    const navigation = useNavigation();
22    const search = useSearch();
23    const [query, setQuery] = useAtom(queryAtom);
24    const setPageStatus = useSetAtom(pageStatusAtom);
25    const textColor = useTextColor();
26    const colors = useColors();
27    const setSearchResultsState = useSetAtom(searchResultsAtom);
28
29    const onSearchSubmit = async () => {
30        if (query === '') {
31            return;
32        }
33        setSearchResultsState(initSearchResults);
34        setPageStatus(prev =>
35            prev === PageStatus.EDITING ? PageStatus.SEARCHING : prev,
36        );
37        await search(query, 1);
38        await addHistory(query);
39    };
40
41    return (
42        <Appbar style={[style.appbar, {backgroundColor: colors.primary}]}>
43            <Appbar.BackAction
44                onPress={() => {
45                    // !!这个组件有bug，输入法拉起的时候返回会默认打开panel
46                    Keyboard.dismiss();
47                    navigation.goBack();
48                }}
49            />
50            <Searchbar
51                autoFocus
52                inputStyle={style.input}
53                style={style.searchBar}
54                onFocus={() => {
55                    setPageStatus(PageStatus.EDITING);
56                }}
57                placeholder="输入要搜索的歌曲"
58                onSubmitEditing={onSearchSubmit}
59                onChangeText={_ => {
60                    if (_ === '') {
61                        setPageStatus(PageStatus.EDITING);
62                    }
63                    setQuery(_);
64                }}
65                value={query}
66            />
67            <Button color={textColor} onPress={onSearchSubmit}>
68                搜索
69            </Button>
70        </Appbar>
71    );
72}
73
74const style = StyleSheet.create({
75    appbar: {
76        shadowColor: 'transparent',
77    },
78    searchBar: {
79        minWidth: rpx(375),
80        flex: 1,
81        borderRadius: rpx(64),
82        height: rpx(64),
83        color: '#666666',
84    },
85    input: {
86        padding: 0,
87        color: '#666666',
88        height: rpx(64),
89        fontSize: fontSizeConst.subTitle,
90        textAlignVertical: 'center',
91        includeFontPadding: false,
92    },
93});
94