-
Notifications
You must be signed in to change notification settings - Fork 0
/
OmhPolyline.tsx
100 lines (92 loc) · 2.39 KB
/
OmhPolyline.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, { useCallback, useMemo } from 'react';
import RNOmhMapsPolylineNativeComponent from './RNOmhMapsPolylineNativeComponent';
import { mapCapToNative } from './OmhPolylineHelpers';
import { resolveResource } from '../../utils/RNResourceTranscoder';
import { OmhPolylineProps } from './OmhPolyline.types';
export const OmhPolyline = ({
points,
clickable,
color,
width,
isVisible,
zIndex,
jointType,
cap: omhCap,
startCap: omhStartCap,
endCap: omhEndCap,
pattern,
spans,
onPolylineClick,
}: OmhPolylineProps) => {
const nativeSpans = useMemo(() => {
return spans?.map(omhSpan => {
const stamp = omhSpan.stamp ? resolveResource(omhSpan.stamp) : undefined;
if (omhSpan.type === 'monochromatic') {
return {
segments: omhSpan.segments,
stamp,
color: omhSpan.color,
type: omhSpan.type,
};
} else {
return {
segments: omhSpan.segments,
stamp,
fromColor: omhSpan.fromColor,
toColor: omhSpan.toColor,
type: omhSpan.type,
};
}
});
}, [spans]);
const cap = useMemo(() => mapCapToNative(omhCap), [omhCap]);
const startCap = useMemo(() => mapCapToNative(omhStartCap), [omhStartCap]);
const endCap = useMemo(() => mapCapToNative(omhEndCap), [omhEndCap]);
const nativeLineJoin = useMemo(() => {
switch (jointType) {
case 'round':
return 2;
case 'bevel':
return 1;
case 'miter':
default:
return 0;
}
}, [jointType]);
const nativePattern = useMemo(() => {
return pattern?.map(item => {
if (item.variant === 'dot') {
return {
type: item.variant,
};
}
return {
type: item.variant,
length: item.length,
};
});
}, [pattern]);
const handlePolylineClick = useCallback(
(event: { nativeEvent: { consumed: boolean } }) => {
onPolylineClick?.(event.nativeEvent.consumed);
},
[onPolylineClick]
);
return (
<RNOmhMapsPolylineNativeComponent
points={points}
clickable={clickable}
color={color}
width={width}
isVisible={isVisible}
polylineZIndex={zIndex}
jointType={nativeLineJoin}
cap={cap}
startCap={startCap}
endCap={endCap}
pattern={nativePattern}
spans={nativeSpans}
onPolylineClick={handlePolylineClick}
/>
);
};