forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[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
+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
+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