@micromag/screen-map 0.3.173 → 0.3.181
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/index.js +33 -12
- package/lib/index.js +32 -11
- package/package.json +13 -13
package/es/index.js
CHANGED
|
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
|
|
|
7
7
|
import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
|
|
8
8
|
import { PropTypes as PropTypes$1 } from '@micromag/core';
|
|
9
9
|
import { PlaceholderMap, Transitions, Button, ScreenElement } from '@micromag/core/components';
|
|
10
|
-
import { useGoogleKeys, useScreenSize, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext, useScreenState } from '@micromag/core/contexts';
|
|
10
|
+
import { useGoogleKeys, useScreenSize, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext, useScreenState, useViewerInteraction } from '@micromag/core/contexts';
|
|
11
11
|
import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
|
|
12
12
|
import { getStyleFromColor, isTextFilled } from '@micromag/core/utils';
|
|
13
13
|
import { Background } from '@micromag/element-background';
|
|
@@ -29,6 +29,26 @@ var defaultCenter = {
|
|
|
29
29
|
lng: -73.56
|
|
30
30
|
};
|
|
31
31
|
var defaultZoom = 10;
|
|
32
|
+
var stopDragEventsPropagation = {
|
|
33
|
+
onTouchMove: function onTouchMove(e) {
|
|
34
|
+
return e.stopPropagation();
|
|
35
|
+
},
|
|
36
|
+
onTouchStart: function onTouchStart(e) {
|
|
37
|
+
return e.stopPropagation();
|
|
38
|
+
},
|
|
39
|
+
onTouchEnd: function onTouchEnd(e) {
|
|
40
|
+
return e.stopPropagation();
|
|
41
|
+
},
|
|
42
|
+
onPointerMove: function onPointerMove(e) {
|
|
43
|
+
return e.stopPropagation();
|
|
44
|
+
},
|
|
45
|
+
onPointerUp: function onPointerUp(e) {
|
|
46
|
+
return e.stopPropagation();
|
|
47
|
+
},
|
|
48
|
+
onPointerDown: function onPointerDown(e) {
|
|
49
|
+
return e.stopPropagation();
|
|
50
|
+
}
|
|
51
|
+
};
|
|
32
52
|
var propTypes = {
|
|
33
53
|
layout: PropTypes.oneOf(['normal']),
|
|
34
54
|
draggable: PropTypes.bool,
|
|
@@ -45,8 +65,8 @@ var propTypes = {
|
|
|
45
65
|
current: PropTypes.bool,
|
|
46
66
|
active: PropTypes.bool,
|
|
47
67
|
transitions: PropTypes$1.transitions,
|
|
48
|
-
enableInteractions: PropTypes.func,
|
|
49
|
-
disableInteraction: PropTypes.func,
|
|
68
|
+
// enableInteractions: PropTypes.func,
|
|
69
|
+
// disableInteraction: PropTypes.func,
|
|
50
70
|
type: PropTypes.string,
|
|
51
71
|
className: PropTypes.string
|
|
52
72
|
};
|
|
@@ -66,8 +86,6 @@ var defaultProps = {
|
|
|
66
86
|
current: true,
|
|
67
87
|
active: true,
|
|
68
88
|
transitions: null,
|
|
69
|
-
enableInteractions: null,
|
|
70
|
-
disableInteraction: null,
|
|
71
89
|
type: null,
|
|
72
90
|
className: null
|
|
73
91
|
};
|
|
@@ -90,8 +108,6 @@ function MapScreen(_ref) {
|
|
|
90
108
|
current = _ref.current,
|
|
91
109
|
active = _ref.active,
|
|
92
110
|
transitions = _ref.transitions,
|
|
93
|
-
enableInteractions = _ref.enableInteractions,
|
|
94
|
-
disableInteraction = _ref.disableInteraction,
|
|
95
111
|
type = _ref.type,
|
|
96
112
|
className = _ref.className;
|
|
97
113
|
|
|
@@ -154,6 +170,10 @@ function MapScreen(_ref) {
|
|
|
154
170
|
opened = _useState6[0],
|
|
155
171
|
setOpened = _useState6[1];
|
|
156
172
|
|
|
173
|
+
var _useViewerInteraction = useViewerInteraction(),
|
|
174
|
+
enableInteraction = _useViewerInteraction.enableInteraction,
|
|
175
|
+
disableInteraction = _useViewerInteraction.disableInteraction;
|
|
176
|
+
|
|
157
177
|
var onMapReady = useCallback(function () {
|
|
158
178
|
return setReady(true);
|
|
159
179
|
}, [setReady]);
|
|
@@ -189,6 +209,7 @@ function MapScreen(_ref) {
|
|
|
189
209
|
setOpened(true);
|
|
190
210
|
|
|
191
211
|
if (disableInteraction !== null) {
|
|
212
|
+
console.log('yo');
|
|
192
213
|
disableInteraction();
|
|
193
214
|
}
|
|
194
215
|
|
|
@@ -197,13 +218,13 @@ function MapScreen(_ref) {
|
|
|
197
218
|
var onCloseClick = useCallback(function () {
|
|
198
219
|
setOpened(false);
|
|
199
220
|
|
|
200
|
-
if (
|
|
201
|
-
|
|
221
|
+
if (enableInteraction !== null) {
|
|
222
|
+
enableInteraction();
|
|
202
223
|
}
|
|
203
224
|
|
|
204
225
|
trackScreenEvent('click_close', 'Close icon');
|
|
205
226
|
closeMarker();
|
|
206
|
-
}, [setOpened,
|
|
227
|
+
}, [setOpened, enableInteraction, trackScreenEvent]);
|
|
207
228
|
var onMapDragEnd = useCallback(function (newCenter) {
|
|
208
229
|
var coords = newCenter.toJSON();
|
|
209
230
|
trackScreenEvent('drag_map', "Latitude: ".concat(coords.lat.toFixed(4), ", Longitude: ").concat(coords.lng.toFixed(4)), {
|
|
@@ -429,10 +450,10 @@ function MapScreen(_ref) {
|
|
|
429
450
|
onClickMarker: onClickMarker,
|
|
430
451
|
onReady: onMapReady,
|
|
431
452
|
onDragEnd: onMapDragEnd
|
|
432
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
453
|
+
}), /*#__PURE__*/React.createElement("div", Object.assign({
|
|
433
454
|
key: "marker-overlay",
|
|
434
455
|
className: styles.markerOverlayContainer
|
|
435
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
456
|
+
}, stopDragEventsPropagation), /*#__PURE__*/React.createElement("div", {
|
|
436
457
|
className: styles.markerOverlayScrollable
|
|
437
458
|
}, /*#__PURE__*/React.createElement(Scroll, {
|
|
438
459
|
fullscreen: true,
|
package/lib/index.js
CHANGED
|
@@ -51,6 +51,26 @@ var defaultCenter = {
|
|
|
51
51
|
lng: -73.56
|
|
52
52
|
};
|
|
53
53
|
var defaultZoom = 10;
|
|
54
|
+
var stopDragEventsPropagation = {
|
|
55
|
+
onTouchMove: function onTouchMove(e) {
|
|
56
|
+
return e.stopPropagation();
|
|
57
|
+
},
|
|
58
|
+
onTouchStart: function onTouchStart(e) {
|
|
59
|
+
return e.stopPropagation();
|
|
60
|
+
},
|
|
61
|
+
onTouchEnd: function onTouchEnd(e) {
|
|
62
|
+
return e.stopPropagation();
|
|
63
|
+
},
|
|
64
|
+
onPointerMove: function onPointerMove(e) {
|
|
65
|
+
return e.stopPropagation();
|
|
66
|
+
},
|
|
67
|
+
onPointerUp: function onPointerUp(e) {
|
|
68
|
+
return e.stopPropagation();
|
|
69
|
+
},
|
|
70
|
+
onPointerDown: function onPointerDown(e) {
|
|
71
|
+
return e.stopPropagation();
|
|
72
|
+
}
|
|
73
|
+
};
|
|
54
74
|
var propTypes = {
|
|
55
75
|
layout: PropTypes__default["default"].oneOf(['normal']),
|
|
56
76
|
draggable: PropTypes__default["default"].bool,
|
|
@@ -67,8 +87,8 @@ var propTypes = {
|
|
|
67
87
|
current: PropTypes__default["default"].bool,
|
|
68
88
|
active: PropTypes__default["default"].bool,
|
|
69
89
|
transitions: core.PropTypes.transitions,
|
|
70
|
-
enableInteractions:
|
|
71
|
-
disableInteraction:
|
|
90
|
+
// enableInteractions: PropTypes.func,
|
|
91
|
+
// disableInteraction: PropTypes.func,
|
|
72
92
|
type: PropTypes__default["default"].string,
|
|
73
93
|
className: PropTypes__default["default"].string
|
|
74
94
|
};
|
|
@@ -88,8 +108,6 @@ var defaultProps = {
|
|
|
88
108
|
current: true,
|
|
89
109
|
active: true,
|
|
90
110
|
transitions: null,
|
|
91
|
-
enableInteractions: null,
|
|
92
|
-
disableInteraction: null,
|
|
93
111
|
type: null,
|
|
94
112
|
className: null
|
|
95
113
|
};
|
|
@@ -112,8 +130,6 @@ function MapScreen(_ref) {
|
|
|
112
130
|
current = _ref.current,
|
|
113
131
|
active = _ref.active,
|
|
114
132
|
transitions = _ref.transitions,
|
|
115
|
-
enableInteractions = _ref.enableInteractions,
|
|
116
|
-
disableInteraction = _ref.disableInteraction,
|
|
117
133
|
type = _ref.type,
|
|
118
134
|
className = _ref.className;
|
|
119
135
|
|
|
@@ -176,6 +192,10 @@ function MapScreen(_ref) {
|
|
|
176
192
|
opened = _useState6[0],
|
|
177
193
|
setOpened = _useState6[1];
|
|
178
194
|
|
|
195
|
+
var _useViewerInteraction = contexts.useViewerInteraction(),
|
|
196
|
+
enableInteraction = _useViewerInteraction.enableInteraction,
|
|
197
|
+
disableInteraction = _useViewerInteraction.disableInteraction;
|
|
198
|
+
|
|
179
199
|
var onMapReady = React.useCallback(function () {
|
|
180
200
|
return setReady(true);
|
|
181
201
|
}, [setReady]);
|
|
@@ -211,6 +231,7 @@ function MapScreen(_ref) {
|
|
|
211
231
|
setOpened(true);
|
|
212
232
|
|
|
213
233
|
if (disableInteraction !== null) {
|
|
234
|
+
console.log('yo');
|
|
214
235
|
disableInteraction();
|
|
215
236
|
}
|
|
216
237
|
|
|
@@ -219,13 +240,13 @@ function MapScreen(_ref) {
|
|
|
219
240
|
var onCloseClick = React.useCallback(function () {
|
|
220
241
|
setOpened(false);
|
|
221
242
|
|
|
222
|
-
if (
|
|
223
|
-
|
|
243
|
+
if (enableInteraction !== null) {
|
|
244
|
+
enableInteraction();
|
|
224
245
|
}
|
|
225
246
|
|
|
226
247
|
trackScreenEvent('click_close', 'Close icon');
|
|
227
248
|
closeMarker();
|
|
228
|
-
}, [setOpened,
|
|
249
|
+
}, [setOpened, enableInteraction, trackScreenEvent]);
|
|
229
250
|
var onMapDragEnd = React.useCallback(function (newCenter) {
|
|
230
251
|
var coords = newCenter.toJSON();
|
|
231
252
|
trackScreenEvent('drag_map', "Latitude: ".concat(coords.lat.toFixed(4), ", Longitude: ").concat(coords.lng.toFixed(4)), {
|
|
@@ -451,10 +472,10 @@ function MapScreen(_ref) {
|
|
|
451
472
|
onClickMarker: onClickMarker,
|
|
452
473
|
onReady: onMapReady,
|
|
453
474
|
onDragEnd: onMapDragEnd
|
|
454
|
-
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
475
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
455
476
|
key: "marker-overlay",
|
|
456
477
|
className: styles.markerOverlayContainer
|
|
457
|
-
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
478
|
+
}, stopDragEventsPropagation), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
458
479
|
className: styles.markerOverlayScrollable
|
|
459
480
|
}, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
|
|
460
481
|
fullscreen: true,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-map",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.181",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -49,17 +49,17 @@
|
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@babel/runtime": "^7.13.10",
|
|
52
|
-
"@micromag/core": "^0.3.
|
|
53
|
-
"@micromag/element-background": "^0.3.
|
|
54
|
-
"@micromag/element-button": "^0.3.
|
|
55
|
-
"@micromag/element-call-to-action": "^0.3.
|
|
56
|
-
"@micromag/element-container": "^0.3.
|
|
57
|
-
"@micromag/element-heading": "^0.3.
|
|
58
|
-
"@micromag/element-image": "^0.3.
|
|
59
|
-
"@micromag/element-map": "^0.3.
|
|
60
|
-
"@micromag/element-scroll": "^0.3.
|
|
61
|
-
"@micromag/element-text": "^0.3.
|
|
62
|
-
"@micromag/transforms": "^0.3.
|
|
52
|
+
"@micromag/core": "^0.3.181",
|
|
53
|
+
"@micromag/element-background": "^0.3.181",
|
|
54
|
+
"@micromag/element-button": "^0.3.181",
|
|
55
|
+
"@micromag/element-call-to-action": "^0.3.181",
|
|
56
|
+
"@micromag/element-container": "^0.3.181",
|
|
57
|
+
"@micromag/element-heading": "^0.3.181",
|
|
58
|
+
"@micromag/element-image": "^0.3.181",
|
|
59
|
+
"@micromag/element-map": "^0.3.181",
|
|
60
|
+
"@micromag/element-scroll": "^0.3.181",
|
|
61
|
+
"@micromag/element-text": "^0.3.181",
|
|
62
|
+
"@micromag/transforms": "^0.3.181",
|
|
63
63
|
"classnames": "^2.2.6",
|
|
64
64
|
"lodash": "^4.17.21",
|
|
65
65
|
"prop-types": "^15.7.2",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"publishConfig": {
|
|
70
70
|
"access": "public"
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "8eadaa7f17c86bf2f8f80cb13bfdd3f6295d29d5"
|
|
73
73
|
}
|