xref: /MusicFree/src/pages/searchPage/components/navBar.tsx (revision e650bfb34226e2a09d15cbf7832c4805a87cd60e) 
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, Searchbar} from 'react-native-paper';
15import {addHistory} from '../common/historySearch';
16import {fontSizeConst} from '@/constants/uiConst';
17import useColors from '@/hooks/useColors';
18import Button from '@/components/base/button';
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 colors = useColors();
26    const setSearchResultsState = useSetAtom(searchResultsAtom);
27
28    const onSearchSubmit = async () => {
29        if (query === '') {
30            return;
31        }
32        setSearchResultsState(initSearchResults);
33        setPageStatus(prev =>
34            prev === PageStatus.EDITING ? PageStatus.SEARCHING : prev,
35        );
36        await search(query, 1);
37        await addHistory(query);
38    };
39
40    return (
41        <Appbar style={[style.appbar, {backgroundColor: colors.primary}]}>
42            <Appbar.BackAction
43                onPress={() => {
44                    // !!这个组件有bug，输入法拉起的时候返回会默认打开panel
45                    Keyboard.dismiss();
46                    navigation.goBack();
47                }}
48            />
49            <Searchbar
50                autoFocus
51                inputStyle={style.input}
52                style={style.searchBar}
53                accessible
54                accessibilityLabel="搜索框"
55                accessibilityHint={'输入要搜索的歌曲'}
56                onFocus={() => {
57                    setPageStatus(PageStatus.EDITING);
58                }}
59                placeholder="输入要搜索的歌曲"
60                onSubmitEditing={onSearchSubmit}
61                onChangeText={_ => {
62                    if (_ === '') {
63                        setPageStatus(PageStatus.EDITING);
64                    }
65                    setQuery(_);
66                }}
67                value={query}
68            />
69            <Button style={style.button} onPress={onSearchSubmit}>
70                搜索
71            </Button>
72        </Appbar>
73    );
74}
75
76const style = StyleSheet.create({
77    appbar: {
78        shadowColor: 'transparent',
79    },
80    button: {
81        paddingHorizontal: rpx(24),
82    },
83    searchBar: {
84        minWidth: rpx(375),
85        flex: 1,
86        borderRadius: rpx(64),
87        height: '72%',
88        maxHeight: rpx(64),
89        color: '#666666',
90        alignItems: 'center',
91    },
92    input: {
93        padding: 0,
94        height: '100%',
95        color: '#666666',
96        fontSize: fontSizeConst.subTitle,
97        textAlignVertical: 'center',
98        includeFontPadding: false,
99    },
100});
101