xref: /MusicFree/src/pages/searchPage/components/navBar.tsx (revision 1fa77b042dffea2ad8db31c1b15672ed8f3755cf) 
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                accessible
55                accessibilityLabel="搜索框"
56                accessibilityHint={'输入要搜索的歌曲'}
57                onFocus={() => {
58                    setPageStatus(PageStatus.EDITING);
59                }}
60                placeholder="输入要搜索的歌曲"
61                onSubmitEditing={onSearchSubmit}
62                onChangeText={_ => {
63                    if (_ === '') {
64                        setPageStatus(PageStatus.EDITING);
65                    }
66                    setQuery(_);
67                }}
68                value={query}
69            />
70            <Button color={textColor} onPress={onSearchSubmit}>
71                搜索
72            </Button>
73        </Appbar>
74    );
75}
76
77const style = StyleSheet.create({
78    appbar: {
79        shadowColor: 'transparent',
80    },
81    searchBar: {
82        minWidth: rpx(375),
83        flex: 1,
84        borderRadius: rpx(64),
85        height: '72%',
86        color: '#666666',
87        alignItems: 'center',
88    },
89    input: {
90        padding: 0,
91        color: '#666666',
92        fontSize: fontSizeConst.subTitle,
93        textAlignVertical: 'center',
94        includeFontPadding: false,
95    },
96});
97