From ad202800542b480ab212b5acabe88b73c2834a7f Mon Sep 17 00:00:00 2001 From: Andrew Rosiclair Date: Wed, 29 May 2024 12:02:07 -0400 Subject: [PATCH] Revert "Merge pull request #35045 from callstack-internal/issues/30123" This reverts commit 849a0d40cc21aa9f2ee85b0c77902de78c77395f, reversing changes made to 611b86f7a1755d2e678fbb271cd101fc966073a9. --- src/CONST.ts | 1 - src/components/AddressSearch/index.tsx | 61 ++++------------ .../listViewOverflow/index.native.ts | 4 - .../AddressSearch/listViewOverflow/index.ts | 4 - src/components/AddressSearch/types.ts | 11 +-- src/components/Form/FormProvider.tsx | 3 - src/components/Form/FormWrapper.tsx | 14 ++-- src/hooks/useSubmitButtonVisibility.native.ts | 33 --------- src/hooks/useSubmitButtonVisibility.ts | 58 --------------- src/libs/actions/Transaction.ts | 2 +- .../request/step/IOURequestStepWaypoint.tsx | 73 +++++++++---------- src/styles/index.ts | 1 + src/styles/utils/sizing.ts | 3 - 13 files changed, 56 insertions(+), 212 deletions(-) delete mode 100644 src/components/AddressSearch/listViewOverflow/index.native.ts delete mode 100644 src/components/AddressSearch/listViewOverflow/index.ts delete mode 100644 src/hooks/useSubmitButtonVisibility.native.ts delete mode 100644 src/hooks/useSubmitButtonVisibility.ts diff --git a/src/CONST.ts b/src/CONST.ts index 601258890e33..b06e6e5b761e 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -73,7 +73,6 @@ const onboardingChoices = { type OnboardingPurposeType = ValueOf; const CONST = { - RECENT_WAYPOINTS_NUMBER: 20, DEFAULT_POLICY_ROOM_CHAT_TYPES: [chatTypes.POLICY_ADMINS, chatTypes.POLICY_ANNOUNCE, chatTypes.DOMAIN_ALL], // Note: Group and Self-DM excluded as these are not tied to a Workspace diff --git a/src/components/AddressSearch/index.tsx b/src/components/AddressSearch/index.tsx index d1dc42bb4678..17a2f6212447 100644 --- a/src/components/AddressSearch/index.tsx +++ b/src/components/AddressSearch/index.tsx @@ -23,25 +23,7 @@ import CONST from '@src/CONST'; import type {Address} from '@src/types/onyx/PrivatePersonalDetails'; import CurrentLocationButton from './CurrentLocationButton'; import isCurrentTargetInsideContainer from './isCurrentTargetInsideContainer'; -import listViewOverflow from './listViewOverflow'; -import type {AddressSearchProps, PredefinedPlace} from './types'; - -/** - * Check if the place matches the search by the place name or description. - * @param search The search string for a place - * @param place The place to check for a match on the search - * @returns true if search is related to place, otherwise it returns false. - */ -function isPlaceMatchForSearch(search: string, place: PredefinedPlace): boolean { - if (!search) { - return true; - } - if (!place) { - return false; - } - const fullSearchSentence = `${place.name ?? ''} ${place.description}`; - return search.split(' ').every((searchTerm) => !searchTerm || (searchTerm && fullSearchSentence.toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase()))); -} +import type {AddressSearchProps} from './types'; // The error that's being thrown below will be ignored until we fork the // react-native-google-places-autocomplete repo and replace the @@ -59,7 +41,6 @@ function AddressSearch( isLimitedToUSA = false, label, maxInputLength, - onFocus, onBlur, onInputChange, onPress, @@ -317,16 +298,10 @@ function AddressSearch( }; }, []); - const filteredPredefinedPlaces = useMemo(() => { - if (!isOffline || !searchValue) { - return predefinedPlaces ?? []; - } - return predefinedPlaces?.filter((predefinedPlace) => isPlaceMatchForSearch(searchValue, predefinedPlace)) ?? []; - }, [isOffline, predefinedPlaces, searchValue]); - const listEmptyComponent = useCallback( - () => (!isTyping ? null : {translate('common.noResultsFound')}), - [isTyping, styles, translate], + () => + !!isOffline || !isTyping ? null : {translate('common.noResultsFound')}, + [isOffline, isTyping, styles, translate], ); const listLoader = useCallback( @@ -363,10 +338,11 @@ function AddressSearch( ref={containerRef} > - {!!title && {title}} + {!!title && {title}} {subtitle} ); @@ -409,7 +385,6 @@ function AddressSearch( shouldSaveDraft, onFocus: () => { setIsFocused(true); - onFocus?.(); }, onBlur: (event) => { if (!isCurrentTargetInsideContainer(event, containerRef)) { @@ -439,18 +414,10 @@ function AddressSearch( }} styles={{ textInputContainer: [styles.flexColumn], - listView: [ - StyleUtils.getGoogleListViewStyle(displayListViewBorder), - listViewOverflow, - styles.borderLeft, - styles.borderRight, - styles.flexGrow0, - !isFocused && styles.h0, - ], + listView: [StyleUtils.getGoogleListViewStyle(displayListViewBorder), styles.overflowAuto, styles.borderLeft, styles.borderRight, !isFocused && {height: 0}], row: [styles.pv4, styles.ph3, styles.overflowAuto], description: [styles.googleSearchText], separator: [styles.googleSearchSeparator], - container: [styles.mh100], }} numberOfLines={2} isRowScrollable={false} @@ -474,13 +441,11 @@ function AddressSearch( ) } placeholder="" - listViewDisplayed - > - setLocationErrorCode(null)} - locationErrorCode={locationErrorCode} - /> - + /> + setLocationErrorCode(null)} + locationErrorCode={locationErrorCode} + /> {isFetchingCurrentLocation && } diff --git a/src/components/AddressSearch/listViewOverflow/index.native.ts b/src/components/AddressSearch/listViewOverflow/index.native.ts deleted file mode 100644 index 36b9f4005376..000000000000 --- a/src/components/AddressSearch/listViewOverflow/index.native.ts +++ /dev/null @@ -1,4 +0,0 @@ -// eslint-disable-next-line no-restricted-imports -import {defaultStyles} from '@styles/index'; - -export default defaultStyles.overflowHidden; diff --git a/src/components/AddressSearch/listViewOverflow/index.ts b/src/components/AddressSearch/listViewOverflow/index.ts deleted file mode 100644 index ae8bf35cc80c..000000000000 --- a/src/components/AddressSearch/listViewOverflow/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -// eslint-disable-next-line no-restricted-imports -import {defaultStyles} from '@styles/index'; - -export default defaultStyles.overflowAuto; diff --git a/src/components/AddressSearch/types.ts b/src/components/AddressSearch/types.ts index 22cc3834b7a9..bc7acf3f7e40 100644 --- a/src/components/AddressSearch/types.ts +++ b/src/components/AddressSearch/types.ts @@ -24,10 +24,6 @@ type StreetValue = { street: string; }; -type PredefinedPlace = Place & { - name?: string; -}; - type AddressSearchProps = { /** The ID used to uniquely identify the input in a Form */ inputID?: string; @@ -35,9 +31,6 @@ type AddressSearchProps = { /** Saves a draft of the input value when used in a form */ shouldSaveDraft?: boolean; - /** Callback that is called when the text input is focused */ - onFocus?: () => void; - /** Callback that is called when the text input is blurred */ onBlur?: () => void; @@ -72,7 +65,7 @@ type AddressSearchProps = { canUseCurrentLocation?: boolean; /** A list of predefined places that can be shown when the user isn't searching for something */ - predefinedPlaces?: PredefinedPlace[] | null; + predefinedPlaces?: Place[] | null; /** A map of inputID key names */ renamedInputKeys?: Address; @@ -92,4 +85,4 @@ type AddressSearchProps = { type IsCurrentTargetInsideContainerType = (event: FocusEvent | NativeSyntheticEvent, containerRef: RefObject) => boolean; -export type {CurrentLocationButtonProps, AddressSearchProps, IsCurrentTargetInsideContainerType, StreetValue, PredefinedPlace}; +export type {CurrentLocationButtonProps, AddressSearchProps, IsCurrentTargetInsideContainerType, StreetValue}; diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx index b6699c0cf3f4..3d20f910dca0 100644 --- a/src/components/Form/FormProvider.tsx +++ b/src/components/Form/FormProvider.tsx @@ -74,9 +74,6 @@ type FormProviderProps = FormProvider /** Whether to apply flex to the submit button */ submitFlexEnabled?: boolean; - - /** Whether the form container should grow or adapt to the viewable available space */ - shouldContainerGrow?: boolean; }; function FormProvider( diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx index e7c9dba5c77a..5c74fd466a15 100644 --- a/src/components/Form/FormWrapper.tsx +++ b/src/components/Form/FormWrapper.tsx @@ -1,8 +1,8 @@ import React, {useCallback, useMemo, useRef} from 'react'; import type {RefObject} from 'react'; // eslint-disable-next-line no-restricted-imports -import type {ScrollView as RNScrollView, StyleProp, ViewStyle} from 'react-native'; -import {Keyboard, View} from 'react-native'; +import type {ScrollView as RNScrollView, StyleProp, View, ViewStyle} from 'react-native'; +import {Keyboard} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton'; @@ -32,9 +32,6 @@ type FormWrapperProps = ChildrenProps & /** Whether to apply flex to the submit button */ submitFlexEnabled?: boolean; - /** Whether the form container should grow or adapt to the viewable available space */ - shouldContainerGrow?: boolean; - /** Server side errors keyed by microtime */ errors: FormInputErrors; @@ -63,7 +60,6 @@ function FormWrapper({ scrollContextEnabled = false, shouldHideFixErrorsAlert = false, disablePressOnEnter = true, - shouldContainerGrow = true, }: FormWrapperProps) { const styles = useThemeStyles(); const formRef = useRef(null); @@ -108,7 +104,7 @@ function FormWrapper({ ref={formContentRef} style={[style, safeAreaPaddingBottomStyle.paddingBottom ? safeAreaPaddingBottomStyle : styles.pb5]} > - {children} + {children} {isSubmitButtonVisible && ( @@ -168,7 +164,7 @@ function FormWrapper({ ) : ( diff --git a/src/hooks/useSubmitButtonVisibility.native.ts b/src/hooks/useSubmitButtonVisibility.native.ts deleted file mode 100644 index a962b52ce1f0..000000000000 --- a/src/hooks/useSubmitButtonVisibility.native.ts +++ /dev/null @@ -1,33 +0,0 @@ -import {useState} from 'react'; -import useSafeAreaInsets from './useSafeAreaInsets'; -import useThemeStyles from './useThemeStyles'; - -// Useful when there's a need to hide the submit button from FormProvider, -// to let form content fill the page when virtual keyboard is shown -function useSubmitButtonVisibility() { - const styles = useThemeStyles(); - const [isSubmitButtonVisible, setIsSubmitButtonVisible] = useState(true); - const {bottom} = useSafeAreaInsets(); - - const showSubmitButton = () => { - setIsSubmitButtonVisible(true); - }; - - const hideSubmitButton = () => { - setIsSubmitButtonVisible(false); - }; - - // When the submit button is hidden there's a need to manually - // add its bottom style to the FormProvider style prop, - // otherwise the form content will touch the bottom of the page/screen - const formStyle = !isSubmitButtonVisible && bottom === 0 && styles.mb5; - - return { - isSubmitButtonVisible, - showSubmitButton, - hideSubmitButton, - formStyle, - }; -} - -export default useSubmitButtonVisibility; diff --git a/src/hooks/useSubmitButtonVisibility.ts b/src/hooks/useSubmitButtonVisibility.ts deleted file mode 100644 index 72f704edbe13..000000000000 --- a/src/hooks/useSubmitButtonVisibility.ts +++ /dev/null @@ -1,58 +0,0 @@ -import {useEffect, useRef, useState} from 'react'; -import {Dimensions} from 'react-native'; -import useSafeAreaInsets from './useSafeAreaInsets'; -import useThemeStyles from './useThemeStyles'; -import useWindowDimensions from './useWindowDimensions'; - -// Useful when there's a need to hide the submit button from FormProvider, -// to let form content fill the page when virtual keyboard is shown -function useSubmitButtonVisibility() { - const styles = useThemeStyles(); - const {windowHeight, isSmallScreenWidth} = useWindowDimensions(); - const [isSubmitButtonVisible, setIsSubmitButtonVisible] = useState(true); - const initialWindowHeightRef = useRef(windowHeight); - const isSmallScreenWidthRef = useRef(isSmallScreenWidth); - const {bottom} = useSafeAreaInsets(); - - // Web: the submit button is shown when the height of the window is the same or greater, - // otherwise it's hidden - useEffect(() => { - const dimensionsListener = Dimensions.addEventListener('change', ({window}) => { - if (!isSmallScreenWidthRef.current) { - return; - } - - if (window.height < initialWindowHeightRef.current) { - setIsSubmitButtonVisible(false); - return; - } - - setIsSubmitButtonVisible(true); - }); - - return () => dimensionsListener.remove(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - // Web: the submit button is only shown when the window height is the same or greater, - // so executing this function won't do anything - const showSubmitButton = () => {}; - - // Web: the submit button is only hidden when the window height becomes smaller, - // so executing this function won't do anything - const hideSubmitButton = () => {}; - - // When the submit button is hidden there's a need to manually - // add its bottom style to the FormProvider style prop, - // otherwise the form content will touch the bottom of the page/screen - const formStyle = !isSubmitButtonVisible && bottom === 0 && styles.mb5; - - return { - isSubmitButtonVisible, - showSubmitButton, - hideSubmitButton, - formStyle, - }; -} - -export default useSubmitButtonVisibility; diff --git a/src/libs/actions/Transaction.ts b/src/libs/actions/Transaction.ts index ee306fd44fc8..251c8d046562 100644 --- a/src/libs/actions/Transaction.ts +++ b/src/libs/actions/Transaction.ts @@ -113,7 +113,7 @@ function saveWaypoint(transactionID: string, index: string, waypoint: RecentWayp if (!recentWaypointAlreadyExists && waypoint !== null) { const clonedWaypoints = lodashClone(recentWaypoints); clonedWaypoints.unshift(waypoint); - Onyx.merge(ONYXKEYS.NVP_RECENT_WAYPOINTS, clonedWaypoints.slice(0, CONST.RECENT_WAYPOINTS_NUMBER)); + Onyx.merge(ONYXKEYS.NVP_RECENT_WAYPOINTS, clonedWaypoints.slice(0, 5)); } } diff --git a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx index 374e27819e70..6c0eae98fb85 100644 --- a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx +++ b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx @@ -1,6 +1,7 @@ import {useNavigation} from '@react-navigation/native'; import React, {useMemo, useRef, useState} from 'react'; import type {TextInput} from 'react-native'; +import {View} from 'react-native'; import type {Place} from 'react-native-google-places-autocomplete'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; @@ -16,7 +17,6 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useLocationBias from '@hooks/useLocationBias'; import useNetwork from '@hooks/useNetwork'; -import useSubmitButtonVisibility from '@hooks/useSubmitButtonVisibility'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as ErrorUtils from '@libs/ErrorUtils'; @@ -57,7 +57,6 @@ function IOURequestStepWaypoint({ }: IOURequestStepWaypointProps) { const styles = useThemeStyles(); const {windowWidth} = useWindowDimensions(); - const {isSubmitButtonVisible, showSubmitButton, hideSubmitButton, formStyle} = useSubmitButtonVisibility(); const [isDeleteStopModalOpen, setIsDeleteStopModalOpen] = useState(false); const navigation = useNavigation(); const isFocused = navigation.isFocused(); @@ -158,7 +157,6 @@ function IOURequestStepWaypoint({ onEntryTransitionEnd={() => textInput.current?.focus()} shouldEnableMaxHeight testID={IOURequestStepWaypoint.displayName} - style={styles.overflowHidden} > - { - textInput.current = e as unknown as TextInput; - }} - hint={!isOffline ? 'distance.error.selectSuggestedAddress' : ''} - containerStyles={[styles.mt4]} - label={translate('distance.address')} - defaultValue={waypointAddress} - onPress={selectWaypoint} - onFocus={hideSubmitButton} - onBlur={showSubmitButton} - maxInputLength={CONST.FORM_CHARACTER_LIMIT} - renamedInputKeys={{ - address: `waypoint${pageIndex}`, - city: '', - country: '', - street: '', - street2: '', - zipCode: '', - lat: '', - lng: '', - state: '', - }} - predefinedPlaces={recentWaypoints} - resultTypes="" - /> + + { + textInput.current = e as unknown as TextInput; + }} + hint={!isOffline ? 'distance.error.selectSuggestedAddress' : ''} + containerStyles={[styles.mt4]} + label={translate('distance.address')} + defaultValue={waypointAddress} + onPress={selectWaypoint} + maxInputLength={CONST.FORM_CHARACTER_LIMIT} + renamedInputKeys={{ + address: `waypoint${pageIndex}`, + city: '', + country: '', + street: '', + street2: '', + zipCode: '', + lat: '', + lng: '', + state: '', + }} + predefinedPlaces={recentWaypoints} + resultTypes="" + /> + @@ -249,10 +244,10 @@ export default withWritableReportOrNotFound( recentWaypoints: { key: ONYXKEYS.NVP_RECENT_WAYPOINTS, - // Only grab the most recent 20 waypoints because that's all that is shown in the UI. This also puts them into the format of data + // Only grab the most recent 5 waypoints because that's all that is shown in the UI. This also puts them into the format of data // that the google autocomplete component expects for it's "predefined places" feature. selector: (waypoints) => - (waypoints ? waypoints.slice(0, CONST.RECENT_WAYPOINTS_NUMBER) : []).map((waypoint) => ({ + (waypoints ? waypoints.slice(0, 5) : []).map((waypoint) => ({ name: waypoint.name, description: waypoint.address ?? '', geometry: { diff --git a/src/styles/index.ts b/src/styles/index.ts index 1d9993c07287..5627adb01834 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3481,6 +3481,7 @@ const styles = (theme: ThemeColors) => fontSize: variables.fontSizeNormal, lineHeight: variables.fontSizeNormalHeight, fontFamily: FontUtils.fontFamily.platform.EXP_NEUE, + flex: 1, }, searchPressable: { diff --git a/src/styles/utils/sizing.ts b/src/styles/utils/sizing.ts index ba232ef99b81..bde2837f16ba 100644 --- a/src/styles/utils/sizing.ts +++ b/src/styles/utils/sizing.ts @@ -6,9 +6,6 @@ import type {ViewStyle} from 'react-native'; * https://getbootstrap.com/docs/5.0/utilities/sizing/ */ export default { - h0: { - height: 0, - }, h100: { height: '100%', },