xref: /MusicFree/src/pages/searchPage/components/navBar.tsx (revision 6704747af84cebd842b258efac7143542722fac5) 
1import React from 'react';
2import {Keyboard, StyleSheet} from 'react-native';
3import rpx from '@/utils/rpx';
4import {useNavigation, useTheme} 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
20interface INavBarProps {}
21export default function NavBar(props: INavBarProps) {
22  const navigation = useNavigation();
23  const search = useSearch();
24  const [query, setQuery] = useAtom(queryAtom);
25  const setPageStatus = useSetAtom(pageStatusAtom);
26  const textColor = useTextColor();
27  const colors = useColors();
28  const setSearchResultsState = useSetAtom(searchResultsAtom);
29
30  const onSearchSubmit = async () => {
31    if (query === '') {
32      return;
33    }
34    setSearchResultsState(initSearchResults);
35    setPageStatus(prev =>
36      prev === PageStatus.EDITING ? PageStatus.SEARCHING : prev,
37    );
38    await search(query, 1);
39    await addHistory(query);
40  };
41
42  return (
43    <Appbar style={[style.appbar, {backgroundColor: colors.primary}]}>
44      <Appbar.BackAction
45        onPress={() => {
46          // !!这个组件有bug，输入法拉起的时候返回会默认打开panel
47          Keyboard.dismiss();
48          navigation.goBack();
49        }}></Appbar.BackAction>
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}></Searchbar>
66      <Button color={textColor} onPress={onSearchSubmit}>
67        搜索
68      </Button>
69    </Appbar>
70  );
71}
72
73const style = StyleSheet.create({
74  appbar: {
75    shadowColor: 'transparent',
76  },
77  searchBar: {
78    minWidth: rpx(375),
79    flex: 1,
80    borderRadius: rpx(64),
81    height: rpx(64),
82    color: '#666666',
83  },
84  input: {
85    padding: 0,
86    color: '#666666',
87    height: rpx(64),
88    fontSize: fontSizeConst.subTitle,
89    textAlignVertical: 'center',
90    includeFontPadding: false,
91  },
92});
93