diff options
| -rw-r--r-- | src/view/shell/web/DesktopHeader.tsx | 14 | ||||
| -rw-r--r-- | src/view/shell/web/DesktopSearch.tsx | 165 |
2 files changed, 169 insertions, 10 deletions
diff --git a/src/view/shell/web/DesktopHeader.tsx b/src/view/shell/web/DesktopHeader.tsx index de0b2a218..9fb22a7eb 100644 --- a/src/view/shell/web/DesktopHeader.tsx +++ b/src/view/shell/web/DesktopHeader.tsx @@ -2,7 +2,6 @@ import React from 'react' import {observer} from 'mobx-react-lite' import {Pressable, StyleSheet, TouchableOpacity, View} from 'react-native' import {Text} from 'view/com/util/text/Text' -import {Link} from 'view/com/util/Link' import {UserAvatar} from 'view/com/util/UserAvatar' import {usePalette} from 'lib/hooks/usePalette' import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' @@ -17,6 +16,7 @@ import { MagnifyingGlassIcon, CogIcon, } from 'lib/icons' +import {DesktopSearch} from './DesktopSearch' interface NavItemProps { count?: number @@ -90,6 +90,7 @@ export const DesktopHeader = observer(function DesktopHeader({}: { const store = useStores() const pal = usePalette('default') const onPressCompose = () => store.shell.openComposer({}) + return ( <View style={[styles.header, pal.borderDark, pal.view]}> <Text type="title-xl" style={[pal.text, styles.title]}> @@ -128,15 +129,7 @@ export const DesktopHeader = observer(function DesktopHeader({}: { </Text> </TouchableOpacity> <View style={styles.space20} /> - <Link href="/search" style={[pal.view, pal.borderDark, styles.search]}> - <MagnifyingGlassIcon - size={18} - style={[pal.textLight, styles.searchIconWrapper]} - /> - <Text type="md-thin" style={pal.textLight}> - Search - </Text> - </Link> + <DesktopSearch /> <View style={styles.space15} /> <ProfileItem /> <NavItem @@ -157,6 +150,7 @@ const styles = StyleSheet.create({ paddingLeft: 30, paddingRight: 40, borderBottomWidth: 1, + zIndex: 1, }, spaceFlex: { diff --git a/src/view/shell/web/DesktopSearch.tsx b/src/view/shell/web/DesktopSearch.tsx new file mode 100644 index 000000000..8998219da --- /dev/null +++ b/src/view/shell/web/DesktopSearch.tsx @@ -0,0 +1,165 @@ +import React from 'react' +import {TextInput, View, StyleSheet, TouchableOpacity, Text} from 'react-native' +import {UserAutocompleteViewModel} from 'state/models/user-autocomplete-view' +import {observer} from 'mobx-react-lite' +import {useStores} from 'state/index' +import {usePalette} from 'lib/hooks/usePalette' +import {MagnifyingGlassIcon} from 'lib/icons' +import {ProfileCard} from '../../com/profile/ProfileCard' + +export const DesktopSearch = observer(function DesktopSearch() { + const store = useStores() + const pal = usePalette('default') + const textInput = React.useRef<TextInput>(null) + const [isInputFocused, setIsInputFocused] = React.useState<boolean>(false) + const [query, setQuery] = React.useState<string>('') + const autocompleteView = React.useMemo<UserAutocompleteViewModel>( + () => new UserAutocompleteViewModel(store), + [store], + ) + + const onChangeQuery = (text: string) => { + setQuery(text) + if (text.length > 0 && isInputFocused) { + autocompleteView.setActive(true) + autocompleteView.setPrefix(text) + } else { + autocompleteView.setActive(false) + } + } + + const onPressCancelSearch = () => { + setQuery('') + autocompleteView.setActive(false) + } + + return ( + <View + style={[ + styles.searchContainer, + pal.borderDark, + pal.view, + styles.container, + styles.search, + ]}> + <View style={[styles.container, styles.searchInputWrapper]}> + <MagnifyingGlassIcon + size={18} + style={[pal.textLight, styles.searchIconWrapper]} + /> + + <TextInput + testID="searchTextInput" + ref={textInput} + placeholder="Search" + placeholderTextColor={pal.colors.textLight} + selectTextOnFocus + returnKeyType="search" + value={query} + style={[pal.textLight, styles.headerSearchInput]} + onFocus={() => setIsInputFocused(true)} + onBlur={() => setIsInputFocused(false)} + onChangeText={onChangeQuery} + /> + + {query ? ( + <View style={styles.headerCancelBtn}> + <TouchableOpacity onPress={onPressCancelSearch}> + <Text>Cancel</Text> + </TouchableOpacity> + </View> + ) : undefined} + </View> + + <View + style={[ + {backgroundColor: pal.colors.background}, + styles.searchResultsContainer, + styles.container, + ]}> + {query && autocompleteView.searchRes.length ? ( + <> + {autocompleteView.searchRes.map(item => ( + <ProfileCard + key={item.did} + handle={item.handle} + displayName={item.displayName} + avatar={item.avatar} + /> + ))} + </> + ) : query && !autocompleteView.searchRes.length ? ( + <View> + <Text style={[pal.textLight, styles.searchPrompt]}> + No results found for {autocompleteView.prefix} + </Text> + </View> + ) : isInputFocused ? ( + <View> + <Text style={[pal.textLight, styles.searchPrompt]}> + Search for users on the network + </Text> + </View> + ) : null} + </View> + </View> + ) +}) + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + search: { + maxWidth: 300, + borderRadius: 20, + borderWidth: 1, + }, + searchIconWrapper: { + flexDirection: 'row', + width: 30, + justifyContent: 'center', + marginRight: 2, + }, + searchInputWrapper: { + flexDirection: 'row', + }, + searchContainer: { + flexWrap: 'wrap', + position: 'relative', + paddingHorizontal: 12, + paddingTop: 6, + paddingBottom: 6, + }, + headerMenuBtn: { + width: 40, + height: 30, + marginLeft: 6, + }, + searchResultsContainer: { + position: 'fixed', + flex: 1, + flexDirection: 'column', + borderRadius: 30, + paddingHorizontal: 12, + paddingVertical: 8, + marginTop: 50, + }, + headerSearchIcon: { + marginRight: 6, + alignSelf: 'center', + }, + headerSearchInput: { + flex: 1, + fontSize: 17, + width: '100%', + }, + headerCancelBtn: { + width: 60, + paddingLeft: 10, + }, + searchPrompt: { + textAlign: 'center', + paddingTop: 10, + }, +}) |