Merge pull request #29609 from huzaifa-99/25855-added-location-button…

…-in-address-search

Added location button in address search

src/components/AddressSearch/CurrentLocationButton.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {Text} from 'react-native';
+import colors from '../../styles/colors';
+import styles from '../../styles/styles';
+import Icon from '../Icon';
+import * as Expensicons from '../Icon/Expensicons';
+import PressableWithFeedback from '../Pressable/PressableWithFeedback';
+import getButtonState from '../../libs/getButtonState';
+import * as StyleUtils from '../../styles/StyleUtils';
+import useLocalize from '../../hooks/useLocalize';
+
+const propTypes = {
+    /** Callback that runs when location button is clicked */
+    onPress: PropTypes.func,
+
+    /** Boolean to indicate if the button is clickable */
+    isDisabled: PropTypes.bool,
+};
+
+const defaultProps = {
+    isDisabled: false,
+    onPress: () => {},
+};
+
+function CurrentLocationButton({onPress, isDisabled}) {
+    const {translate} = useLocalize();
+
+    return (
+        <PressableWithFeedback
+            style={[styles.flexRow, styles.pv4, styles.ph3, isDisabled && styles.buttonOpacityDisabled]}
+            hoverStyle={StyleUtils.getButtonBackgroundColorStyle(getButtonState(true), true)}
+            onPress={onPress}
+            accessibilityLabel={translate('location.useCurrent')}
+            disabled={isDisabled}
+            onMouseDown={(e) => e.preventDefault()}
+            onTouchStart={(e) => e.preventDefault()}
+        >
+            <Icon
+                src={Expensicons.Location}
+                fill={colors.green}
+            />
+            <Text style={[styles.textLabel, styles.mh2, isDisabled && styles.userSelectNone]}>{translate('location.useCurrent')}</Text>
+        </PressableWithFeedback>
+    );
+}
+
+CurrentLocationButton.displayName = 'CurrentLocationButton';
+CurrentLocationButton.propTypes = propTypes;
+CurrentLocationButton.defaultProps = defaultProps;
+
+export default CurrentLocationButton;

src/components/AddressSearch/isCurrentTargetInsideContainer.js

@@ -0,0 +1,8 @@
+function isCurrentTargetInsideContainer(event, containerRef) {
+    // The related target check is required here
+    // because without it when we select an option, the onBlur will still trigger setting displayListViewBorder to false
+    // it will make the auto complete component re-render before onPress is called making selecting an option not working.
+    return containerRef.current && event.target && containerRef.current.contains(event.relatedTarget);
+}
+
+export default isCurrentTargetInsideContainer;

src/components/AddressSearch/isCurrentTargetInsideContainer.native.js

@@ -0,0 +1,6 @@
+function isCurrentTargetInsideContainer() {
+    // The related target check is not required here because in native there is no race condition rendering like on the web
+    return false;
+}
+
+export default isCurrentTargetInsideContainer;

src/pages/iou/WaypointEditor.js

@@ -1,7 +1,7 @@
 import React, {useMemo, useRef, useState} from 'react';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import {Keyboard, View} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import {useNavigation} from '@react-navigation/native';
@@ -23,8 +23,6 @@ import * as Transaction from '../../libs/actions/Transaction';
 import * as ValidationUtils from '../../libs/ValidationUtils';
 import ROUTES from '../../ROUTES';
 import transactionPropTypes from '../../components/transactionPropTypes';
-import UserCurrentLocationButton from '../../components/UserCurrentLocationButton';
-import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
 import * as ErrorUtils from '../../libs/ErrorUtils';
 
 const propTypes = {
@@ -78,7 +76,6 @@ const defaultProps = {
 function WaypointEditor({route: {params: {iouType = '', transactionID = '', waypointIndex = '', threadReportID = 0}} = {}, transaction, recentWaypoints}) {
     const {windowWidth} = useWindowDimensions();
     const [isDeleteStopModalOpen, setIsDeleteStopModalOpen] = useState(false);
-    const [isFetchingLocation, setIsFetchingLocation] = useState(false);
     const navigation = useNavigation();
     const isFocused = navigation.isFocused();
     const {translate} = useLocalize();
@@ -176,26 +173,6 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
         Navigation.goBack(ROUTES.MONEY_REQUEST_DISTANCE_TAB.getRoute(iouType));
     };
 
-    /**
-     * Sets user current location as a waypoint
-     * @param {Object} geolocationData
-     * @param {Object} geolocationData.coords
-     * @param {Number} geolocationData.coords.latitude
-     * @param {Number} geolocationData.coords.longitude
-     * @param {Number} geolocationData.timestamp
-     */
-    const selectWaypointFromCurrentLocation = (geolocationData) => {
-        setIsFetchingLocation(false);
-
-        const waypoint = {
-            lat: geolocationData.coords.latitude,
-            lng: geolocationData.coords.longitude,
-            address: CONST.YOUR_LOCATION_TEXT,
-        };
-
-        selectWaypoint(waypoint);
-    };
-
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -242,6 +219,7 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
                 >
                     <View>
                         <AddressSearch
+                            canUseCurrentLocation
                             inputID={`waypoint${waypointIndex}`}
                             ref={(e) => (textInput.current = e)}
                             hint={!isOffline ? 'distance.errors.selectSuggestedAddress' : ''}
@@ -265,17 +243,6 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
                             resultTypes=""
                         />
                     </View>
-                    <UserCurrentLocationButton
-                        isDisabled={isOffline}
-                        onClick={() => {
-                            Keyboard.dismiss();
-
-                            setIsFetchingLocation(true);
-                        }}
-                        onLocationError={() => setIsFetchingLocation(false)}
-                        onLocationFetched={selectWaypointFromCurrentLocation}
-                    />
-                    {isFetchingLocation && <FullScreenLoadingIndicator />}
                 </Form>
             </FullPageNotFoundView>
         </ScreenWrapper>