xref: /MusicFree/src/pages/searchPage/components/navBar.tsx (revision d1a36a67ac3d03c61d8bafd8ac2bc121ea4f6f3e) 
1import React from 'react';
2import {StyleSheet, View} from 'react-native';
3import rpx from '@/utils/rpx';
4import {useAtom, useSetAtom} from 'jotai';
5import {
6    initSearchResults,
7    PageStatus,
8    pageStatusAtom,
9    queryAtom,
10    searchResultsAtom,
11} from '../store/atoms';
12import useSearch from '../hooks/useSearch';
13import {addHistory} from '../common/historySearch';
14import useColors from '@/hooks/useColors';
15import AppBar from '@/components/base/appBar';
16import Input from '@/components/base/input';
17import Color from 'color';
18import Button from '@/components/base/textButton.tsx';
19import IconButton from '@/components/base/iconButton';
20import {iconSizeConst} from '@/constants/uiConst';
21import Icon from '@/components/base/icon.tsx';
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="magnifying-glass"
49                    color={hintTextColor}
50                    size={iconSizeConst.small}
51                    style={style.magnify}
52                />
53                <Input
54                    autoFocus
55                    style={[
56                        style.searchBar,
57                        {
58                            color: colors.text,
59                            backgroundColor: colors.pageBackground,
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                            setPageStatus(PageStatus.EDITING);
86                        }}
87                        color={hintTextColor}
88                        name="x-mark"
89                    />
90                ) : null}
91            </View>
92            <Button
93                style={[style.button]}
94                hitSlop={0}
95                fontColor={'appBarText'}
96                onPress={onSearchSubmit}>
97                搜索
98            </Button>
99        </AppBar>
100    );
101}
102
103const style = StyleSheet.create({
104    appbar: {
105        paddingRight: 0,
106    },
107    button: {
108        paddingHorizontal: rpx(24),
109        height: '100%',
110        justifyContent: 'center',
111    },
112    searchBarContainer: {
113        flex: 1,
114        flexDirection: 'row',
115        alignItems: 'center',
116    },
117    searchBar: {
118        minWidth: rpx(375),
119        flex: 1,
120        paddingHorizontal: rpx(64),
121        borderRadius: rpx(64),
122        height: rpx(64),
123        maxHeight: rpx(64),
124        alignItems: 'center',
125    },
126    magnify: {
127        position: 'absolute',
128        left: rpx(16),
129        zIndex: 100,
130    },
131    close: {
132        position: 'absolute',
133        right: rpx(16),
134    },
135});
136