Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

[GIFs] Reset scroll on query change (#3642)

* scroll list to top on query change

* dismiss keyboard on swipe list

* don't need an effect

authored by

Samuel Newman and committed by
GitHub
f49d73dd 0b3cc590

+18 -11
+6 -6
src/components/Dialog/index.web.tsx
··· 197 197 198 198 export const ScrollableInner = Inner 199 199 200 - export function InnerFlatList({ 201 - label, 202 - style, 203 - ...props 204 - }: FlatListProps<any> & {label: string}) { 200 + export const InnerFlatList = React.forwardRef< 201 + FlatList, 202 + FlatListProps<any> & {label: string} 203 + >(function InnerFlatList({label, style, ...props}, ref) { 205 204 const {gtMobile} = useBreakpoints() 206 205 return ( 207 206 <Inner ··· 213 212 overflow: 'hidden', 214 213 }}> 215 214 <FlatList 215 + ref={ref} 216 216 style={[gtMobile ? a.px_2xl : a.px_xl, flatten(style)]} 217 217 {...props} 218 218 /> 219 219 </Inner> 220 220 ) 221 - } 221 + }) 222 222 223 223 export function Handle() { 224 224 return null
+12 -5
src/components/dialogs/GifSelect.tsx
··· 1 1 import React, {useCallback, useMemo, useRef, useState} from 'react' 2 - import {TextInput, View} from 'react-native' 2 + import {Keyboard, TextInput, View} from 'react-native' 3 3 import {Image} from 'expo-image' 4 + import {BottomSheetFlatListMethods} from '@discord/bottom-sheet' 4 5 import {msg, Trans} from '@lingui/macro' 5 6 import {useLingui} from '@lingui/react' 6 7 ··· 82 83 const {_} = useLingui() 83 84 const t = useTheme() 84 85 const {gtMobile} = useBreakpoints() 85 - const ref = useRef<TextInput>(null) 86 + const textInputRef = useRef<TextInput>(null) 87 + const listRef = useRef<BottomSheetFlatListMethods>(null) 86 88 const [undeferredSearch, setSearch] = useState('') 87 89 const search = useThrottledValue(undeferredSearch, 500) 88 90 ··· 133 135 const onGoBack = useCallback(() => { 134 136 if (isSearching) { 135 137 // clear the input and reset the state 136 - ref.current?.clear() 138 + textInputRef.current?.clear() 137 139 setSearch('') 138 140 } else { 139 141 control.close() ··· 180 182 <TextField.Input 181 183 label={_(msg`Search GIFs`)} 182 184 placeholder={_(msg`Powered by GIPHY`)} 183 - onChangeText={setSearch} 185 + onChangeText={text => { 186 + setSearch(text) 187 + listRef.current?.scrollToOffset({offset: 0, animated: false}) 188 + }} 184 189 returnKeyType="search" 185 190 clearButtonMode="while-editing" 186 - inputRef={ref} 191 + inputRef={textInputRef} 187 192 maxLength={50} 188 193 onKeyPress={({nativeEvent}) => { 189 194 if (nativeEvent.key === 'Escape') { ··· 200 205 <> 201 206 {gtMobile && <Dialog.Close />} 202 207 <Dialog.InnerFlatList 208 + ref={listRef} 203 209 key={gtMobile ? '3 cols' : '2 cols'} 204 210 data={flattenedData} 205 211 renderItem={renderItem} ··· 235 241 keyExtractor={(item: Gif) => item.id} 236 242 // @ts-expect-error web only 237 243 style={isWeb && {minHeight: '100vh'}} 244 + onScrollBeginDrag={() => Keyboard.dismiss()} 238 245 ListFooterComponent={ 239 246 hasData ? ( 240 247 <ListFooter