Only one opened callout at a time (#730)

* Only one opened callout at a time

* Revert uneeded change

* Update comment

Author: YoussefHenna

packages/maps/src/components/MapMarker.tsx

@@ -7,7 +7,10 @@ import {
   Text,
 } from "react-native";
 import { Marker as MapMarkerComponent } from "./react-native-maps";
-import type { MapMarkerProps as MapMarkerComponentProps } from "react-native-maps";
+import type {
+  MapMarkerProps as MapMarkerComponentProps,
+  MapMarker as MapMarkerRefType,
+} from "react-native-maps";
 import MapCallout, { renderCallout } from "./MapCallout";
 import { flattenReactFragments } from "@draftbit/ui";
 
@@ -43,7 +46,9 @@ export function renderMarker(
     description,
     ...rest
   }: MapMarkerProps,
-  key?: React.Key
+  key?: React.Key,
+  ref?: React.Ref<MapMarkerRefType>,
+  onMarkerPress?: () => void
 ) {
   const childrenArray = flattenReactFragments(
     React.Children.toArray(children) as React.ReactElement[]
@@ -73,12 +78,14 @@ export function renderMarker(
 
   return (
     <MapMarkerComponent
+      ref={ref}
       key={key}
       coordinate={{
         latitude,
         longitude,
       }}
       onPress={(event) => {
+        onMarkerPress?.();
         const coordinate = event.nativeEvent.coordinate;
         onPress?.(coordinate.latitude, coordinate.longitude);
       }}

packages/maps/src/components/MapView.tsx

@@ -11,6 +11,19 @@ import MapMarkerCluster from "./marker-cluster/MapMarkerCluster";
 import { MapViewContext, ZoomLocation } from "./MapViewCommon";
 import { MapMarkerClusterView } from "./marker-cluster";
 import { flattenReactFragments } from "@draftbit/ui";
+import type { MapMarker as MapMarkerRefType } from "react-native-maps";
+
+export interface MapMarkerContextType {
+  onMarkerPress: (marker: MapMarkerProps) => void;
+  getMarkerRef: (
+    marker: MapMarkerProps
+  ) => React.Ref<MapMarkerRefType> | undefined;
+}
+
+export const MapMarkerContext = React.createContext<MapMarkerContextType>({
+  onMarkerPress: () => {},
+  getMarkerRef: () => undefined,
+});
 
 export interface MapViewProps<T>
   extends Omit<MapViewComponentProps, "onRegionChangeComplete"> {
@@ -35,10 +48,13 @@ class MapView<T> extends React.Component<
   MapViewState
 > {
   private mapRef: React.RefObject<any>;
+  private markerRefs: Map<string, React.RefObject<MapMarkerRefType>>;
+
   constructor(props: React.PropsWithChildren<MapViewProps<T>>) {
     super(props);
     this.state = { region: null };
     this.mapRef = React.createRef();
+    this.markerRefs = new Map();
   }
 
   componentDidUpdate(prevProps: React.PropsWithChildren<MapViewProps<T>>) {
@@ -162,6 +178,23 @@ class MapView<T> extends React.Component<
     return nearbyMarkers;
   }
 
+  // Dismiss all other callouts except the one just pressed. Maintains that only one is opened at a time
+  private onMarkerPress(markerIdentifier: string) {
+    for (const [idenfitifer, markerRef] of this.markerRefs) {
+      if (idenfitifer !== markerIdentifier) markerRef.current?.hideCallout();
+    }
+  }
+
+  private getMarkerRef(markerIdentifier: string) {
+    if (this.markerRefs.has(markerIdentifier)) {
+      return this.markerRefs.get(markerIdentifier);
+    } else {
+      const ref = React.createRef<MapMarkerRefType>();
+      this.markerRefs.set(markerIdentifier, ref);
+      return ref;
+    }
+  }
+
   render() {
     const {
       apiKey,
@@ -231,11 +264,31 @@ class MapView<T> extends React.Component<
           style={[styles.map, style]}
           {...rest}
         >
-          {markers.map((marker, index) => renderMarker(marker.props, index))}
+          {markers.map((marker, index) =>
+            renderMarker(
+              marker.props,
+              index,
+              this.getMarkerRef(getMarkerIdentifier(marker.props)),
+              () => this.onMarkerPress(getMarkerIdentifier(marker.props))
+            )
+          )}
 
-          {clusters.map((cluster, index) => (
-            <React.Fragment key={index}>{cluster}</React.Fragment>
-          ))}
+          {/* 
+            Markers within clusters also need to able to assign refs and propogate press.
+            This is done through context to prevent exposing these internal config options as props of the cluster component
+          */}
+          <MapMarkerContext.Provider
+            value={{
+              getMarkerRef: (marker) =>
+                this.getMarkerRef(getMarkerIdentifier(marker)),
+              onMarkerPress: (marker) =>
+                this.onMarkerPress(getMarkerIdentifier(marker)),
+            }}
+          >
+            {clusters.map((cluster, index) => (
+              <React.Fragment key={index}>{cluster}</React.Fragment>
+            ))}
+          </MapMarkerContext.Provider>
         </MapViewComponent>
       </MapViewContext.Provider>
     );
@@ -288,4 +341,8 @@ function degreeToRadian(deg: number) {
   return deg * (Math.PI / 180);
 }
 
+function getMarkerIdentifier(marker: MapMarkerProps) {
+  return `marker-${marker.latitude}-${marker.longitude}`;
+}
+
 export default MapView;

packages/maps/src/components/marker-cluster/MapMarkerCluster.tsx

@@ -7,6 +7,7 @@ import MapMarkerClusterView, {
 import { MapMarkerClusterContext } from "./MapMarkerClusterContext";
 import { MapViewContext } from "../MapViewCommon";
 import { flattenReactFragments } from "@draftbit/ui";
+import { MapMarkerContext } from "../MapView";
 
 /**
  * Component that clusters all markers provided in as children to a single point when zoomed out, and shows the markers themselves when zoomed in
@@ -41,44 +42,52 @@ const MapMarkerCluster: React.FC<React.PropsWithChildren> = ({
   );
 
   return (
-    <MarkerClusterer
-      region={region}
-      renderCluster={({ pointCount, coordinate, expansionZoom }) => {
-        const { latitude, longitude } = coordinate;
+    <MapMarkerContext.Consumer>
+      {({ getMarkerRef, onMarkerPress }) => (
+        <MarkerClusterer
+          region={region}
+          renderCluster={({ pointCount, coordinate, expansionZoom }) => {
+            const { latitude, longitude } = coordinate;
 
-        // onPress needs to be lifted out and passed to Marker directly because Marker intercepts all touch events
-        const clusterViewOnPress = clusterView.props?.onPress;
-        const zoomOnPress = clusterView.props?.zoomOnPress ?? true;
+            // onPress needs to be lifted out and passed to Marker directly because Marker intercepts all touch events
+            const clusterViewOnPress = clusterView.props?.onPress;
+            const zoomOnPress = clusterView.props?.zoomOnPress ?? true;
 
-        const onPress = () => {
-          clusterViewOnPress?.(latitude, longitude);
-          if (zoomOnPress) {
-            animateToLocation({
-              latitude,
-              longitude,
-              zoom: expansionZoom + 3,
-            });
-          }
-        };
+            const onPress = () => {
+              clusterViewOnPress?.(latitude, longitude);
+              if (zoomOnPress) {
+                animateToLocation({
+                  latitude,
+                  longitude,
+                  zoom: expansionZoom + 3,
+                });
+              }
+            };
 
-        return (
-          <MapMarkerClusterContext.Provider
-            value={{
-              markerCount: pointCount,
-            }}
-          >
-            {renderMarker({
-              latitude,
-              longitude,
-              children: clusterView,
-              onPress,
-            })}
-          </MapMarkerClusterContext.Provider>
-        );
-      }}
-    >
-      {markers.map((marker, index) => renderMarker(marker.props, index))}
-    </MarkerClusterer>
+            return (
+              <MapMarkerClusterContext.Provider
+                value={{
+                  markerCount: pointCount,
+                }}
+              >
+                {renderMarker({
+                  latitude,
+                  longitude,
+                  children: clusterView,
+                  onPress,
+                })}
+              </MapMarkerClusterContext.Provider>
+            );
+          }}
+        >
+          {markers.map((marker, index) =>
+            renderMarker(marker.props, index, getMarkerRef(marker.props), () =>
+              onMarkerPress(marker.props)
+            )
+          )}
+        </MarkerClusterer>
+      )}
+    </MapMarkerContext.Consumer>
   );
 };