diff options
author | Paul Frazee <pfrazee@gmail.com> | 2023-03-13 16:01:43 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-03-13 16:01:43 -0500 |
commit | 56cf890debeb9872f791ccb992a5587f2c05fd9e (patch) | |
tree | 929453b41274a712d8b2fce441e98a0cd030d305 /src/view/shell/web/DesktopSearch.tsx | |
parent | 503e03d91e1de4bfeabec1eb2d97dcdceb13fcc5 (diff) | |
download | voidsky-56cf890debeb9872f791ccb992a5587f2c05fd9e.tar.zst |
Move to expo and react-navigation (#288)
* WIP - adding expo * WIP - adding expo 2 * Fix tsc * Finish adding expo * Disable the 'require cycle' warning * Tweak plist * Modify some dependency versions to make expo happy * Fix icon fill * Get Web compiling for expo * 1.7 * Switch to react-navigation in expo2 (#287) * WIP Switch to react-navigation * WIP Switch to react-navigation 2 * WIP Switch to react-navigation 3 * Convert all screens to react navigation * Update BottomBar for react navigation * Update mobile menu to be react-native drawer * Fixes to drawer and bottombar * Factor out some helpers * Replace the navigation model with react-navigation * Restructure the shell folder and fix the header positioning * Restore the error boundary * Fix tsc * Implement not-found page * Remove react-native-gesture-handler (no longer used) * Handle notifee card presses * Handle all navigations from the state layer * Fix drawer behaviors * Fix two linking issues * Switch to our react-native-progress fork to fix an svg rendering issue * Get Web working with react-navigation * Refactor routes and navigation for a bit more clarity * Remove dead code * Rework Web shell to left/right nav to make this easier * Fix ViewHeader for desktop web * Hide profileheader back btn on desktop web * Move the compose button to the left nav * Implement reply prompt in threads for desktop web * Composer refactors * Factor out all platform-specific text input behaviors from the composer * Small fix * Update the web build to use tiptap for the composer * Tune up the mention autocomplete dropdown * Simplify the default avatar and banner * Fixes to link cards in web composer * Fix dropdowns on web * Tweak load latest on desktop * Add web beta message and feedback link * Fix up links in desktop web
Diffstat (limited to 'src/view/shell/web/DesktopSearch.tsx')
-rw-r--r-- | src/view/shell/web/DesktopSearch.tsx | 139 |
1 files changed, 0 insertions, 139 deletions
diff --git a/src/view/shell/web/DesktopSearch.tsx b/src/view/shell/web/DesktopSearch.tsx deleted file mode 100644 index 43f13ca2b..000000000 --- a/src/view/shell/web/DesktopSearch.tsx +++ /dev/null @@ -1,139 +0,0 @@ -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.container}> - <View style={[pal.borderDark, pal.view, styles.search]}> - <View style={[styles.inputContainer]}> - <MagnifyingGlassIcon - size={18} - style={[pal.textLight, styles.iconWrapper]} - /> - <TextInput - testID="searchTextInput" - ref={textInput} - placeholder="Search" - placeholderTextColor={pal.colors.textLight} - selectTextOnFocus - returnKeyType="search" - value={query} - style={[pal.textLight, styles.input]} - onFocus={() => setIsInputFocused(true)} - onBlur={() => setIsInputFocused(false)} - onChangeText={onChangeQuery} - /> - {query ? ( - <View style={styles.cancelBtn}> - <TouchableOpacity onPress={onPressCancelSearch}> - <Text style={[pal.link]}>Cancel</Text> - </TouchableOpacity> - </View> - ) : undefined} - </View> - </View> - - {query !== '' && ( - <View style={[pal.view, pal.borderDark, styles.resultsContainer]}> - {autocompleteView.searchRes.length ? ( - <> - {autocompleteView.searchRes.map((item, i) => ( - <ProfileCard - key={item.did} - handle={item.handle} - displayName={item.displayName} - avatar={item.avatar} - noBorder={i === 0} - /> - ))} - </> - ) : ( - <View> - <Text style={[pal.textLight, styles.noResults]}> - No results found for {autocompleteView.prefix} - </Text> - </View> - )} - </View> - )} - </View> - ) -}) - -const styles = StyleSheet.create({ - container: { - position: 'relative', - width: 300, - }, - search: { - paddingHorizontal: 10, - width: 300, - borderRadius: 20, - borderWidth: 1, - }, - inputContainer: { - flexDirection: 'row', - }, - iconWrapper: { - paddingVertical: 7, - marginRight: 4, - }, - input: { - flex: 1, - fontSize: 16, - width: '100%', - paddingTop: 7, - paddingBottom: 7, - }, - cancelBtn: { - paddingRight: 4, - paddingLeft: 10, - paddingVertical: 7, - }, - resultsContainer: { - // @ts-ignore supported by web - position: 'fixed', - marginTop: 40, - - flexDirection: 'column', - width: 300, - borderWidth: 1, - borderRadius: 6, - paddingVertical: 4, - }, - noResults: { - textAlign: 'center', - paddingVertical: 10, - }, -}) |