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

package/src/components/Marker.web.tsx

@@ -1,6 +1,7 @@
 import React, {
   forwardRef,
   isValidElement,
+  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -60,194 +61,196 @@ const createEvent = (
     },
   } as any);
 
-export const Marker = forwardRef<MarkerRef, MarkerProps>(
-  (
-    {
-      coordinate,
-      title,
-      description,
-      anchor,
-      zIndex,
-      rotate,
-      scale,
-      centerOnPress = true,
-      draggable,
-      onPress,
-      onDragStart,
-      onDragChange,
-      onDragEnd,
-      callout,
-      calloutOptions,
-      children,
-    },
-    ref
-  ) => {
-    const { moveCamera, onCalloutClose, closeCallouts } = useMapContext();
-    const dragPositionRef = useRef<google.maps.LatLngLiteral | null>(null);
-    const [markerRef, markerElement] = useAdvancedMarkerRef();
-    const [infoWindowOpen, setInfoWindowOpen] = useState(false);
-    const calloutBubbled = calloutOptions?.bubbled ?? true;
-    const calloutOffset = calloutOptions?.offset;
-
-    const closeCallout = useCallback(() => setInfoWindowOpen(false), []);
-
-    useEffect(
-      () => onCalloutClose(closeCallout),
-      [onCalloutClose, closeCallout]
-    );
-
-    useEffect(() => {
-      if (!calloutBubbled) injectUnbubbledStyle();
-    }, [calloutBubbled]);
-
-    const hasCallout = !!(callout || title);
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        showCallout() {
+export const Marker = memo(
+  forwardRef<MarkerRef, MarkerProps>(
+    (
+      {
+        coordinate,
+        title,
+        description,
+        anchor,
+        zIndex,
+        rotate,
+        scale,
+        centerOnPress = true,
+        draggable,
+        onPress,
+        onDragStart,
+        onDragChange,
+        onDragEnd,
+        callout,
+        calloutOptions,
+        children,
+      },
+      ref
+    ) => {
+      const { moveCamera, onCalloutClose, closeCallouts } = useMapContext();
+      const dragPositionRef = useRef<google.maps.LatLngLiteral | null>(null);
+      const [markerRef, markerElement] = useAdvancedMarkerRef();
+      const [infoWindowOpen, setInfoWindowOpen] = useState(false);
+      const calloutBubbled = calloutOptions?.bubbled ?? true;
+      const calloutOffset = calloutOptions?.offset;
+
+      const closeCallout = useCallback(() => setInfoWindowOpen(false), []);
+
+      useEffect(
+        () => onCalloutClose(closeCallout),
+        [onCalloutClose, closeCallout]
+      );
+
+      useEffect(() => {
+        if (!calloutBubbled) injectUnbubbledStyle();
+      }, [calloutBubbled]);
+
+      const hasCallout = !!(callout || title);
+
+      useImperativeHandle(
+        ref,
+        () => ({
+          showCallout() {
+            if (hasCallout) {
+              closeCallouts(closeCallout);
+              setInfoWindowOpen(true);
+            }
+          },
+          hideCallout() {
+            setInfoWindowOpen(false);
+          },
+        }),
+        [hasCallout, closeCallouts, closeCallout]
+      );
+
+      const calloutContent = callout
+        ? isValidElement(callout)
+          ? callout
+          : React.createElement(callout)
+        : title
+        ? React.createElement(
+            'div',
+            { style: { fontSize: 14 } },
+            React.createElement('div', { style: { fontWeight: 500 } }, title),
+            description ? React.createElement('div', null, description) : null
+          )
+        : null;
+
+      const transforms: string[] = [];
+      if (rotate) transforms.push(`rotate(${rotate}deg)`);
+      if (scale && scale !== 1) transforms.push(`scale(${scale})`);
+
+      const handleClick = useCallback(
+        (e: google.maps.MapMouseEvent) => {
+          const pos = dragPositionRef.current;
+          const coord = pos
+            ? { latitude: pos.lat, longitude: pos.lng }
+            : coordinate;
+          if (centerOnPress) moveCamera(coord);
+          onPress?.(createEvent(e, coordinate));
           if (hasCallout) {
             closeCallouts(closeCallout);
-            setInfoWindowOpen(true);
+            setInfoWindowOpen((prev) => !prev);
           }
         },
-        hideCallout() {
-          setInfoWindowOpen(false);
+        [
+          centerOnPress,
+          moveCamera,
+          onPress,
+          coordinate,
+          hasCallout,
+          closeCallouts,
+          closeCallout,
+        ]
+      );
+
+      const handleDragStart = useCallback(
+        (e: google.maps.MapMouseEvent) => {
+          const latLng = e.latLng;
+          if (latLng) {
+            dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
+          }
+          onDragStart?.(createEvent(e, coordinate));
         },
-      }),
-      [hasCallout, closeCallouts, closeCallout]
-    );
-
-    const calloutContent = callout
-      ? isValidElement(callout)
-        ? callout
-        : React.createElement(callout)
-      : title
-      ? React.createElement(
-          'div',
-          { style: { fontSize: 14 } },
-          React.createElement('div', { style: { fontWeight: 500 } }, title),
-          description ? React.createElement('div', null, description) : null
-        )
-      : null;
-
-    const transforms: string[] = [];
-    if (rotate) transforms.push(`rotate(${rotate}deg)`);
-    if (scale && scale !== 1) transforms.push(`scale(${scale})`);
-
-    const handleClick = useCallback(
-      (e: google.maps.MapMouseEvent) => {
-        const pos = dragPositionRef.current;
-        const coord = pos
-          ? { latitude: pos.lat, longitude: pos.lng }
-          : coordinate;
-        if (centerOnPress) moveCamera(coord);
-        onPress?.(createEvent(e, coordinate));
-        if (hasCallout) {
-          closeCallouts(closeCallout);
-          setInfoWindowOpen((prev) => !prev);
-        }
-      },
-      [
-        centerOnPress,
-        moveCamera,
-        onPress,
-        coordinate,
-        hasCallout,
-        closeCallouts,
-        closeCallout,
-      ]
-    );
-
-    const handleDragStart = useCallback(
-      (e: google.maps.MapMouseEvent) => {
-        const latLng = e.latLng;
-        if (latLng) {
-          dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
-        }
-        onDragStart?.(createEvent(e, coordinate));
-      },
-      [onDragStart, coordinate]
-    );
-
-    const handleDrag = useCallback(
-      (e: google.maps.MapMouseEvent) => {
-        const latLng = e.latLng;
-        if (latLng) {
-          dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
-        }
-        onDragChange?.(createEvent(e, coordinate));
-      },
-      [onDragChange, coordinate]
-    );
-
-    const handleDragEnd = useCallback(
-      (e: google.maps.MapMouseEvent) => {
-        const latLng = e.latLng;
-        if (latLng) {
-          dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
-        }
-        onDragEnd?.(createEvent(e, coordinate));
-      },
-      [onDragEnd, coordinate]
-    );
-
-    useEffect(() => {
-      dragPositionRef.current = null;
-    }, [coordinate.latitude, coordinate.longitude]);
-
-    const latLngPosition = {
-      lat: coordinate.latitude,
-      lng: coordinate.longitude,
-    };
-
-    const position = dragPositionRef.current ?? latLngPosition;
-
-    return (
-      <>
-        <AdvancedMarker
-          ref={markerRef}
-          position={position}
-          title={title}
-          zIndex={zIndex}
-          anchorLeft={anchor ? toWebAnchor(anchor.x) : undefined}
-          anchorTop={anchor ? toWebAnchor(anchor.y) : undefined}
-          clickable
-          draggable={draggable}
-          onClick={handleClick}
-          onDragStart={handleDragStart}
-          onDrag={handleDrag}
-          onDragEnd={handleDragEnd}
-          style={
-            transforms.length > 0
-              ? { transform: transforms.join(' ') }
-              : undefined
+        [onDragStart, coordinate]
+      );
+
+      const handleDrag = useCallback(
+        (e: google.maps.MapMouseEvent) => {
+          const latLng = e.latLng;
+          if (latLng) {
+            dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
           }
-        >
-          {children}
-        </AdvancedMarker>
-        {calloutContent && infoWindowOpen && markerElement && (
-          <InfoWindow
-            anchor={markerElement}
-            pixelOffset={
-              !calloutBubbled
-                ? [
-                    calloutOffset?.x ?? 0,
-                    CALLOUT_ARROW_HEIGHT + (calloutOffset?.y ?? 0),
-                  ]
+          onDragChange?.(createEvent(e, coordinate));
+        },
+        [onDragChange, coordinate]
+      );
+
+      const handleDragEnd = useCallback(
+        (e: google.maps.MapMouseEvent) => {
+          const latLng = e.latLng;
+          if (latLng) {
+            dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
+          }
+          onDragEnd?.(createEvent(e, coordinate));
+        },
+        [onDragEnd, coordinate]
+      );
+
+      useEffect(() => {
+        dragPositionRef.current = null;
+      }, [coordinate.latitude, coordinate.longitude]);
+
+      const latLngPosition = {
+        lat: coordinate.latitude,
+        lng: coordinate.longitude,
+      };
+
+      const position = dragPositionRef.current ?? latLngPosition;
+
+      return (
+        <>
+          <AdvancedMarker
+            ref={markerRef}
+            position={position}
+            title={title}
+            zIndex={zIndex}
+            anchorLeft={anchor ? toWebAnchor(anchor.x) : undefined}
+            anchorTop={anchor ? toWebAnchor(anchor.y) : undefined}
+            clickable
+            draggable={draggable}
+            onClick={handleClick}
+            onDragStart={draggable ? handleDragStart : undefined}
+            onDrag={draggable ? handleDrag : undefined}
+            onDragEnd={draggable ? handleDragEnd : undefined}
+            style={
+              transforms.length > 0
+                ? { transform: transforms.join(' ') }
                 : undefined
             }
-            headerDisabled
-            onClose={() => setInfoWindowOpen(false)}
           >
-            {!calloutBubbled ? (
-              <div className={UNBUBBLED_CLASS}>{calloutContent}</div>
-            ) : (
-              calloutContent
-            )}
-          </InfoWindow>
-        )}
-      </>
-    );
-  }
+            {children}
+          </AdvancedMarker>
+          {calloutContent && infoWindowOpen && markerElement && (
+            <InfoWindow
+              anchor={markerElement}
+              pixelOffset={
+                !calloutBubbled
+                  ? [
+                      calloutOffset?.x ?? 0,
+                      CALLOUT_ARROW_HEIGHT + (calloutOffset?.y ?? 0),
+                    ]
+                  : undefined
+              }
+              headerDisabled
+              onClose={() => setInfoWindowOpen(false)}
+            >
+              {!calloutBubbled ? (
+                <div className={UNBUBBLED_CLASS}>{calloutContent}</div>
+              ) : (
+                calloutContent
+              )}
+            </InfoWindow>
+          )}
+        </>
+      );
+    }
+  )
 );

package/src/components/Polygon.web.tsx

@@ -1,104 +1,108 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { memo, useCallback, useEffect, useRef } from 'react';
 import { useMapContext } from '../MapProvider.web';
 import type { PolygonProps } from './Polygon.types';
 
-export const Polygon = ({
-  coordinates,
-  holes,
-  strokeColor = '#000000',
-  strokeWidth = 1,
-  fillColor = 'rgba(0, 0, 0, 0.3)',
-  zIndex = 0,
-  onPress,
-}: PolygonProps) => {
-  const { map } = useMapContext();
-  const polygonRef = useRef<google.maps.Polygon | null>(null);
-  const listenersRef = useRef<google.maps.MapsEventListener[]>([]);
+export const Polygon = memo(
+  ({
+    coordinates,
+    holes,
+    strokeColor = '#000000',
+    strokeWidth = 1,
+    fillColor = 'rgba(0, 0, 0, 0.3)',
+    zIndex = 0,
+    onPress,
+  }: PolygonProps) => {
+    const { map } = useMapContext();
+    const polygonRef = useRef<google.maps.Polygon | 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 = [];
-      polygonRef.current?.setMap(null);
-      polygonRef.current = null;
-    };
-  }, []);
+    // Cleanup on unmount
+    useEffect(() => {
+      return () => {
+        listenersRef.current.forEach((l) => l.remove());
+        listenersRef.current = [];
+        polygonRef.current?.setMap(null);
+        polygonRef.current = null;
+      };
+    }, []);
 
-  // Sync listeners
-  useEffect(() => {
-    const polygon = polygonRef.current;
-    if (!polygon) return;
+    // Sync listeners
+    useEffect(() => {
+      const polygon = polygonRef.current;
+      if (!polygon) return;
 
-    listenersRef.current.forEach((l) => l.remove());
-    listenersRef.current = [];
+      listenersRef.current.forEach((l) => l.remove());
+      listenersRef.current = [];
 
-    if (onPress) {
-      listenersRef.current.push(polygon.addListener('click', handleClick));
-    }
-    polygon.set('clickable', !!onPress);
-  }, [onPress, handleClick]);
+      if (onPress) {
+        listenersRef.current.push(polygon.addListener('click', handleClick));
+      }
+      polygon.set('clickable', !!onPress);
+    }, [onPress, handleClick]);
 
-  // Sync polygon with props
-  useEffect(() => {
-    if (!map || coordinates.length === 0) {
-      polygonRef.current?.setMap(null);
-      return;
-    }
+    // Sync polygon with props
+    useEffect(() => {
+      if (!map || coordinates.length === 0) {
+        polygonRef.current?.setMap(null);
+        return;
+      }
 
-    const outerPath = coordinates.map((c) => ({
-      lat: c.latitude,
-      lng: c.longitude,
-    }));
+      const outerPath = coordinates.map((c) => ({
+        lat: c.latitude,
+        lng: c.longitude,
+      }));
 
-    const paths = [
-      outerPath,
-      ...(holes ?? []).map((hole) =>
-        [...hole].reverse().map((c) => ({ lat: c.latitude, lng: c.longitude }))
-      ),
-    ];
+      const paths = [
+        outerPath,
+        ...(holes ?? []).map((hole) =>
+          [...hole]
+            .reverse()
+            .map((c) => ({ lat: c.latitude, lng: c.longitude }))
+        ),
+      ];
 
-    if (polygonRef.current) {
-      polygonRef.current.setPaths(paths);
-      polygonRef.current.setOptions({
-        strokeColor: strokeColor as string,
-        strokeWeight: strokeWidth,
-        fillColor: fillColor as string,
-        zIndex,
-      });
-    } else {
-      const polygon = new google.maps.Polygon({
-        paths,
-        strokeColor: strokeColor as string,
-        strokeWeight: strokeWidth,
-        strokeOpacity: 1,
-        fillColor: fillColor as string,
-        fillOpacity: 1,
-        zIndex,
-        clickable: !!onPress,
-        map,
-      });
-      polygonRef.current = polygon;
+      if (polygonRef.current) {
+        polygonRef.current.setPaths(paths);
+        polygonRef.current.setOptions({
+          strokeColor: strokeColor as string,
+          strokeWeight: strokeWidth,
+          fillColor: fillColor as string,
+          zIndex,
+        });
+      } else {
+        const polygon = new google.maps.Polygon({
+          paths,
+          strokeColor: strokeColor as string,
+          strokeWeight: strokeWidth,
+          strokeOpacity: 1,
+          fillColor: fillColor as string,
+          fillOpacity: 1,
+          zIndex,
+          clickable: !!onPress,
+          map,
+        });
+        polygonRef.current = polygon;
 
-      if (onPress) {
-        listenersRef.current.push(polygon.addListener('click', handleClick));
+        if (onPress) {
+          listenersRef.current.push(polygon.addListener('click', handleClick));
+        }
       }
-    }
-  }, [
-    map,
-    coordinates,
-    holes,
-    strokeColor,
-    strokeWidth,
-    fillColor,
-    zIndex,
-    onPress,
-    handleClick,
-  ]);
+    }, [
+      map,
+      coordinates,
+      holes,
+      strokeColor,
+      strokeWidth,
+      fillColor,
+      zIndex,
+      onPress,
+      handleClick,
+    ]);
 
-  return null;
-};
+    return null;
+  }
+);