diff options
Diffstat (limited to 'src/view/screens/Search/Search.tsx')
| -rw-r--r-- | src/view/screens/Search/Search.tsx | 236 |
1 files changed, 105 insertions, 131 deletions
diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index 0518bc506..0871458c9 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -55,7 +55,6 @@ import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard' import {Link} from '#/view/com/util/Link' import {List} from '#/view/com/util/List' import {Text} from '#/view/com/util/text/Text' -import {CenteredView, ScrollView} from '#/view/com/util/Views' import {Explore} from '#/view/screens/Search/Explore' import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search' import {makeSearchQuery, parseSearchQuery} from '#/screens/Search/utils' @@ -68,63 +67,46 @@ import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' import * as Layout from '#/components/Layout' function Loader() { - const pal = usePalette('default') - const {isMobile} = useWebMediaQueries() return ( - <CenteredView - style={[ - // @ts-ignore web only -prf - { - padding: 18, - height: isWeb ? '100vh' : undefined, - }, - pal.border, - ]} - sideBorders={!isMobile}> - <ActivityIndicator /> - </CenteredView> + <Layout.Content> + <View style={[a.py_xl]}> + <ActivityIndicator /> + </View> + </Layout.Content> ) } function EmptyState({message, error}: {message: string; error?: string}) { const pal = usePalette('default') - const {isMobile} = useWebMediaQueries() return ( - <CenteredView - sideBorders={!isMobile} - style={[ - pal.border, - // @ts-ignore web only -prf - { - padding: 18, - height: isWeb ? '100vh' : undefined, - }, - ]}> - <View style={[pal.viewLight, {padding: 18, borderRadius: 8}]}> - <Text style={[pal.text]}>{message}</Text> + <Layout.Content> + <View style={[a.p_xl]}> + <View style={[pal.viewLight, {padding: 18, borderRadius: 8}]}> + <Text style={[pal.text]}>{message}</Text> - {error && ( - <> - <View - style={[ - { - marginVertical: 12, - height: 1, - width: '100%', - backgroundColor: pal.text.color, - opacity: 0.2, - }, - ]} - /> + {error && ( + <> + <View + style={[ + { + marginVertical: 12, + height: 1, + width: '100%', + backgroundColor: pal.text.color, + opacity: 0.2, + }, + ]} + /> - <Text style={[pal.textLight]}> - <Trans>Error:</Trans> {error} - </Text> - </> - )} + <Text style={[pal.textLight]}> + <Trans>Error:</Trans> {error} + </Text> + </> + )} + </View> </View> - </CenteredView> + </Layout.Content> ) } @@ -224,7 +206,7 @@ let SearchScreenPostResults = ({ if (item.type === 'post') { return <Post post={item.post} /> } else { - return <Loader /> + return null } }} keyExtractor={item => item.key} @@ -550,19 +532,13 @@ let SearchScreenInner = ({ <Pager onPageSelected={onPageSelected} renderTabBar={props => ( - <CenteredView - sideBorders + <Layout.Center style={[ - pal.border, - pal.view, - web({ - position: isWeb ? 'sticky' : '', - zIndex: 1, - }), + web([a.sticky, a.z_10]), {top: isWeb ? headerHeight : undefined}, ]}> <TabBar items={sections.map(section => section.title)} {...props} /> - </CenteredView> + </Layout.Center> )} initialPage={0}> {sections.map((section, i) => ( @@ -572,7 +548,7 @@ let SearchScreenInner = ({ ) : hasSession ? ( <Explore /> ) : ( - <CenteredView sideBorders style={pal.border}> + <Layout.Center> <View // @ts-ignore web only -esb style={{ @@ -614,7 +590,7 @@ let SearchScreenInner = ({ </Text> </View> </View> - </CenteredView> + </Layout.Center> ) } SearchScreenInner = React.memo(SearchScreenInner) @@ -650,7 +626,7 @@ export function SearchScreen( * Arbitrary sizing, so guess and check, used for sticky header alignment and * sizing. */ - const headerHeight = 64 + (showFilters ? 40 : 0) + const headerHeight = 60 + (showFilters ? 40 : 0) useFocusEffect( useNonReactiveCallback(() => { @@ -861,73 +837,79 @@ export function SearchScreen( return ( <Layout.Screen testID="searchScreen"> - <CenteredView + <View style={[ - a.p_md, - a.pb_sm, - a.gap_sm, - t.atoms.bg, web({ height: headerHeight, position: 'sticky', top: 0, zIndex: 1, }), - ]} - sideBorders={gtMobile}> - <View style={[a.flex_row, a.gap_sm]}> - {!gtMobile && ( - <Button - testID="viewHeaderBackOrMenuBtn" - onPress={onPressMenu} - hitSlop={HITSLOP_10} - label={_(msg`Menu`)} - accessibilityHint={_(msg`Access navigation links and settings`)} - size="large" - variant="solid" - color="secondary" - shape="square"> - <ButtonIcon icon={Menu} size="lg" /> - </Button> - )} - <View style={[a.flex_1]}> - <SearchInput - ref={textInput} - value={searchText} - onFocus={onSearchInputFocus} - onChangeText={onChangeText} - onClearText={onPressClearQuery} - onSubmitEditing={onSubmit} - /> - </View> - {showAutocomplete && ( - <Button - label={_(msg`Cancel search`)} - size="large" - variant="ghost" - color="secondary" - style={[a.px_sm]} - onPress={onPressCancelSearch} - hitSlop={HITSLOP_10}> - <ButtonText> - <Trans>Cancel</Trans> - </ButtonText> - </Button> - )} - </View> - - {showFilters && ( - <View - style={[a.flex_row, a.align_center, a.justify_between, a.gap_sm]}> - <View style={[{width: 140}]}> - <SearchLanguageDropdown - value={params.lang} - onChange={params.setLang} - /> + ]}> + <Layout.Center> + <View style={[a.p_md, a.pb_sm, a.gap_sm, t.atoms.bg]}> + <View style={[a.flex_row, a.gap_sm]}> + {!gtMobile && ( + <Button + testID="viewHeaderBackOrMenuBtn" + onPress={onPressMenu} + hitSlop={HITSLOP_10} + label={_(msg`Menu`)} + accessibilityHint={_( + msg`Access navigation links and settings`, + )} + size="large" + variant="solid" + color="secondary" + shape="square"> + <ButtonIcon icon={Menu} size="lg" /> + </Button> + )} + <View style={[a.flex_1]}> + <SearchInput + ref={textInput} + value={searchText} + onFocus={onSearchInputFocus} + onChangeText={onChangeText} + onClearText={onPressClearQuery} + onSubmitEditing={onSubmit} + /> + </View> + {showAutocomplete && ( + <Button + label={_(msg`Cancel search`)} + size="large" + variant="ghost" + color="secondary" + style={[a.px_sm]} + onPress={onPressCancelSearch} + hitSlop={HITSLOP_10}> + <ButtonText> + <Trans>Cancel</Trans> + </ButtonText> + </Button> + )} </View> + + {showFilters && ( + <View + style={[ + a.flex_row, + a.align_center, + a.justify_between, + a.gap_sm, + ]}> + <View style={[{width: 140}]}> + <SearchLanguageDropdown + value={params.lang} + onChange={params.setLang} + /> + </View> + </View> + )} </View> - )} - </CenteredView> + </Layout.Center> + </View> <View style={{ @@ -992,10 +974,7 @@ let AutocompleteResults = ({ !moderationOpts ? ( <Loader /> ) : ( - <ScrollView - style={{height: '100%'}} - // @ts-ignore web only -prf - dataSet={{stableGutters: '1'}} + <Layout.Content keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag"> <SearchLinkCard @@ -1020,7 +999,7 @@ let AutocompleteResults = ({ /> ))} <View style={{height: 200}} /> - </ScrollView> + </Layout.Content> )} </> ) @@ -1042,17 +1021,12 @@ function SearchHistory({ onRemoveItemClick: (item: string) => void onRemoveProfileClick: (profile: AppBskyActorDefs.ProfileViewBasic) => void }) { - const {isTabletOrDesktop, isMobile} = useWebMediaQueries() + const {isMobile} = useWebMediaQueries() const pal = usePalette('default') const {_} = useLingui() return ( - <CenteredView - sideBorders={isTabletOrDesktop} - // @ts-ignore web only -prf - style={{ - height: isWeb ? '100vh' : undefined, - }}> + <Layout.Content> <View style={styles.searchHistoryContainer}> {(searchHistory.length > 0 || selectedProfiles.length > 0) && ( <Text style={[pal.text, styles.searchHistoryTitle]}> @@ -1152,7 +1126,7 @@ function SearchHistory({ </View> )} </View> - </CenteredView> + </Layout.Content> ) } |