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

* scroll list to top on query change

* dismiss keyboard on swipe list

* don't need an effect
zio/stable
Samuel Newman 2024-04-22 22:18:39 +01:00 committed by GitHub
parent 0b3cc59019
commit f49d73dd00
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 11 deletions

View File

@ -197,11 +197,10 @@ export function Inner({
export const ScrollableInner = Inner
export function InnerFlatList({
label,
style,
...props
}: FlatListProps<any> & {label: string}) {
export const InnerFlatList = React.forwardRef<
FlatList,
FlatListProps<any> & {label: string}
>(function InnerFlatList({label, style, ...props}, ref) {
const {gtMobile} = useBreakpoints()
return (
<Inner
@ -213,12 +212,13 @@ export function InnerFlatList({
overflow: 'hidden',
}}>
<FlatList
ref={ref}
style={[gtMobile ? a.px_2xl : a.px_xl, flatten(style)]}
{...props}
/>
</Inner>
)
}
})
export function Handle() {
return null

View File

@ -1,6 +1,7 @@
import React, {useCallback, useMemo, useRef, useState} from 'react'
import {TextInput, View} from 'react-native'
import {Keyboard, TextInput, View} from 'react-native'
import {Image} from 'expo-image'
import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@ -82,7 +83,8 @@ function GifList({
const {_} = useLingui()
const t = useTheme()
const {gtMobile} = useBreakpoints()
const ref = useRef<TextInput>(null)
const textInputRef = useRef<TextInput>(null)
const listRef = useRef<BottomSheetFlatListMethods>(null)
const [undeferredSearch, setSearch] = useState('')
const search = useThrottledValue(undeferredSearch, 500)
@ -133,7 +135,7 @@ function GifList({
const onGoBack = useCallback(() => {
if (isSearching) {
// clear the input and reset the state
ref.current?.clear()
textInputRef.current?.clear()
setSearch('')
} else {
control.close()
@ -180,10 +182,13 @@ function GifList({
<TextField.Input
label={_(msg`Search GIFs`)}
placeholder={_(msg`Powered by GIPHY`)}
onChangeText={setSearch}
onChangeText={text => {
setSearch(text)
listRef.current?.scrollToOffset({offset: 0, animated: false})
}}
returnKeyType="search"
clearButtonMode="while-editing"
inputRef={ref}
inputRef={textInputRef}
maxLength={50}
onKeyPress={({nativeEvent}) => {
if (nativeEvent.key === 'Escape') {
@ -200,6 +205,7 @@ function GifList({
<>
{gtMobile && <Dialog.Close />}
<Dialog.InnerFlatList
ref={listRef}
key={gtMobile ? '3 cols' : '2 cols'}
data={flattenedData}
renderItem={renderItem}
@ -235,6 +241,7 @@ function GifList({
keyExtractor={(item: Gif) => item.id}
// @ts-expect-error web only
style={isWeb && {minHeight: '100vh'}}
onScrollBeginDrag={() => Keyboard.dismiss()}
ListFooterComponent={
hasData ? (
<ListFooter