feat(geo): Forward ref to react-map-gl component (#1791)

* Forward ref to react-map-gl component

* Add changeset

Author: slaymance

.changeset/nine-pillows-look.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui-react': minor
+---
+
+Add forward ref functionality to MapView

packages/react/src/components/Geo/MapView/index.tsx

@@ -1,9 +1,9 @@
 import { Amplify, Auth } from 'aws-amplify';
 import maplibregl from 'maplibre-gl';
 import { AmplifyMapLibreRequest } from 'maplibre-gl-js-amplify';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { forwardRef, useEffect, useMemo, useState } from 'react';
 import ReactMapGL from 'react-map-gl';
-import type { MapProps, TransformRequestFunction } from 'react-map-gl';
+import type { MapProps, MapRef, TransformRequestFunction } from 'react-map-gl';
 
 export type MapViewProps = Omit<MapProps, 'transformRequest'>;
 
@@ -21,66 +21,64 @@ export type MapViewProps = Omit<MapProps, 'transformRequest'>;
  *   return <MapView />
  * }
  */
-export const MapView = ({
-  mapLib,
-  mapStyle,
-  style,
-  ...props
-}: MapViewProps) => {
-  const amplifyConfig = Amplify.configure() as any;
-  const geoConfig = useMemo(
-    () =>
-      amplifyConfig.geo?.amazon_location_service ??
-      amplifyConfig.geo?.AmazonLocationService ??
-      {},
-    [amplifyConfig]
-  );
-  const [transformRequest, setTransformRequest] = useState<
-    TransformRequestFunction | undefined
-  >();
+export const MapView = forwardRef<MapRef, MapViewProps>(
+  ({ mapLib, mapStyle, style, ...props }, ref) => {
+    const amplifyConfig = Amplify.configure() as any;
+    const geoConfig = useMemo(
+      () =>
+        amplifyConfig.geo?.amazon_location_service ??
+        amplifyConfig.geo?.AmazonLocationService ??
+        {},
+      [amplifyConfig]
+    );
+    const [transformRequest, setTransformRequest] = useState<
+      TransformRequestFunction | undefined
+    >();
 
-  const styleProps = useMemo<React.CSSProperties>(
-    () => ({
-      height: '100vh',
-      position: 'relative',
-      width: '100vw',
-      ...style,
-    }),
-    [style]
-  );
+    const styleProps = useMemo<React.CSSProperties>(
+      () => ({
+        height: '100vh',
+        position: 'relative',
+        width: '100vw',
+        ...style,
+      }),
+      [style]
+    );
 
-  /**
-   * The transformRequest is a callback used by react-map-gl before it makes a request for an external URL. It signs
-   * the request with AWS Sigv4 Auth, provided valid credentials, and is how we integrate react-map-gl with Amplify Geo
-   * and Amazon Location Service. Once the transformRequest is created, we render the map.
-   */
-  useEffect(() => {
-    (async () => {
-      const credentials = await Auth.currentUserCredentials();
+    /**
+     * The transformRequest is a callback used by react-map-gl before it makes a request for an external URL. It signs
+     * the request with AWS Sigv4 Auth, provided valid credentials, and is how we integrate react-map-gl with Amplify Geo
+     * and Amazon Location Service. Once the transformRequest is created, we render the map.
+     */
+    useEffect(() => {
+      (async () => {
+        const credentials = await Auth.currentUserCredentials();
 
-      if (credentials) {
-        const { region } = geoConfig;
-        const { transformRequest: amplifyTransformRequest } =
-          new AmplifyMapLibreRequest(credentials, region);
-        setTransformRequest(() => amplifyTransformRequest);
-      }
-    })();
-  }, [geoConfig]);
+        if (credentials) {
+          const { region } = geoConfig;
+          const { transformRequest: amplifyTransformRequest } =
+            new AmplifyMapLibreRequest(credentials, region);
+          setTransformRequest(() => amplifyTransformRequest);
+        }
+      })();
+    }, [geoConfig]);
 
-  /**
-   * The mapLib property is used by react-map-gl@v7 to override the underlying map library. The default library is
-   * mapbox-gl-js, which uses its own copyrighted license. We override the map library with the BSD-licensed
-   * maplibre-gl-js.
-   *
-   * The default mapStyle we use is just the map ID provided by aws-exports.
-   */
-  return transformRequest ? (
-    <ReactMapGL
-      {...props}
-      mapLib={mapLib ?? maplibregl}
-      mapStyle={mapStyle ?? geoConfig.maps?.default}
-      style={styleProps}
-      transformRequest={transformRequest}
-    />
-  ) : null;
-};
+    /**
+     * The mapLib property is used by react-map-gl@v7 to override the underlying map library. The default library is
+     * mapbox-gl-js, which uses its own copyrighted license. We override the map library with the BSD-licensed
+     * maplibre-gl-js.
+     *
+     * The default mapStyle we use is just the map ID provided by aws-exports.
+     */
+    return transformRequest ? (
+      <ReactMapGL
+        {...props}
+        mapLib={mapLib ?? maplibregl}
+        mapStyle={mapStyle ?? geoConfig.maps?.default}
+        ref={ref}
+        style={styleProps}
+        transformRequest={transformRequest}
+      />
+    ) : null;
+  }
+);