lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
1import React from 'react'
2import {StyleSheet, TextInput, TouchableOpacity, View} from 'react-native'
3import {
4 FontAwesomeIcon,
5 FontAwesomeIconStyle,
6} from '@fortawesome/react-native-fontawesome'
7import {Text} from 'view/com/util/text/Text'
8import {MagnifyingGlassIcon} from 'lib/icons'
9import {useTheme} from 'lib/ThemeContext'
10import {usePalette} from 'lib/hooks/usePalette'
11import {useStores} from 'state/index'
12import {useAnalytics} from 'lib/analytics/analytics'
13import {HITSLOP_10} from 'lib/constants'
14
15interface Props {
16 isInputFocused: boolean
17 query: string
18 setIsInputFocused: (v: boolean) => void
19 onChangeQuery: (v: string) => void
20 onPressClearQuery: () => void
21 onPressCancelSearch: () => void
22 onSubmitQuery: () => void
23 showMenu?: boolean
24}
25export function HeaderWithInput({
26 isInputFocused,
27 query,
28 setIsInputFocused,
29 onChangeQuery,
30 onPressClearQuery,
31 onPressCancelSearch,
32 onSubmitQuery,
33 showMenu = true,
34}: Props) {
35 const store = useStores()
36 const theme = useTheme()
37 const pal = usePalette('default')
38 const {track} = useAnalytics()
39 const textInput = React.useRef<TextInput>(null)
40
41 const onPressMenu = React.useCallback(() => {
42 track('ViewHeader:MenuButtonClicked')
43 store.shell.openDrawer()
44 }, [track, store])
45
46 const onPressCancelSearchInner = React.useCallback(() => {
47 onPressCancelSearch()
48 textInput.current?.blur()
49 }, [onPressCancelSearch, textInput])
50
51 return (
52 <View style={[pal.view, pal.border, styles.header]}>
53 {showMenu ? (
54 <TouchableOpacity
55 testID="viewHeaderBackOrMenuBtn"
56 onPress={onPressMenu}
57 hitSlop={HITSLOP_10}
58 style={styles.headerMenuBtn}
59 accessibilityRole="button"
60 accessibilityLabel="Menu"
61 accessibilityHint="Access navigation links and settings">
62 <FontAwesomeIcon icon="bars" size={18} color={pal.colors.textLight} />
63 </TouchableOpacity>
64 ) : null}
65 <View
66 style={[
67 {backgroundColor: pal.colors.backgroundLight},
68 styles.headerSearchContainer,
69 ]}>
70 <MagnifyingGlassIcon
71 style={[pal.icon, styles.headerSearchIcon]}
72 size={21}
73 />
74 <TextInput
75 testID="searchTextInput"
76 ref={textInput}
77 placeholder="Search"
78 placeholderTextColor={pal.colors.textLight}
79 selectTextOnFocus
80 returnKeyType="search"
81 value={query}
82 style={[pal.text, styles.headerSearchInput]}
83 keyboardAppearance={theme.colorScheme}
84 onFocus={() => setIsInputFocused(true)}
85 onBlur={() => setIsInputFocused(false)}
86 onChangeText={onChangeQuery}
87 onSubmitEditing={onSubmitQuery}
88 autoFocus={true}
89 accessibilityRole="search"
90 accessibilityLabel="Search"
91 accessibilityHint=""
92 autoCorrect={false}
93 autoCapitalize="none"
94 />
95 {query ? (
96 <TouchableOpacity
97 onPress={onPressClearQuery}
98 accessibilityRole="button"
99 accessibilityLabel="Clear search query"
100 accessibilityHint="">
101 <FontAwesomeIcon
102 icon="xmark"
103 size={16}
104 style={pal.textLight as FontAwesomeIconStyle}
105 />
106 </TouchableOpacity>
107 ) : undefined}
108 </View>
109 {query || isInputFocused ? (
110 <View style={styles.headerCancelBtn}>
111 <TouchableOpacity
112 onPress={onPressCancelSearchInner}
113 accessibilityRole="button">
114 <Text style={pal.text}>Cancel</Text>
115 </TouchableOpacity>
116 </View>
117 ) : undefined}
118 </View>
119 )
120}
121
122const styles = StyleSheet.create({
123 header: {
124 flexDirection: 'row',
125 alignItems: 'center',
126 justifyContent: 'center',
127 paddingHorizontal: 12,
128 paddingVertical: 4,
129 },
130 headerMenuBtn: {
131 width: 30,
132 height: 30,
133 borderRadius: 30,
134 marginRight: 6,
135 paddingBottom: 2,
136 alignItems: 'center',
137 justifyContent: 'center',
138 },
139 headerSearchContainer: {
140 flex: 1,
141 flexDirection: 'row',
142 alignItems: 'center',
143 borderRadius: 30,
144 paddingHorizontal: 12,
145 paddingVertical: 8,
146 },
147 headerSearchIcon: {
148 marginRight: 6,
149 alignSelf: 'center',
150 },
151 headerSearchInput: {
152 flex: 1,
153 fontSize: 17,
154 },
155 headerCancelBtn: {
156 paddingLeft: 10,
157 },
158
159 searchPrompt: {
160 textAlign: 'center',
161 paddingTop: 10,
162 },
163
164 suggestions: {
165 marginBottom: 8,
166 },
167})