Add offline search functionality for addresses

src/CONST.ts

@@ -57,6 +57,7 @@ const chatTypes = {
 const cardActiveStates: number[] = [2, 3, 4, 7];
 
 const CONST = {
+    RECENT_WAYPOINTS_NUMBER: 20,
     MERGED_ACCOUNT_PREFIX: 'MERGED_',
     DEFAULT_POLICY_ROOM_CHAT_TYPES: [chatTypes.POLICY_ADMINS, chatTypes.POLICY_ANNOUNCE, chatTypes.DOMAIN_ALL],
 

src/components/AddressSearch/index.tsx

@@ -22,7 +22,25 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import CurrentLocationButton from './CurrentLocationButton';
 import isCurrentTargetInsideContainer from './isCurrentTargetInsideContainer';
-import type {AddressSearchProps, RenamedInputKeysProps} from './types';
+import listViewOverflow from './listViewOverflow';
+import type {AddressSearchProps, PredefinedPlace, RenamedInputKeysProps} 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())));
+}
 
 // The error that's being thrown below will be ignored until we fork the
 // react-native-google-places-autocomplete repo and replace the
@@ -40,6 +58,7 @@ function AddressSearch(
         isLimitedToUSA = false,
         label,
         maxInputLength,
+        onFocus,
         onBlur,
         onInputChange,
         onPress,
@@ -297,10 +316,16 @@ function AddressSearch(
         };
     }, []);
 
+    const filteredPredefinedPlaces = useMemo(() => {
+        if (!isOffline || !searchValue) {
+            return predefinedPlaces ?? [];
+        }
+        return predefinedPlaces?.filter((predefinedPlace) => isPlaceMatchForSearch(searchValue, predefinedPlace)) ?? [];
+    }, [isOffline, predefinedPlaces, searchValue]);
+
     const listEmptyComponent = useCallback(
-        () =>
-            !!isOffline || !isTyping ? null : <Text style={[styles.textLabel, styles.colorMuted, styles.pv4, styles.ph3, styles.overflowAuto]}>{translate('common.noResultsFound')}</Text>,
-        [isOffline, isTyping, styles, translate],
+        () => (!isTyping ? null : <Text style={[styles.textLabel, styles.colorMuted, styles.pv4, styles.ph3, styles.overflowAuto]}>{translate('common.noResultsFound')}</Text>),
+        [isTyping, styles, translate],
     );
 
     const listLoader = useCallback(
@@ -337,11 +362,10 @@ function AddressSearch(
                     ref={containerRef}
                 >
                     <GooglePlacesAutocomplete
-                        disableScroll
                         fetchDetails
                         suppressDefaultStyles
                         enablePoweredByContainer={false}
-                        predefinedPlaces={predefinedPlaces ?? undefined}
+                        predefinedPlaces={filteredPredefinedPlaces}
                         listEmptyComponent={listEmptyComponent}
                         listLoaderComponent={listLoader}
                         renderHeaderComponent={renderHeaderComponent}
@@ -384,6 +408,7 @@ function AddressSearch(
                             shouldSaveDraft,
                             onFocus: () => {
                                 setIsFocused(true);
+                                onFocus?.();
                             },
                             onBlur: (event) => {
                                 if (!isCurrentTargetInsideContainer(event, containerRef)) {
@@ -413,10 +438,18 @@ function AddressSearch(
                         }}
                         styles={{
                             textInputContainer: [styles.flexColumn],
-                            listView: [StyleUtils.getGoogleListViewStyle(displayListViewBorder), styles.overflowAuto, styles.borderLeft, styles.borderRight, !isFocused && {height: 0}],
+                            listView: [
+                                StyleUtils.getGoogleListViewStyle(displayListViewBorder),
+                                listViewOverflow,
+                                styles.borderLeft,
+                                styles.borderRight,
+                                styles.flexGrow0,
+                                !isFocused && styles.h0,
+                            ],
                             row: [styles.pv4, styles.ph3, styles.overflowAuto],
                             description: [styles.googleSearchText],
                             separator: [styles.googleSearchSeparator],
+                            container: [styles.mh100],
                         }}
                         numberOfLines={2}
                         isRowScrollable={false}
@@ -440,11 +473,13 @@ function AddressSearch(
                             )
                         }
                         placeholder=""
-                    />
-                    <LocationErrorMessage
-                        onClose={() => setLocationErrorCode(null)}
-                        locationErrorCode={locationErrorCode}
-                    />
+                        listViewDisplayed
+                    >
+                        <LocationErrorMessage
+                            onClose={() => setLocationErrorCode(null)}
+                            locationErrorCode={locationErrorCode}
+                        />
+                    </GooglePlacesAutocomplete>
                 </View>
             </ScrollView>
             {isFetchingCurrentLocation && <FullScreenLoadingIndicator />}

src/components/AddressSearch/listViewOverflow/index.native.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
+import {defaultStyles} from '@styles/index';
+
+export default defaultStyles.overflowHidden;

src/components/AddressSearch/listViewOverflow/index.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
+import {defaultStyles} from '@styles/index';
+
+export default defaultStyles.overflowAuto;

src/components/AddressSearch/types.ts

@@ -35,13 +35,20 @@ type StreetValue = {
     street: string;
 };
 
+type PredefinedPlace = Place & {
+    name?: string;
+};
+
 type AddressSearchProps = {
     /** The ID used to uniquely identify the input in a Form */
     inputID?: string;
 
     /** 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;
 
@@ -76,7 +83,7 @@ type AddressSearchProps = {
     canUseCurrentLocation?: boolean;
 
     /** A list of predefined places that can be shown when the user isn't searching for something */
-    predefinedPlaces?: Place[] | null;
+    predefinedPlaces?: PredefinedPlace[] | null;
 
     /** A map of inputID key names */
     renamedInputKeys?: RenamedInputKeysProps;
@@ -96,4 +103,4 @@ type AddressSearchProps = {
 
 type IsCurrentTargetInsideContainerType = (event: FocusEvent | NativeSyntheticEvent<TextInputFocusEventData>, containerRef: RefObject<View | HTMLElement>) => boolean;
 
-export type {CurrentLocationButtonProps, AddressSearchProps, RenamedInputKeysProps, IsCurrentTargetInsideContainerType, StreetValue};
+export type {CurrentLocationButtonProps, AddressSearchProps, RenamedInputKeysProps, IsCurrentTargetInsideContainerType, StreetValue, PredefinedPlace};

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, View, ViewStyle} from 'react-native';
-import {Keyboard} from 'react-native';
+import type {ScrollView as RNScrollView, StyleProp, ViewStyle} from 'react-native';
+import {Keyboard, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
@@ -104,7 +104,7 @@ function FormWrapper({
                 ref={formContentRef}
                 style={[style, safeAreaPaddingBottomStyle]}
             >
-                {children}
+                <View style={styles.flex1}>{children}</View>
                 {isSubmitButtonVisible && (
                     <FormAlertWithSubmitButton
                         buttonText={submitButtonText}
@@ -153,7 +153,7 @@ function FormWrapper({
                 scrollContextEnabled ? (
                     <ScrollViewWithContext
                         style={[styles.w100, styles.flex1]}
-                        contentContainerStyle={styles.flexGrow1}
+                        contentContainerStyle={styles.flex1}
                         keyboardShouldPersistTaps="handled"
                         ref={formRef}
                     >
@@ -162,7 +162,7 @@ function FormWrapper({
                 ) : (
                     <ScrollView
                         style={[styles.w100, styles.flex1]}
-                        contentContainerStyle={styles.flexGrow1}
+                        contentContainerStyle={styles.flex1}
                         keyboardShouldPersistTaps="handled"
                         ref={formRef}
                     >

src/hooks/useSubmitButtonVisibility.ts

@@ -0,0 +1,71 @@
+import {useEffect, useRef, useState} from 'react';
+import {Dimensions} from 'react-native';
+import getPlatform from '@libs/getPlatform';
+import CONST from '@src/CONST';
+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();
+    const platform = getPlatform();
+    const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
+
+    // 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 (getPlatform() !== CONST.PLATFORM.WEB || !isSmallScreenWidthRef.current) {
+                return;
+            }
+
+            if (window.height < initialWindowHeightRef.current) {
+                setIsSubmitButtonVisible(false);
+                return;
+            }
+
+            setIsSubmitButtonVisible(true);
+        });
+
+        return () => dimensionsListener.remove();
+    }, []);
+
+    // 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 = () => {
+        if (!isNative) {
+            return;
+        }
+        setIsSubmitButtonVisible(true);
+    };
+
+    // Web: the submit button is only hidden when the window height becomes smaller,
+    // so executing this function won't do anything
+    const hideSubmitButton = () => {
+        if (!isNative) {
+            return;
+        }
+        setIsSubmitButtonVisible(false);
+    };
+
+    // When the submit button is hidden there's 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;

src/libs/actions/Transaction.ts

@@ -103,7 +103,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, 5));
+        Onyx.merge(ONYXKEYS.NVP_RECENT_WAYPOINTS, clonedWaypoints.slice(0, CONST.RECENT_WAYPOINTS_NUMBER));
     }
 }