feat: implement DesktopSearch component

zio/stable
Michael Staub 2023-02-23 16:32:46 -08:00
parent f709c50809
commit e11f360376
2 changed files with 169 additions and 10 deletions

View File

@ -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: {

View File

@ -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,
},
})