1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | import React from 'react';
|
8 | import {
|
9 | compose,
|
10 | defaultProps,
|
11 | withHandlers,
|
12 | withState,
|
13 | withProps,
|
14 | withPropsOnChange,
|
15 | } from 'recompose';
|
16 | import { createSelector } from 'reselect';
|
17 |
|
18 | import { susolvkaCoords, generateMarkers } from './data/fakeData';
|
19 |
|
20 | import GoogleMapReact from '../src';
|
21 |
|
22 | import ReactiveMarker from './markers/ReactiveMarker';
|
23 |
|
24 | import ptInBounds from './utils/ptInBounds';
|
25 | import props2Stream from './utils/props2Stream';
|
26 | import withStateSelector from './utils/withStateSelector';
|
27 |
|
28 | export const gMap = (
|
29 | {
|
30 | style,
|
31 | hoverDistance,
|
32 | options,
|
33 | mapParams: { center, zoom },
|
34 | onChange,
|
35 | onChildMouseEnter,
|
36 | onChildMouseLeave,
|
37 | markers,
|
38 | draggable,
|
39 | }
|
40 | ) => (
|
41 | <GoogleMapReact
|
42 | bootstrapURLKeys={{
|
43 | key: 'AIzaSyBMqz4ueWMfGGqdXlvwE_cIVfar60GROi8',
|
44 | }}
|
45 | style={style}
|
46 | options={options}
|
47 | draggable={draggable}
|
48 | hoverDistance={hoverDistance}
|
49 | zoom={zoom}
|
50 | center={center}
|
51 | onChange={onChange}
|
52 | onChildMouseEnter={onChildMouseEnter}
|
53 | onChildMouseLeave={onChildMouseLeave}
|
54 | experimental
|
55 | >
|
56 | {markers}
|
57 | </GoogleMapReact>
|
58 | );
|
59 |
|
60 | export const gMapHOC = compose(
|
61 | defaultProps({
|
62 | clusterRadius: 60,
|
63 | hoverDistance: 30,
|
64 | options: {
|
65 | minZoom: 3,
|
66 | maxZoom: 15,
|
67 | },
|
68 | style: {
|
69 | position: 'relative',
|
70 | margin: 0,
|
71 | padding: 0,
|
72 | flex: 1,
|
73 | },
|
74 | }),
|
75 |
|
76 | withStateSelector('markers', 'setMarkers', () =>
|
77 | createSelector(
|
78 | ({ route: { markersCount = 20 } }) => markersCount,
|
79 | markersCount => generateMarkers(markersCount)
|
80 | )),
|
81 | withState('hoveredMarkerId', 'setHoveredMarkerId', -1),
|
82 | withState('mapParams', 'setMapParams', { center: susolvkaCoords, zoom: 6 }),
|
83 |
|
84 | withHandlers({
|
85 | onChange: ({ setMapParams }) =>
|
86 | ({ center, zoom, bounds }) => {
|
87 | setMapParams({ center, zoom, bounds });
|
88 | },
|
89 | onChildMouseEnter: ({ setHoveredMarkerId }) =>
|
90 | (hoverKey, { id }) => {
|
91 | setHoveredMarkerId(id);
|
92 | },
|
93 | onChildMouseLeave: ({ setHoveredMarkerId }) =>
|
94 | () => {
|
95 | setHoveredMarkerId(-1);
|
96 | },
|
97 | }),
|
98 | withPropsOnChange(['markers', 'mapParams'], ({
|
99 | markers,
|
100 | mapParams: { bounds },
|
101 | }) => ({
|
102 | markers: bounds ? markers.filter(m => ptInBounds(bounds, m)) : [],
|
103 | })),
|
104 | withProps(({ hoveredMarkerId }) => ({
|
105 | draggable: hoveredMarkerId === -1,
|
106 | })),
|
107 | props2Stream('hoveredMarkerId'),
|
108 | withPropsOnChange(['markers', 'hoveredMarkerId$'], ({
|
109 | markers,
|
110 | hoveredMarkerId$,
|
111 | }) => ({
|
112 | markers: markers.map(({ ...markerProps, id }) => (
|
113 | <ReactiveMarker
|
114 | key={id}
|
115 | id={id}
|
116 | hoveredMarkerId$={hoveredMarkerId$}
|
117 | {...markerProps}
|
118 | />
|
119 | )),
|
120 | }))
|
121 | );
|
122 |
|
123 | export default gMapHOC(gMap);
|