feat: add Rectangle

Author: pyjun01

README.md

@@ -12,7 +12,7 @@ Google map react componentize project
 - [x] InfoWindow
 - [x] Polyline
 - [x] Polygon
-- [ ] Rectangle
+- [x] Rectangle
 - [ ] Circle
 - [ ] AdvancedMarkerView
 - [ ] MarkerClusterer

src/components/Rectangle/index.tsx

@@ -0,0 +1,77 @@
+import { forwardRef, useEffect, useState } from 'react';
+
+import { RectangleProps } from './type';
+import { useApplyRectangleEvent } from '../../hooks/useApplyRectangleEvent';
+import { useApplyRectangleOptions } from '../../hooks/useApplyRectangleOptions';
+import { passRef } from '../../utils/passRef';
+import { useMapContext } from '../Provider/MapProvider';
+
+export const Rectangle = forwardRef<google.maps.Rectangle, RectangleProps>(
+  function Rectangle(
+    {
+      bounds,
+      clickable,
+      draggable,
+      editable,
+      fillColor,
+      fillOpacity,
+      strokeColor,
+      strokeOpacity,
+      strokePosition,
+      strokeWeight,
+      visible,
+      zIndex,
+      ...events
+    },
+    ref,
+  ) {
+    const map = useMapContext();
+
+    const [Rectangle, setRectangle] = useState<google.maps.Rectangle | null>(
+      null,
+    );
+
+    useEffect(() => {
+      const Rectangle = new google.maps.Rectangle({
+        map,
+        bounds,
+        clickable,
+        draggable,
+        editable,
+        fillColor,
+        fillOpacity,
+        strokeColor,
+        strokeOpacity,
+        strokePosition,
+        strokeWeight,
+        visible,
+        zIndex,
+      });
+
+      setRectangle(Rectangle);
+      passRef(ref, Rectangle);
+
+      return () => {
+        Rectangle.setMap(null);
+      };
+    }, []);
+
+    useApplyRectangleOptions(Rectangle, {
+      bounds,
+      clickable,
+      draggable,
+      editable,
+      fillColor,
+      fillOpacity,
+      strokeColor,
+      strokeOpacity,
+      strokePosition,
+      strokeWeight,
+      visible,
+      zIndex,
+    });
+    useApplyRectangleEvent(Rectangle, events);
+
+    return null;
+  },
+);

src/components/Rectangle/type.ts

@@ -0,0 +1,51 @@
+export interface RectangleEvent {
+  onBoundsChanged?: (rectangle: google.maps.Rectangle) => void;
+  onClick?: (
+    rectangle: google.maps.Rectangle,
+    event: google.maps.PolyMouseEvent,
+  ) => void;
+  onContextmenu?: (
+    rectangle: google.maps.Rectangle,
+    event: google.maps.PolyMouseEvent,
+  ) => void;
+  onDblClick?: (
+    rectangle: google.maps.Rectangle,
+    event: google.maps.PolyMouseEvent,
+  ) => void;
+  onDrag?: (
+    rectangle: google.maps.Rectangle,
+    event: google.maps.MapMouseEvent,
+  ) => void;
+  onDragEnd?: (
+    rectangle: google.maps.Rectangle,
+    event: google.maps.MapMouseEvent,
+  ) => void;
+  onDragStart?: (
+    rectangle: google.maps.Rectangle,
+    event: google.maps.MapMouseEvent,
+  ) => void;
+  onMouseDown?: (
+    rectangle: google.maps.Rectangle,
+    event: google.maps.PolyMouseEvent,
+  ) => void;
+  onMouseMove?: (
+    rectangle: google.maps.Rectangle,
+    event: google.maps.PolyMouseEvent,
+  ) => void;
+  onMouseOut?: (
+    rectangle: google.maps.Rectangle,
+    event: google.maps.PolyMouseEvent,
+  ) => void;
+  onMouseOver?: (
+    rectangle: google.maps.Rectangle,
+    event: google.maps.PolyMouseEvent,
+  ) => void;
+  onMouseUp?: (
+    rectangle: google.maps.Rectangle,
+    event: google.maps.PolyMouseEvent,
+  ) => void;
+}
+
+export interface RectangleProps
+  extends Partial<Omit<google.maps.RectangleOptions, 'map'>>,
+    RectangleEvent {}

src/components/index.ts

@@ -14,6 +14,8 @@ export * from './Polyline/index';
 export * from './Polyline/type';
 export * from './Polygon/index';
 export * from './Polygon/type';
+export * from './Rectangle/index';
+export * from './Rectangle/type';
 export * from './Provider/MapProvider';
 export * from './Provider/MarkerProvider';
 export * from './Provider/CustomMarkerProvider';

src/hooks/useApplyRectangleEvent.ts

@@ -0,0 +1,34 @@
+import { RectangleEvent } from 'src/components/Rectangle/type';
+
+import { useMvcObjectEventEffect } from './useMvcObjectEventEffect';
+
+export const useApplyRectangleEvent = (
+  rectangle: google.maps.Rectangle | null,
+  {
+    onBoundsChanged,
+    onClick,
+    onContextmenu,
+    onDblClick,
+    onDrag,
+    onDragEnd,
+    onDragStart,
+    onMouseDown,
+    onMouseMove,
+    onMouseOut,
+    onMouseOver,
+    onMouseUp,
+  }: RectangleEvent,
+) => {
+  useMvcObjectEventEffect(rectangle, 'bounds_changed', onBoundsChanged);
+  useMvcObjectEventEffect(rectangle, 'click', onClick);
+  useMvcObjectEventEffect(rectangle, 'contextmenu', onContextmenu);
+  useMvcObjectEventEffect(rectangle, 'dblclick', onDblClick);
+  useMvcObjectEventEffect(rectangle, 'drag', onDrag);
+  useMvcObjectEventEffect(rectangle, 'dragend', onDragEnd);
+  useMvcObjectEventEffect(rectangle, 'dragstart', onDragStart);
+  useMvcObjectEventEffect(rectangle, 'mousedown', onMouseDown);
+  useMvcObjectEventEffect(rectangle, 'mousemove', onMouseMove);
+  useMvcObjectEventEffect(rectangle, 'mouseout', onMouseOut);
+  useMvcObjectEventEffect(rectangle, 'mouseover', onMouseOver);
+  useMvcObjectEventEffect(rectangle, 'mouseup', onMouseUp);
+};

src/hooks/useApplyRectangleOptions.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+import { RectangleEvent, RectangleProps } from '../components/Rectangle/type';
+
+export const useApplyRectangleOptions = (
+  polyline: google.maps.Rectangle | null,
+  { bounds, ...options }: Omit<RectangleProps, keyof RectangleEvent>,
+) => {
+  useEffect(() => {
+    polyline?.setOptions(options);
+  }, Object.values(options));
+
+  useEffect(() => {
+    polyline?.setBounds(bounds ?? null);
+  }, [bounds]);
+};

src/index.ts

@@ -3,6 +3,7 @@ import {
   Marker,
   Polyline,
   Polygon,
+  Rectangle,
   CustomMarker,
   InfoWindow,
   GoogleMap,
@@ -16,6 +17,7 @@ import type {
   MarkerProps,
   PolylineProps,
   PolygonProps,
+  RectangleProps,
   CustomMarkerProps,
   InfoWindowProps,
   GoogleMapProps,
@@ -35,6 +37,7 @@ export {
   Marker,
   Polyline,
   Polygon,
+  Rectangle,
   CustomMarker,
   InfoWindow,
   GoogleMap,
@@ -53,6 +56,7 @@ export type {
   MarkerProps,
   PolylineProps,
   PolygonProps,
+  RectangleProps,
   InfoWindowProps,
   CustomMarkerProps,
   GoogleMapProps,
@@ -71,6 +75,7 @@ export default {
   Marker,
   Polyline,
   Polygon,
+  Rectangle,
   CustomMarker,
   InfoWindow,
   GoogleMap,