[GIFs] Reset scroll on query change (#3642)
* scroll list to top on query change * dismiss keyboard on swipe list * don't need an effectzio/stable
parent
0b3cc59019
commit
f49d73dd00
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue