-
Notifications
You must be signed in to change notification settings - Fork 0
/
OmhMarker.tsx
100 lines (92 loc) · 2.76 KB
/
OmhMarker.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import React, {
forwardRef,
useEffect,
useImperativeHandle,
useMemo,
} from 'react';
import { PixelRatio } from 'react-native';
import useOmhMarkerOSMFix from '../../hooks/useOmhMarkerOSMFix';
import { resolveResource } from '../../utils/RNResourceTranscoder';
import { OmhMarkerProps, OmhMarkerRef } from './OmhMarker.types';
import RNOmhMapsMarkerNativeComponent, {
Commands,
RNOmhMapsMarkerNativeComponent as RefType,
} from './RNOmhMapsMarkerNativeComponent';
/**
* The OMH Marker component.
*/
export const OmhMarker = forwardRef<OmhMarkerRef, OmhMarkerProps>(
(
{
icon,
position,
onPress,
infoWindowAnchor: _infoWindowAnchor,
backgroundColor: _backgroundColor,
...props
},
forwardedRef
) => {
const nativeComponentRef = React.useRef<React.ElementRef<RefType>>();
useImperativeHandle(forwardedRef, () => ({
showInfoWindow: () => {
if (nativeComponentRef.current) {
Commands.showInfoWindow(nativeComponentRef.current);
}
},
hideInfoWindow: () => {
if (nativeComponentRef.current) {
Commands.hideInfoWindow(nativeComponentRef.current);
}
},
}));
const infoWindowAnchor = useOmhMarkerOSMFix(_infoWindowAnchor);
const resolvedIcon = useMemo(
() =>
icon === null || icon === undefined
? undefined
: typeof icon === 'number'
? resolveResource(icon)
: icon,
[icon]
);
const backgroundColor = useMemo(
() => (_backgroundColor === undefined ? -1 : _backgroundColor),
[_backgroundColor]
);
// unmount effect - remove marker
useEffect(() => {
return () => {
if (nativeComponentRef.current) {
// eslint-disable-next-line react-hooks/exhaustive-deps
Commands.remove(nativeComponentRef.current);
}
};
}, []);
return (
<RNOmhMapsMarkerNativeComponent
{...props}
icon={
resolvedIcon
? {
...resolvedIcon,
// compensate for image resizing occurring in the native library that properly sizes Drawables
width: resolvedIcon.width
? PixelRatio.getPixelSizeForLayoutSize(resolvedIcon.width)
: undefined,
height: resolvedIcon.height
? PixelRatio.getPixelSizeForLayoutSize(resolvedIcon.height)
: undefined,
}
: undefined
}
infoWindowAnchor={infoWindowAnchor}
backgroundColor={backgroundColor}
markerPosition={position}
onMarkerPress={onPress}
// @ts-ignore next line: missing typing for 'ref' prop on HostComponent
ref={nativeComponentRef}
/>
);
}
);