From df9fe9bc0e8eaac414987b2cd856b82539414a57 Mon Sep 17 00:00:00 2001 From: Jingtai Piao Date: Thu, 23 May 2024 20:40:19 +1000 Subject: [PATCH 1/4] Use flatlist instead of flashlist --- .../BaseAutoCompleteSuggestions.tsx | 24 ++++--------------- 1 file changed, 5 insertions(+), 19 deletions(-) diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx index 32ac018acb0..4c11f1f0e35 100644 --- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx +++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx @@ -1,16 +1,12 @@ -import {FlashList} from '@shopify/flash-list'; import type {ReactElement} from 'react'; -import React, {useCallback, useEffect, useMemo, useRef} from 'react'; -// We take ScrollView from this package to properly handle the scrolling of AutoCompleteSuggestions in chats since one scroll is nested inside another -import {ScrollView} from 'react-native-gesture-handler'; +import React, {useCallback, useEffect, useRef} from 'react'; +import {FlatList} from 'react-native-gesture-handler'; import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import ColorSchemeWrapper from '@components/ColorSchemeWrapper'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; -import variables from '@styles/variables'; import CONST from '@src/CONST'; import type {AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps} from './types'; @@ -45,11 +41,10 @@ function BaseAutoCompleteSuggestions({ isSuggestionPickerLarge, keyExtractor, }: AutoCompleteSuggestionsProps) { - const {windowWidth, isLargeScreenWidth} = useWindowDimensions(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const rowHeight = useSharedValue(0); - const scrollRef = useRef>(null); + const scrollRef = useRef>(null); /** * Render a suggestion menu item component. */ @@ -72,13 +67,7 @@ function BaseAutoCompleteSuggestions({ const innerHeight = CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length; const animatedStyles = useAnimatedStyle(() => StyleUtils.getAutoCompleteSuggestionContainerStyle(rowHeight.value)); - const estimatedListSize = useMemo( - () => ({ - height: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length, - width: (isLargeScreenWidth ? windowWidth - variables.sideBarWidth : windowWidth) - CONST.CHAT_FOOTER_HORIZONTAL_PADDING, - }), - [isLargeScreenWidth, suggestions.length, windowWidth], - ); + useEffect(() => { rowHeight.value = withTiming(measureHeightOfSuggestionRows(suggestions.length, isSuggestionPickerLarge), { duration: 100, @@ -105,14 +94,11 @@ function BaseAutoCompleteSuggestions({ }} > - rowHeight.value} From bbc997ed296e0577bb48f8df3846c6451add6504 Mon Sep 17 00:00:00 2001 From: Jingtai Piao Date: Thu, 23 May 2024 21:34:22 +1000 Subject: [PATCH 2/4] Trigger recheck CLA --- .../BaseAutoCompleteSuggestions.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx index 4c11f1f0e35..75d506df252 100644 --- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx +++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx @@ -1,14 +1,15 @@ -import type {ReactElement} from 'react'; -import React, {useCallback, useEffect, useRef} from 'react'; -import {FlatList} from 'react-native-gesture-handler'; -import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; +import type { ReactElement } from 'react'; +import React, { useCallback, useEffect, useRef } from 'react'; +import { FlatList } from 'react-native-gesture-handler'; +import Animated, { Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'; import ColorSchemeWrapper from '@components/ColorSchemeWrapper'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import CONST from '@src/CONST'; -import type {AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps} from './types'; +import type { AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps } from './types'; + const measureHeightOfSuggestionRows = (numRows: number, isSuggestionPickerLarge: boolean): number => { if (isSuggestionPickerLarge) { @@ -31,7 +32,6 @@ const measureHeightOfSuggestionRows = (numRows: number, isSuggestionPickerLarge: * The desired pattern for all platforms is to do nothing on long-press. * On the native platform, tapping on auto-complete suggestions will not blur the main input. */ - function BaseAutoCompleteSuggestions({ highlightedSuggestionIndex, onSelect, @@ -111,4 +111,4 @@ function BaseAutoCompleteSuggestions({ BaseAutoCompleteSuggestions.displayName = 'BaseAutoCompleteSuggestions'; -export default BaseAutoCompleteSuggestions; +export default BaseAutoCompleteSuggestions; \ No newline at end of file From 8e312c149a7dae521236aed398d300669918d705 Mon Sep 17 00:00:00 2001 From: Jingtai Piao Date: Thu, 23 May 2024 21:36:38 +1000 Subject: [PATCH 3/4] Remove unnecessary changes --- .../AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx index 75d506df252..052f3a6b6f4 100644 --- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx +++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx @@ -10,7 +10,6 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import CONST from '@src/CONST'; import type { AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps } from './types'; - const measureHeightOfSuggestionRows = (numRows: number, isSuggestionPickerLarge: boolean): number => { if (isSuggestionPickerLarge) { if (numRows > CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER) { From d231a2216e97e64d5d77cb9307d13dff653baef2 Mon Sep 17 00:00:00 2001 From: Jingtai Piao Date: Thu, 23 May 2024 21:37:59 +1000 Subject: [PATCH 4/4] Remove unnecessary changes --- .../BaseAutoCompleteSuggestions.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx index 052f3a6b6f4..4c11f1f0e35 100644 --- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx +++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx @@ -1,14 +1,14 @@ -import type { ReactElement } from 'react'; -import React, { useCallback, useEffect, useRef } from 'react'; -import { FlatList } from 'react-native-gesture-handler'; -import Animated, { Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'; +import type {ReactElement} from 'react'; +import React, {useCallback, useEffect, useRef} from 'react'; +import {FlatList} from 'react-native-gesture-handler'; +import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import ColorSchemeWrapper from '@components/ColorSchemeWrapper'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import CONST from '@src/CONST'; -import type { AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps } from './types'; +import type {AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps} from './types'; const measureHeightOfSuggestionRows = (numRows: number, isSuggestionPickerLarge: boolean): number => { if (isSuggestionPickerLarge) { @@ -31,6 +31,7 @@ const measureHeightOfSuggestionRows = (numRows: number, isSuggestionPickerLarge: * The desired pattern for all platforms is to do nothing on long-press. * On the native platform, tapping on auto-complete suggestions will not blur the main input. */ + function BaseAutoCompleteSuggestions({ highlightedSuggestionIndex, onSelect, @@ -110,4 +111,4 @@ function BaseAutoCompleteSuggestions({ BaseAutoCompleteSuggestions.displayName = 'BaseAutoCompleteSuggestions'; -export default BaseAutoCompleteSuggestions; \ No newline at end of file +export default BaseAutoCompleteSuggestions;