xref: /MusicFree/src/pages/searchPage/components/navBar.tsx (revision 1119c2ea435417cd5c53719f91691ff2b1aa8670) 
1import React from 'react';
2import {StyleSheet, View} from 'react-native';
3import rpx from '@/utils/rpx';
4import {useAtom, useSetAtom} from 'jotai';
5import {
6    pageStatusAtom,
7    PageStatus,
8    queryAtom,
9    searchResultsAtom,
10    initSearchResults,
11} from '../store/atoms';
12import useSearch from '../hooks/useSearch';
13import {addHistory} from '../common/historySearch';
14import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
15import useColors from '@/hooks/useColors';
16import AppBar from '@/components/base/appBar';
17import Input from '@/components/base/input';
18import Color from 'color';
19import Button from '@/components/base/button';
20import IconButton from '@/components/base/iconButton';
21import {iconSizeConst} from '@/constants/uiConst';
22
23export default function NavBar() {
24    const search = useSearch();
25    const [query, setQuery] = useAtom(queryAtom);
26    const setPageStatus = useSetAtom(pageStatusAtom);
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    const hintTextColor = Color(colors.text).alpha(0.6).toString();
43
44    return (
45        <AppBar containerStyle={style.appbar} contentStyle={style.appbar}>
46            <View style={style.searchBarContainer}>
47                <Icon
48                    name="magnify"
49                    color={hintTextColor}
50                    size={iconSizeConst.light}
51                    style={style.magnify}
52                />
53                <Input
54                    autoFocus
55                    style={[
56                        style.searchBar,
57                        {
58                            color: colors.text,
59                            backgroundColor: colors.placeholder,
60                        },
61                    ]}
62                    accessible
63                    accessibilityLabel="搜索框"
64                    accessibilityHint={'输入要搜索的歌曲'}
65                    onFocus={() => {
66                        setPageStatus(PageStatus.EDITING);
67                    }}
68                    placeholderTextColor={hintTextColor}
69                    placeholder="输入要搜索的歌曲"
70                    onSubmitEditing={onSearchSubmit}
71                    onChangeText={_ => {
72                        if (_ === '') {
73                            setPageStatus(PageStatus.EDITING);
74                        }
75                        setQuery(_);
76                    }}
77                    value={query}
78                />
79                {query.length ? (
80                    <IconButton
81                        style={style.close}
82                        sizeType="light"
83                        onPress={() => {
84                            setQuery('');
85                        }}
86                        color={hintTextColor}
87                        name="close"
88                    />
89                ) : null}
90            </View>
91            <Button
92                style={[style.button]}
93                hitSlop={0}
94                fontColor={'headerText'}
95                onPress={onSearchSubmit}>
96                搜索
97            </Button>
98        </AppBar>
99    );
100}
101
102const style = StyleSheet.create({
103    appbar: {
104        paddingRight: 0,
105    },
106    button: {
107        paddingHorizontal: rpx(24),
108        height: '100%',
109        justifyContent: 'center',
110    },
111    searchBarContainer: {
112        flex: 1,
113        flexDirection: 'row',
114        alignItems: 'center',
115    },
116    searchBar: {
117        minWidth: rpx(375),
118        flex: 1,
119        paddingHorizontal: rpx(64),
120        borderRadius: rpx(64),
121        height: rpx(64),
122        maxHeight: rpx(64),
123        alignItems: 'center',
124    },
125    magnify: {
126        position: 'absolute',
127        left: rpx(16),
128        zIndex: 100,
129    },
130    close: {
131        position: 'absolute',
132        right: rpx(16),
133    },
134});
135