An ATproto social media client -- with an independent Appview.

Fix Gif Select dialog search bar scrolling away (#8874)

* fix flatlist dialogs on web

* tweak gif select dialog, add style prop to textfield

authored by samuel.fm and committed by

GitHub 27c591f0 7771b56a

+24 -16
+3 -3
src/components/Dialog/index.web.tsx
··· 193 193 onInteractOutside={preventDefault} 194 194 onFocusOutside={preventDefault} 195 195 onDismiss={close} 196 - style={{display: 'flex', flexDirection: 'column'}}> 196 + style={{height: '100%', display: 'flex', flexDirection: 'column'}}> 197 197 {header} 198 198 <View style={[gtMobile ? a.p_2xl : a.p_xl, contentContainerStyle]}> 199 199 {children} ··· 227 227 web({maxHeight: '80vh'}), 228 228 webInnerStyle, 229 229 ]} 230 - contentContainerStyle={[a.px_0, webInnerContentContainerStyle]}> 230 + contentContainerStyle={[a.h_full, a.px_0, webInnerContentContainerStyle]}> 231 231 <FlatList 232 232 ref={ref} 233 - style={[gtMobile ? a.px_2xl : a.px_xl, flatten(style)]} 233 + style={[a.h_full, gtMobile ? a.px_2xl : a.px_xl, flatten(style)]} 234 234 {...props} 235 235 /> 236 236 </Inner>
+3 -2
src/components/Dialog/shared.tsx
··· 5 5 View, 6 6 type ViewStyle, 7 7 } from 'react-native' 8 - import type React from 'react' 9 8 10 9 import {atoms as a, useTheme} from '#/alf' 11 10 import {Text} from '#/components/Typography' ··· 28 27 <View 29 28 onLayout={onLayout} 30 29 style={[ 30 + a.sticky, 31 + a.top_0, 31 32 a.relative, 32 33 a.w_full, 33 34 a.py_sm, ··· 61 62 style?: StyleProp<TextStyle> 62 63 }) { 63 64 return ( 64 - <Text style={[a.text_lg, a.text_center, a.font_bold, style]}> 65 + <Text style={[a.text_lg, a.text_center, a.font_heavy, style]}> 65 66 {children} 66 67 </Text> 67 68 )
+6 -8
src/components/dialogs/GifSelect.tsx
··· 1 - import React, { 1 + import { 2 2 useCallback, 3 3 useImperativeHandle, 4 4 useMemo, ··· 119 119 [onSelectGif], 120 120 ) 121 121 122 - const onEndReached = React.useCallback(() => { 122 + const onEndReached = useCallback(() => { 123 123 if (isFetchingNextPage || !hasNextPage || error) return 124 124 fetchNextPage() 125 125 }, [isFetchingNextPage, hasNextPage, error, fetchNextPage]) ··· 172 172 </Button> 173 173 )} 174 174 175 - <TextField.Root> 175 + <TextField.Root style={[!gtMobile && isWeb && a.flex_1]}> 176 176 <TextField.Icon icon={Search} /> 177 177 <TextField.Input 178 178 label={_(msg`Search GIFs`)} ··· 206 206 renderItem={renderItem} 207 207 numColumns={gtMobile ? 3 : 2} 208 208 columnWrapperStyle={[a.gap_sm]} 209 - contentContainerStyle={[ 210 - native([a.px_xl, {minHeight: height}]), 211 - web(a.h_full_vh), 212 - ]} 213 - style={[web(a.h_full_vh)]} 209 + contentContainerStyle={[native([a.px_xl, {minHeight: height}])]} 210 + webInnerStyle={[web({minHeight: '80vh'})]} 211 + webInnerContentContainerStyle={[web(a.pb_0)]} 214 212 ListHeaderComponent={ 215 213 <> 216 214 {listHeader}
+12 -3
src/components/forms/TextField.tsx
··· 48 48 }) 49 49 Context.displayName = 'TextFieldContext' 50 50 51 - export type RootProps = React.PropsWithChildren<{isInvalid?: boolean}> 51 + export type RootProps = React.PropsWithChildren< 52 + {isInvalid?: boolean} & TextStyleProp 53 + > 52 54 53 - export function Root({children, isInvalid = false}: RootProps) { 55 + export function Root({children, isInvalid = false, style}: RootProps) { 54 56 const inputRef = useRef<TextInput>(null) 55 57 const { 56 58 state: hovered, ··· 85 87 return ( 86 88 <Context.Provider value={context}> 87 89 <View 88 - style={[a.flex_row, a.align_center, a.relative, a.w_full, a.px_md]} 90 + style={[ 91 + a.flex_row, 92 + a.align_center, 93 + a.relative, 94 + a.w_full, 95 + a.px_md, 96 + style, 97 + ]} 89 98 {...web({ 90 99 onClick: () => inputRef.current?.focus(), 91 100 onMouseOver: onHoverIn,