@lugg/maps 1.0.0-beta.5 → 1.0.0-beta.6

package/src/components/Circle.web.tsx

@@ -1,93 +1,95 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { memo, useCallback, useEffect, useRef } from 'react';
 import { useMapContext } from '../MapProvider.web';
 import type { CircleProps } from './Circle.types';
 
-export const Circle = ({
-  center,
-  radius,
-  strokeColor = '#000000',
-  strokeWidth = 1,
-  fillColor = 'rgba(0, 0, 0, 0.3)',
-  zIndex = 0,
-  onPress,
-}: CircleProps) => {
-  const { map } = useMapContext();
-  const circleRef = useRef<google.maps.Circle | null>(null);
-  const listenersRef = useRef<google.maps.MapsEventListener[]>([]);
+export const Circle = memo(
+  ({
+    center,
+    radius,
+    strokeColor = '#000000',
+    strokeWidth = 1,
+    fillColor = 'rgba(0, 0, 0, 0.3)',
+    zIndex = 0,
+    onPress,
+  }: CircleProps) => {
+    const { map } = useMapContext();
+    const circleRef = useRef<google.maps.Circle | null>(null);
+    const listenersRef = useRef<google.maps.MapsEventListener[]>([]);
 
-  const handleClick = useCallback(() => {
-    onPress?.();
-  }, [onPress]);
+    const handleClick = useCallback(() => {
+      onPress?.();
+    }, [onPress]);
 
-  useEffect(() => {
-    return () => {
-      listenersRef.current.forEach((l) => l.remove());
-      listenersRef.current = [];
-      circleRef.current?.setMap(null);
-      circleRef.current = null;
-    };
-  }, []);
+    useEffect(() => {
+      return () => {
+        listenersRef.current.forEach((l) => l.remove());
+        listenersRef.current = [];
+        circleRef.current?.setMap(null);
+        circleRef.current = null;
+      };
+    }, []);
 
-  useEffect(() => {
-    const circle = circleRef.current;
-    if (!circle) return;
+    useEffect(() => {
+      const circle = circleRef.current;
+      if (!circle) return;
 
-    listenersRef.current.forEach((l) => l.remove());
-    listenersRef.current = [];
+      listenersRef.current.forEach((l) => l.remove());
+      listenersRef.current = [];
 
-    if (onPress) {
-      listenersRef.current.push(circle.addListener('click', handleClick));
-    }
-    circle.set('clickable', !!onPress);
-  }, [onPress, handleClick]);
+      if (onPress) {
+        listenersRef.current.push(circle.addListener('click', handleClick));
+      }
+      circle.set('clickable', !!onPress);
+    }, [onPress, handleClick]);
 
-  useEffect(() => {
-    if (!map) {
-      circleRef.current?.setMap(null);
-      return;
-    }
+    useEffect(() => {
+      if (!map) {
+        circleRef.current?.setMap(null);
+        return;
+      }
 
-    const googleCenter = { lat: center.latitude, lng: center.longitude };
+      const googleCenter = { lat: center.latitude, lng: center.longitude };
 
-    if (circleRef.current) {
-      circleRef.current.setCenter(googleCenter);
-      circleRef.current.setRadius(radius);
-      circleRef.current.setOptions({
-        strokeColor: strokeColor as string,
-        strokeWeight: strokeWidth,
-        fillColor: fillColor as string,
-        zIndex,
-      });
-    } else {
-      const circle = new google.maps.Circle({
-        center: googleCenter,
-        radius,
-        strokeColor: strokeColor as string,
-        strokeWeight: strokeWidth,
-        strokeOpacity: 1,
-        fillColor: fillColor as string,
-        fillOpacity: 1,
-        zIndex,
-        clickable: !!onPress,
-        map,
-      });
-      circleRef.current = circle;
+      if (circleRef.current) {
+        circleRef.current.setCenter(googleCenter);
+        circleRef.current.setRadius(radius);
+        circleRef.current.setOptions({
+          strokeColor: strokeColor as string,
+          strokeWeight: strokeWidth,
+          fillColor: fillColor as string,
+          zIndex,
+        });
+      } else {
+        const circle = new google.maps.Circle({
+          center: googleCenter,
+          radius,
+          strokeColor: strokeColor as string,
+          strokeWeight: strokeWidth,
+          strokeOpacity: 1,
+          fillColor: fillColor as string,
+          fillOpacity: 1,
+          zIndex,
+          clickable: !!onPress,
+          map,
+        });
+        circleRef.current = circle;
 
-      if (onPress) {
-        listenersRef.current.push(circle.addListener('click', handleClick));
+        if (onPress) {
+          listenersRef.current.push(circle.addListener('click', handleClick));
+        }
       }
-    }
-  }, [
-    map,
-    center,
-    radius,
-    strokeColor,
-    strokeWidth,
-    fillColor,
-    zIndex,
-    onPress,
-    handleClick,
-  ]);
+    }, [
+      map,
+      center,
+      radius,
+      strokeColor,
+      strokeWidth,
+      fillColor,
+      zIndex,
+      onPress,
+      handleClick,
+    ]);
 
-  return null;
-};
+    return null;
+  }
+);

package/src/components/GeoJson.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, type ReactElement } from 'react';
+import React, { memo, useMemo, type ReactElement } from 'react';
 import type {
   Feature,
   FeatureCollection,
@@ -199,7 +199,7 @@ const renderGeometry = (
   return elements;
 };
 
-export const GeoJson = (props: GeoJsonProps) => {
+export const GeoJson = memo((props: GeoJsonProps) => {
   const { geojson } = props;
 
   const elements = useMemo(() => {
@@ -218,4 +218,4 @@ export const GeoJson = (props: GeoJsonProps) => {
   }, [geojson, props]);
 
   return <>{elements}</>;
-};
+});

package/src/components/GroundOverlay.web.tsx

@@ -1,85 +1,81 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { memo, useCallback, useEffect, useRef } from 'react';
 import { useMapContext } from '../MapProvider.web';
 import type { GroundOverlayProps } from './GroundOverlay.types';
 
-export const GroundOverlay = ({
-  image,
-  bounds,
-  opacity = 1,
-  zIndex = 0,
-  onPress,
-}: GroundOverlayProps) => {
-  const { map } = useMapContext();
-  const overlayRef = useRef<google.maps.GroundOverlay | null>(null);
-  const listenersRef = useRef<google.maps.MapsEventListener[]>([]);
+export const GroundOverlay = memo(
+  ({ image, bounds, opacity = 1, zIndex = 0, onPress }: GroundOverlayProps) => {
+    const { map } = useMapContext();
+    const overlayRef = useRef<google.maps.GroundOverlay | null>(null);
+    const listenersRef = useRef<google.maps.MapsEventListener[]>([]);
 
-  const handleClick = useCallback(() => {
-    onPress?.();
-  }, [onPress]);
+    const handleClick = useCallback(() => {
+      onPress?.();
+    }, [onPress]);
+
+    // Cleanup on unmount
+    useEffect(() => {
+      return () => {
+        listenersRef.current.forEach((l) => l.remove());
+        listenersRef.current = [];
+        overlayRef.current?.setMap(null);
+        overlayRef.current = null;
+      };
+    }, []);
+
+    // Sync listeners
+    useEffect(() => {
+      const overlay = overlayRef.current;
+      if (!overlay) return;
 
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
       listenersRef.current.forEach((l) => l.remove());
       listenersRef.current = [];
-      overlayRef.current?.setMap(null);
-      overlayRef.current = null;
-    };
-  }, []);
 
-  // Sync listeners
-  useEffect(() => {
-    const overlay = overlayRef.current;
-    if (!overlay) return;
+      if (onPress) {
+        listenersRef.current.push(overlay.addListener('click', handleClick));
+      }
+      overlay.set('clickable', !!onPress);
+    }, [onPress, handleClick]);
 
-    listenersRef.current.forEach((l) => l.remove());
-    listenersRef.current = [];
+    // Sync overlay with props
+    useEffect(() => {
+      if (!map) {
+        overlayRef.current?.setMap(null);
+        return;
+      }
 
-    if (onPress) {
-      listenersRef.current.push(overlay.addListener('click', handleClick));
-    }
-    overlay.set('clickable', !!onPress);
-  }, [onPress, handleClick]);
-
-  // Sync overlay with props
-  useEffect(() => {
-    if (!map) {
-      overlayRef.current?.setMap(null);
-      return;
-    }
+      const source =
+        typeof image === 'number'
+          ? null
+          : Array.isArray(image)
+          ? image[0]
+          : image;
+      const imageUrl = source?.uri ?? '';
+      if (!imageUrl) return;
 
-    const source =
-      typeof image === 'number'
-        ? null
-        : Array.isArray(image)
-        ? image[0]
-        : image;
-    const imageUrl = source?.uri ?? '';
-    if (!imageUrl) return;
+      const latLngBounds = new google.maps.LatLngBounds(
+        { lat: bounds.southwest.latitude, lng: bounds.southwest.longitude },
+        { lat: bounds.northeast.latitude, lng: bounds.northeast.longitude }
+      );
 
-    const latLngBounds = new google.maps.LatLngBounds(
-      { lat: bounds.southwest.latitude, lng: bounds.southwest.longitude },
-      { lat: bounds.northeast.latitude, lng: bounds.northeast.longitude }
-    );
-
-    // GroundOverlay bounds are immutable — recreate if bounds change
-    overlayRef.current?.setMap(null);
-    listenersRef.current.forEach((l) => l.remove());
-    listenersRef.current = [];
+      // GroundOverlay bounds are immutable — recreate if bounds change
+      overlayRef.current?.setMap(null);
+      listenersRef.current.forEach((l) => l.remove());
+      listenersRef.current = [];
 
-    const overlay = new google.maps.GroundOverlay(imageUrl, latLngBounds, {
-      opacity,
-      clickable: !!onPress,
-      map,
-    });
+      const overlay = new google.maps.GroundOverlay(imageUrl, latLngBounds, {
+        opacity,
+        clickable: !!onPress,
+        map,
+      });
 
-    overlay.set('zIndex', zIndex);
-    overlayRef.current = overlay;
+      overlay.set('zIndex', zIndex);
+      overlayRef.current = overlay;
 
-    if (onPress) {
-      listenersRef.current.push(overlay.addListener('click', handleClick));
-    }
-  }, [map, image, bounds, opacity, zIndex, onPress, handleClick]);
+      if (onPress) {
+        listenersRef.current.push(overlay.addListener('click', handleClick));
+      }
+    }, [map, image, bounds, opacity, zIndex, onPress, handleClick]);
 
-  return null;
-};
+    return null;
+  }
+);