Skip to content

Commit c5885de

Browse files
pyjun01pyjun01
committed
feat: pass instance to event listener
1 parent 56a984b commit c5885de

8 files changed

Lines changed: 193 additions & 82 deletions

File tree

‎src/components/CustomMarker/index.tsx‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,13 @@ import { ReactNode, forwardRef, useEffect, useRef, useState } from 'react';
22

33
import { createPortal } from 'react-dom';
44

5-
import { OverlayMarker } from './type';
5+
import { CustomMarkerProps, OverlayMarker } from './type';
66
import { passRef } from '../../utils/passRef';
77
import { CustomMarkerProvider } from '../Provider/CustomMarkerProvider';
88
import { useMapContext } from '../Provider/MapProvider';
99

1010
let classCache;
1111

12-
export interface CustomMarkerProps {
13-
children?: ReactNode;
14-
lat: number;
15-
lng: number;
16-
draggable?: unknown;
17-
skipDragOnClickable?: unknown;
18-
onDragStart?: (position: google.maps.LatLngLiteral) => void;
19-
onDrag?: (position: google.maps.LatLngLiteral) => void;
20-
onDragEnd?: (position: google.maps.LatLngLiteral) => void;
21-
}
22-
2312
export const CustomMarker = forwardRef<OverlayMarker, CustomMarkerProps>(
2413
function CustomMarker(
2514
{

‎src/components/CustomMarker/type.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { ReactNode } from 'react';
2+
13
export interface OverlayMarker extends google.maps.OverlayView {
24
map: google.maps.Map;
35
container: HTMLDivElement;
@@ -12,3 +14,17 @@ export interface OverlayMarker extends google.maps.OverlayView {
1214
updatePosition(position: google.maps.LatLngLiteral): void;
1315
setDraggable(draggable: boolean);
1416
}
17+
18+
export interface CustomMarkerEvent {
19+
onDragStart?: (position: google.maps.LatLngLiteral) => void;
20+
onDrag?: (position: google.maps.LatLngLiteral) => void;
21+
onDragEnd?: (position: google.maps.LatLngLiteral) => void;
22+
}
23+
24+
export interface CustomMarkerProps extends CustomMarkerEvent {
25+
children?: ReactNode;
26+
lat: number;
27+
lng: number;
28+
draggable?: unknown;
29+
skipDragOnClickable?: unknown;
30+
}

‎src/components/GoogleMap/type.ts‎

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,35 @@
11
export interface MapEvent {
2-
onBoundsChanged?: () => void;
3-
onCenterChanged?: () => void;
2+
onBoundsChanged?: (map: google.maps.Map) => void;
3+
onCenterChanged?: (map: google.maps.Map) => void;
44
onClick?: (
5+
map: google.maps.Map,
56
event: google.maps.MapMouseEvent | google.maps.IconMouseEvent,
67
) => void;
7-
onContextmenu?: (event: google.maps.MapMouseEvent) => void;
8-
onDblclick?: (event: google.maps.MapMouseEvent) => void;
9-
onDrag?: () => void;
10-
onDragEnd?: () => void;
11-
onDragStart?: () => void;
12-
onHeadingChanged?: () => void;
13-
onIdle?: () => void;
14-
onIsFractionalZoomEnabledChanged?: () => void;
15-
onMapCapabilitiesChanged?: () => void;
16-
onMapTypeIdChanged?: () => void;
17-
onMouseMove?: (event: google.maps.MapMouseEvent) => void;
18-
onMouseOut?: (event: google.maps.MapMouseEvent) => void;
19-
onMouseOver?: (event: google.maps.MapMouseEvent) => void;
20-
onProjectionChanged?: () => void;
21-
onRenderingTypeChanged?: () => void;
22-
onTilesLoaded?: () => void;
23-
onTiltChanged?: () => void;
24-
onZoomChanged?: () => void;
8+
onContextmenu?: (
9+
map: google.maps.Map,
10+
event: google.maps.MapMouseEvent,
11+
) => void;
12+
onDblclick?: (map: google.maps.Map, event: google.maps.MapMouseEvent) => void;
13+
onDrag?: (map: google.maps.Map) => void;
14+
onDragEnd?: (map: google.maps.Map) => void;
15+
onDragStart?: (map: google.maps.Map) => void;
16+
onHeadingChanged?: (map: google.maps.Map) => void;
17+
onIdle?: (map: google.maps.Map) => void;
18+
onIsFractionalZoomEnabledChanged?: (map: google.maps.Map) => void;
19+
onMapCapabilitiesChanged?: (map: google.maps.Map) => void;
20+
onMapTypeIdChanged?: (map: google.maps.Map) => void;
21+
onMouseMove?: (
22+
map: google.maps.Map,
23+
event: google.maps.MapMouseEvent,
24+
) => void;
25+
onMouseOut?: (map: google.maps.Map, event: google.maps.MapMouseEvent) => void;
26+
onMouseOver?: (
27+
map: google.maps.Map,
28+
event: google.maps.MapMouseEvent,
29+
) => void;
30+
onProjectionChanged?: (map: google.maps.Map) => void;
31+
onRenderingTypeChanged?: (map: google.maps.Map) => void;
32+
onTilesLoaded?: (map: google.maps.Map) => void;
33+
onTiltChanged?: (map: google.maps.Map) => void;
34+
onZoomChanged?: (map: google.maps.Map) => void;
2535
}

‎src/components/InfoWindow/type.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { ReactElement } from 'react';
22

33
export interface InfoWindowEvent {
4-
onCloseClick?: () => void;
5-
onContentChanged?: () => void;
6-
onDomReady?: () => void;
7-
onPositionChanged?: () => void;
8-
onVisible?: () => void;
9-
onZIndexChanged?: () => void;
4+
onCloseClick?: (infoWindow: google.maps.InfoWindow) => void;
5+
onContentChanged?: (infoWindow: google.maps.InfoWindow) => void;
6+
onDomReady?: (infoWindow: google.maps.InfoWindow) => void;
7+
onPositionChanged?: (infoWindow: google.maps.InfoWindow) => void;
8+
onVisible?: (infoWindow: google.maps.InfoWindow) => void;
9+
onZIndexChanged?: (infoWindow: google.maps.InfoWindow) => void;
1010
}
1111

1212
export interface InfoWindowProps

‎src/components/Marker/type.ts‎

Lines changed: 51 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,55 @@
11
export interface MarkerEvent {
2-
onAnimationChanged?: () => void;
3-
onClick?: (event: google.maps.MapMouseEvent) => void;
4-
onClickableChanged?: () => void;
5-
onContextMenu?: (event: google.maps.MapMouseEvent) => void;
6-
onCursorChanged?: () => void;
7-
onDblClick?: (event: google.maps.MapMouseEvent) => void;
8-
onDrag?: (event: google.maps.MapMouseEvent) => void;
9-
onDragEnd?: (event: google.maps.MapMouseEvent) => void;
10-
onDraggableChanged?: () => void;
11-
onDragStart?: (event: google.maps.MapMouseEvent) => void;
12-
onFlatChanged?: () => void;
13-
onIconChanged?: () => void;
14-
onMouseDown?: (event: google.maps.MapMouseEvent) => void;
15-
onMouseOut?: (event: google.maps.MapMouseEvent) => void;
16-
onMouseOver?: (event: google.maps.MapMouseEvent) => void;
17-
onMouseUp?: (event: google.maps.MapMouseEvent) => void;
18-
onPositionChanged?: () => void;
19-
onShapeChanged?: () => void;
20-
onTitleChanged?: () => void;
21-
onVisibleChanged?: () => void;
22-
onZindexChanged?: () => void;
2+
onAnimationChanged?: (marker: google.maps.Marker) => void;
3+
onClick?: (
4+
marker: google.maps.Marker,
5+
event: google.maps.MapMouseEvent,
6+
) => void;
7+
onClickableChanged?: (marker: google.maps.Marker) => void;
8+
onContextMenu?: (
9+
marker: google.maps.Marker,
10+
event: google.maps.MapMouseEvent,
11+
) => void;
12+
onCursorChanged?: (marker: google.maps.Marker) => void;
13+
onDblClick?: (
14+
marker: google.maps.Marker,
15+
event: google.maps.MapMouseEvent,
16+
) => void;
17+
onDrag?: (
18+
marker: google.maps.Marker,
19+
event: google.maps.MapMouseEvent,
20+
) => void;
21+
onDragEnd?: (
22+
marker: google.maps.Marker,
23+
event: google.maps.MapMouseEvent,
24+
) => void;
25+
onDraggableChanged?: (marker: google.maps.Marker) => void;
26+
onDragStart?: (
27+
marker: google.maps.Marker,
28+
event: google.maps.MapMouseEvent,
29+
) => void;
30+
onFlatChanged?: (marker: google.maps.Marker) => void;
31+
onIconChanged?: (marker: google.maps.Marker) => void;
32+
onMouseDown?: (
33+
marker: google.maps.Marker,
34+
event: google.maps.MapMouseEvent,
35+
) => void;
36+
onMouseOut?: (
37+
marker: google.maps.Marker,
38+
event: google.maps.MapMouseEvent,
39+
) => void;
40+
onMouseOver?: (
41+
marker: google.maps.Marker,
42+
event: google.maps.MapMouseEvent,
43+
) => void;
44+
onMouseUp?: (
45+
marker: google.maps.Marker,
46+
event: google.maps.MapMouseEvent,
47+
) => void;
48+
onPositionChanged?: (marker: google.maps.Marker) => void;
49+
onShapeChanged?: (marker: google.maps.Marker) => void;
50+
onTitleChanged?: (marker: google.maps.Marker) => void;
51+
onVisibleChanged?: (marker: google.maps.Marker) => void;
52+
onZindexChanged?: (marker: google.maps.Marker) => void;
2353
}
2454

2555
export interface MarkerProps

‎src/components/Polygon/type.ts‎

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,48 @@
11
export interface PolygonEvent {
2-
onClick?: (event: google.maps.PolyMouseEvent) => void;
3-
onContextmenu?: (event: google.maps.PolyMouseEvent) => void;
4-
onDblClick?: (event: google.maps.PolyMouseEvent) => void;
5-
onDrag?: (event: google.maps.MapMouseEvent) => void;
6-
onDragEnd?: (event: google.maps.MapMouseEvent) => void;
7-
onDragStart?: (event: google.maps.MapMouseEvent) => void;
8-
onMouseDown?: (event: google.maps.PolyMouseEvent) => void;
9-
onMouseMove?: (event: google.maps.PolyMouseEvent) => void;
10-
onMouseOut?: (event: google.maps.PolyMouseEvent) => void;
11-
onMouseOver?: (event: google.maps.PolyMouseEvent) => void;
12-
onMouseUp?: (event: google.maps.PolyMouseEvent) => void;
2+
onClick?: (
3+
polygon: google.maps.Polygon,
4+
event: google.maps.PolyMouseEvent,
5+
) => void;
6+
onContextmenu?: (
7+
polygon: google.maps.Polygon,
8+
event: google.maps.PolyMouseEvent,
9+
) => void;
10+
onDblClick?: (
11+
polygon: google.maps.Polygon,
12+
event: google.maps.PolyMouseEvent,
13+
) => void;
14+
onDrag?: (
15+
polygon: google.maps.Polygon,
16+
event: google.maps.MapMouseEvent,
17+
) => void;
18+
onDragEnd?: (
19+
polygon: google.maps.Polygon,
20+
event: google.maps.MapMouseEvent,
21+
) => void;
22+
onDragStart?: (
23+
polygon: google.maps.Polygon,
24+
event: google.maps.MapMouseEvent,
25+
) => void;
26+
onMouseDown?: (
27+
polygon: google.maps.Polygon,
28+
event: google.maps.PolyMouseEvent,
29+
) => void;
30+
onMouseMove?: (
31+
polygon: google.maps.Polygon,
32+
event: google.maps.PolyMouseEvent,
33+
) => void;
34+
onMouseOut?: (
35+
polygon: google.maps.Polygon,
36+
event: google.maps.PolyMouseEvent,
37+
) => void;
38+
onMouseOver?: (
39+
polygon: google.maps.Polygon,
40+
event: google.maps.PolyMouseEvent,
41+
) => void;
42+
onMouseUp?: (
43+
polygon: google.maps.Polygon,
44+
event: google.maps.PolyMouseEvent,
45+
) => void;
1346
}
1447

1548
export interface PolygonProps

‎src/components/Polyline/type.ts‎

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,48 @@
11
export interface PolylineEvent {
2-
onClick?: (event: google.maps.PolyMouseEvent) => void;
3-
onContextmenu?: (event: google.maps.PolyMouseEvent) => void;
4-
onDblClick?: (event: google.maps.PolyMouseEvent) => void;
5-
onDrag?: (event: google.maps.MapMouseEvent) => void;
6-
onDragEnd?: (event: google.maps.MapMouseEvent) => void;
7-
onDragStart?: (event: google.maps.MapMouseEvent) => void;
8-
onMouseDown?: (event: google.maps.PolyMouseEvent) => void;
9-
onMouseMove?: (event: google.maps.PolyMouseEvent) => void;
10-
onMouseOut?: (event: google.maps.PolyMouseEvent) => void;
11-
onMouseOver?: (event: google.maps.PolyMouseEvent) => void;
12-
onMouseUp?: (event: google.maps.PolyMouseEvent) => void;
2+
onClick?: (
3+
polyline: google.maps.Polyline,
4+
event: google.maps.PolyMouseEvent,
5+
) => void;
6+
onContextmenu?: (
7+
polyline: google.maps.Polyline,
8+
event: google.maps.PolyMouseEvent,
9+
) => void;
10+
onDblClick?: (
11+
polyline: google.maps.Polyline,
12+
event: google.maps.PolyMouseEvent,
13+
) => void;
14+
onDrag?: (
15+
polyline: google.maps.Polyline,
16+
event: google.maps.MapMouseEvent,
17+
) => void;
18+
onDragEnd?: (
19+
polyline: google.maps.Polyline,
20+
event: google.maps.MapMouseEvent,
21+
) => void;
22+
onDragStart?: (
23+
polyline: google.maps.Polyline,
24+
event: google.maps.MapMouseEvent,
25+
) => void;
26+
onMouseDown?: (
27+
polyline: google.maps.Polyline,
28+
event: google.maps.PolyMouseEvent,
29+
) => void;
30+
onMouseMove?: (
31+
polyline: google.maps.Polyline,
32+
event: google.maps.PolyMouseEvent,
33+
) => void;
34+
onMouseOut?: (
35+
polyline: google.maps.Polyline,
36+
event: google.maps.PolyMouseEvent,
37+
) => void;
38+
onMouseOver?: (
39+
polyline: google.maps.Polyline,
40+
event: google.maps.PolyMouseEvent,
41+
) => void;
42+
onMouseUp?: (
43+
polyline: google.maps.Polyline,
44+
event: google.maps.PolyMouseEvent,
45+
) => void;
1346
}
1447

1548
export interface PolylineProps

‎src/hooks/useMvcObjectEventEffect.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const useMvcObjectEventEffect = (
1010
return;
1111
}
1212

13-
const listener = tg.addListener(key, callback);
13+
const listener = tg.addListener(key, callback.bind(null, tg));
1414

1515
return () => google.maps.event.removeListener(listener);
1616
}, [tg, callback]);

0 commit comments

Comments
 (0)