@micromag/screen-map 0.3.311 → 0.3.318
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/assets/css/styles.css +1 -1
- package/es/index.js +102 -157
- package/lib/index.js +103 -157
- package/package.json +14 -14
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-map-container .micromag-screen-map-background,.micromag-screen-map-container .micromag-screen-map-markerOverlayContainer,.micromag-screen-map-container .micromag-screen-map-markerOverlayScrollable,.micromag-screen-map-container .micromag-screen-map-splash{position:absolute;top:0;
|
|
1
|
+
.micromag-screen-map-container .micromag-screen-map-background,.micromag-screen-map-container .micromag-screen-map-markerOverlayContainer,.micromag-screen-map-container .micromag-screen-map-markerOverlayScrollable,.micromag-screen-map-container .micromag-screen-map-splash{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-map-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-map-disabled.micromag-screen-map-container{overflow:hidden;pointer-events:none}.micromag-screen-map-hidden.micromag-screen-map-container{display:none;visibility:hidden}.micromag-screen-map-placeholder.micromag-screen-map-container .micromag-screen-map-content{padding:6px;position:relative}.micromag-screen-map-container .micromag-screen-map-background{z-index:0}.micromag-screen-map-container .micromag-screen-map-content{z-index:1}.micromag-screen-map-container .micromag-screen-map-placeholder{height:100%}.micromag-screen-map-container .micromag-screen-map-markerOverlayContainer{background-color:rgba(28,28,28,.4);opacity:0;pointer-events:none;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.micromag-screen-map-container .micromag-screen-map-markerOverlaySafe{display:block;width:100%}.micromag-screen-map-container .micromag-screen-map-markerOverlay{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;width:100%}.micromag-screen-map-container .micromag-screen-map-markerOverlayContent{-ms-flex-positive:1;background-color:#fff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;flex-grow:1;padding:0 20px;position:relative;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.micromag-screen-map-container .micromag-screen-map-markerOverlayContentInner{color:#1c1c1c}.micromag-screen-map-container .micromag-screen-map-swipeIndicator{border:2px solid #adadad;border-radius:2px;margin:10px auto;width:30px}.micromag-screen-map-container .micromag-screen-map-splash{-ms-flex-pack:center;background-color:rgba(28,28,28,.75);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;padding:20px;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-description,.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-title{margin:10px 0}.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-button{display:inline-block}.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-emptyButton,.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-emptyDescription,.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-emptyTitle{margin:5px auto;width:100%}.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-emptyTitle{height:50px}.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-emptyDescription{height:80px}.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-emptyButton{height:70px}.micromag-screen-map-container .micromag-screen-map-splashButton{margin-top:10px}.micromag-screen-map-container .micromag-screen-map-closeButton{background-color:rgba(43,43,43,.8);border-radius:50%;display:block;font-size:30px;height:44px;line-height:0;opacity:0;padding:0;pointer-events:none;position:absolute;right:20px;text-align:center;top:20px;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease;width:44px}.micromag-screen-map-container .micromag-screen-map-markerDescription,.micromag-screen-map-container .micromag-screen-map-markerImage,.micromag-screen-map-container .micromag-screen-map-markerSubtitle,.micromag-screen-map-container .micromag-screen-map-markerTitle{margin-bottom:20px}.micromag-screen-map-container.micromag-screen-map-hasSelectedMarker .micromag-screen-map-markerOverlayContainer{opacity:1;pointer-events:auto}.micromag-screen-map-container.micromag-screen-map-hasSelectedMarker .micromag-screen-map-markerOverlayContent{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.micromag-screen-map-container.micromag-screen-map-opened .micromag-screen-map-splash{opacity:0;pointer-events:none}.micromag-screen-map-container.micromag-screen-map-opened .micromag-screen-map-closeButton{opacity:1;pointer-events:all}
|
package/es/index.js
CHANGED
|
@@ -18,11 +18,12 @@ import ImageElement from '@micromag/element-image';
|
|
|
18
18
|
import Map from '@micromag/element-map';
|
|
19
19
|
import Scroll from '@micromag/element-scroll';
|
|
20
20
|
import Text from '@micromag/element-text';
|
|
21
|
+
import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
|
|
21
22
|
import _extends from '@babel/runtime/helpers/extends';
|
|
22
23
|
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
23
24
|
import { Map as Map$1, Container as Container$1 } from '@micromag/transforms/apple-news';
|
|
24
25
|
|
|
25
|
-
var styles = {"container":"micromag-screen-map-container","
|
|
26
|
+
var styles = {"container":"micromag-screen-map-container","splash":"micromag-screen-map-splash","markerOverlayScrollable":"micromag-screen-map-markerOverlayScrollable","markerOverlayContainer":"micromag-screen-map-markerOverlayContainer","background":"micromag-screen-map-background","disabled":"micromag-screen-map-disabled","hidden":"micromag-screen-map-hidden","placeholder":"micromag-screen-map-placeholder","content":"micromag-screen-map-content","markerOverlaySafe":"micromag-screen-map-markerOverlaySafe","markerOverlay":"micromag-screen-map-markerOverlay","markerOverlayContent":"micromag-screen-map-markerOverlayContent","markerOverlayContentInner":"micromag-screen-map-markerOverlayContentInner","swipeIndicator":"micromag-screen-map-swipeIndicator","title":"micromag-screen-map-title","description":"micromag-screen-map-description","button":"micromag-screen-map-button","emptyTitle":"micromag-screen-map-emptyTitle","emptyDescription":"micromag-screen-map-emptyDescription","emptyButton":"micromag-screen-map-emptyButton","splashButton":"micromag-screen-map-splashButton","closeButton":"micromag-screen-map-closeButton","markerImage":"micromag-screen-map-markerImage","markerTitle":"micromag-screen-map-markerTitle","markerSubtitle":"micromag-screen-map-markerSubtitle","markerDescription":"micromag-screen-map-markerDescription","hasSelectedMarker":"micromag-screen-map-hasSelectedMarker","opened":"micromag-screen-map-opened"};
|
|
26
27
|
|
|
27
28
|
var defaultCenter = {
|
|
28
29
|
lat: 45.5,
|
|
@@ -89,91 +90,72 @@ var defaultProps = {
|
|
|
89
90
|
type: null,
|
|
90
91
|
className: null
|
|
91
92
|
};
|
|
92
|
-
|
|
93
93
|
function MapScreen(_ref) {
|
|
94
94
|
var _ref15;
|
|
95
|
-
|
|
96
95
|
var layout = _ref.layout,
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
96
|
+
draggable = _ref.draggable,
|
|
97
|
+
markers = _ref.markers,
|
|
98
|
+
title = _ref.title,
|
|
99
|
+
description = _ref.description,
|
|
100
|
+
button = _ref.button,
|
|
101
|
+
openedMarkerSpacerHeight = _ref.openedMarkerSpacerHeight,
|
|
102
|
+
withMarkerImages = _ref.withMarkerImages,
|
|
103
|
+
zoom = _ref.zoom,
|
|
104
|
+
center = _ref.center,
|
|
105
|
+
fitBounds = _ref.fitBounds,
|
|
106
|
+
background = _ref.background,
|
|
107
|
+
current = _ref.current,
|
|
108
|
+
active = _ref.active,
|
|
109
|
+
transitions = _ref.transitions,
|
|
110
|
+
type = _ref.type,
|
|
111
|
+
className = _ref.className;
|
|
114
112
|
var _useIntl = useIntl(),
|
|
115
|
-
|
|
116
|
-
|
|
113
|
+
locale = _useIntl.locale;
|
|
117
114
|
var _useGoogleKeys = useGoogleKeys(),
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
115
|
+
_useGoogleKeys$apiKey = _useGoogleKeys.apiKey,
|
|
116
|
+
apiKey = _useGoogleKeys$apiKey === void 0 ? null : _useGoogleKeys$apiKey;
|
|
121
117
|
var trackScreenEvent = useTrackScreenEvent(type);
|
|
122
|
-
|
|
123
118
|
var _useState = useState(null),
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
119
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
120
|
+
selectedMarkerIndex = _useState2[0],
|
|
121
|
+
setSelectedMarkerIndex = _useState2[1];
|
|
128
122
|
var hasSelectedMarker = selectedMarkerIndex !== null;
|
|
129
123
|
var lastRenderedMarker = useRef(null);
|
|
130
|
-
|
|
131
124
|
var _useScreenSize = useScreenSize(),
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
125
|
+
width = _useScreenSize.width,
|
|
126
|
+
height = _useScreenSize.height,
|
|
127
|
+
resolution = _useScreenSize.resolution;
|
|
136
128
|
var _usePlaybackContext = usePlaybackContext(),
|
|
137
|
-
|
|
138
|
-
|
|
129
|
+
muted = _usePlaybackContext.muted;
|
|
139
130
|
var mediaRef = usePlaybackMediaRef(current);
|
|
140
|
-
|
|
141
131
|
var _ref2 = background || {},
|
|
142
|
-
|
|
143
|
-
|
|
132
|
+
backgroundColor = _ref2.color;
|
|
144
133
|
var markerOverlayContentStyle = getStyleFromColor(backgroundColor);
|
|
145
|
-
|
|
146
134
|
var _useScreenRenderConte = useScreenRenderContext(),
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
135
|
+
isView = _useScreenRenderConte.isView,
|
|
136
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
137
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
138
|
+
isEdit = _useScreenRenderConte.isEdit,
|
|
139
|
+
isStatic = _useScreenRenderConte.isStatic,
|
|
140
|
+
isCapture = _useScreenRenderConte.isCapture;
|
|
154
141
|
var screenState = useScreenState();
|
|
155
|
-
|
|
156
142
|
var _useState3 = useState(false),
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
143
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
144
|
+
ready = _useState4[0],
|
|
145
|
+
setReady = _useState4[1];
|
|
161
146
|
var transitionPlaying = current && ready;
|
|
162
147
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
163
148
|
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
164
|
-
var backgroundPlaying = current && (isView || isEdit);
|
|
165
|
-
|
|
149
|
+
var backgroundPlaying = current && (isView || isEdit);
|
|
150
|
+
// const backgroundShouldLoad = current || active;
|
|
166
151
|
var backgroundShouldLoad = current || active;
|
|
167
|
-
|
|
168
152
|
var _useState5 = useState(isStatic || isCapture),
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
153
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
154
|
+
opened = _useState6[0],
|
|
155
|
+
setOpened = _useState6[1];
|
|
173
156
|
var _useViewerInteraction = useViewerInteraction(),
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
157
|
+
enableInteraction = _useViewerInteraction.enableInteraction,
|
|
158
|
+
disableInteraction = _useViewerInteraction.disableInteraction;
|
|
177
159
|
var onMapReady = useCallback(function () {
|
|
178
160
|
return setReady(true);
|
|
179
161
|
}, [setReady]);
|
|
@@ -207,20 +189,16 @@ function MapScreen(_ref) {
|
|
|
207
189
|
}, [finalMarkers, setSelectedMarkerIndex, trackScreenEvent]);
|
|
208
190
|
var onButtonClick = useCallback(function () {
|
|
209
191
|
setOpened(true);
|
|
210
|
-
|
|
211
192
|
if (disableInteraction !== null) {
|
|
212
193
|
disableInteraction();
|
|
213
194
|
}
|
|
214
|
-
|
|
215
195
|
trackScreenEvent('click_button', button.body);
|
|
216
196
|
}, [setOpened, disableInteraction, trackScreenEvent, button]);
|
|
217
197
|
var onCloseClick = useCallback(function () {
|
|
218
198
|
setOpened(false);
|
|
219
|
-
|
|
220
199
|
if (enableInteraction !== null) {
|
|
221
200
|
enableInteraction();
|
|
222
201
|
}
|
|
223
|
-
|
|
224
202
|
trackScreenEvent('click_close', 'Close icon');
|
|
225
203
|
closeMarker();
|
|
226
204
|
}, [setOpened, enableInteraction, trackScreenEvent]);
|
|
@@ -232,7 +210,6 @@ function MapScreen(_ref) {
|
|
|
232
210
|
}, [trackScreenEvent]);
|
|
233
211
|
var onScrolledBottom = useCallback(function (_ref3) {
|
|
234
212
|
var initial = _ref3.initial;
|
|
235
|
-
|
|
236
213
|
if (initial) {
|
|
237
214
|
var selectedMarker = (markers || [])[selectedMarkerIndex];
|
|
238
215
|
trackScreenEvent('scroll', "Marker ".concat(selectedMarkerIndex + 1, ": ").concat(selectedMarker.title.body), {
|
|
@@ -241,19 +218,16 @@ function MapScreen(_ref) {
|
|
|
241
218
|
});
|
|
242
219
|
}
|
|
243
220
|
}, [trackScreenEvent, markers, selectedMarkerIndex]);
|
|
244
|
-
|
|
245
221
|
var _useDimensionObserver = useDimensionObserver({
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
222
|
+
disabled: !isView
|
|
223
|
+
}),
|
|
224
|
+
markerOverContentInnerRef = _useDimensionObserver.ref,
|
|
225
|
+
_useDimensionObserver2 = _useDimensionObserver.width,
|
|
226
|
+
markerOverContentInnerWidth = _useDimensionObserver2 === void 0 ? '100%' : _useDimensionObserver2;
|
|
252
227
|
var _useState7 = useState(0),
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
228
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
229
|
+
markerImagesLoaded = _useState8[0],
|
|
230
|
+
setMarkerImagesLoaded = _useState8[1];
|
|
257
231
|
var allMarkersImagesLoaded = markerImagesLoaded === (markers || []).length;
|
|
258
232
|
var finalReady = ready && (!withMarkerImages || allMarkersImagesLoaded);
|
|
259
233
|
useEffect(function () {
|
|
@@ -261,28 +235,22 @@ function MapScreen(_ref) {
|
|
|
261
235
|
setMarkerImagesLoaded(0);
|
|
262
236
|
var imgs = markers.map(function (marker) {
|
|
263
237
|
var _ref4 = marker || {},
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
238
|
+
_ref4$image = _ref4.image,
|
|
239
|
+
image = _ref4$image === void 0 ? null : _ref4$image;
|
|
267
240
|
var _ref5 = image || {},
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
241
|
+
_ref5$url = _ref5.url,
|
|
242
|
+
url = _ref5$url === void 0 ? null : _ref5$url;
|
|
271
243
|
var withUrl = url !== null;
|
|
272
|
-
|
|
273
244
|
if (withUrl) {
|
|
274
245
|
var img = new Image();
|
|
275
246
|
img.src = url;
|
|
276
|
-
|
|
277
247
|
img.onload = function () {
|
|
278
248
|
setMarkerImagesLoaded(function (index) {
|
|
279
249
|
return setMarkerImagesLoaded(index + 1);
|
|
280
250
|
});
|
|
281
251
|
};
|
|
282
|
-
|
|
283
252
|
return img;
|
|
284
253
|
}
|
|
285
|
-
|
|
286
254
|
return null;
|
|
287
255
|
});
|
|
288
256
|
return function () {
|
|
@@ -290,26 +258,24 @@ function MapScreen(_ref) {
|
|
|
290
258
|
return img !== null;
|
|
291
259
|
}).forEach(function (img) {
|
|
292
260
|
img.onload = function () {}; // eslint-disable-line no-param-reassign
|
|
293
|
-
|
|
294
261
|
});
|
|
295
262
|
};
|
|
296
263
|
}
|
|
297
264
|
|
|
298
265
|
return function () {};
|
|
299
|
-
}, [withMarkerImages, markers]);
|
|
266
|
+
}, [withMarkerImages, markers]);
|
|
300
267
|
|
|
268
|
+
// Switch state
|
|
301
269
|
useEffect(function () {
|
|
302
270
|
if (!isEdit && !isPreview) {
|
|
303
271
|
return;
|
|
304
272
|
}
|
|
305
|
-
|
|
306
273
|
var _ref6 = screenState !== null ? screenState.split('.') : [],
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
274
|
+
_ref7 = _slicedToArray(_ref6, 2),
|
|
275
|
+
_ref7$ = _ref7[0],
|
|
276
|
+
stateId = _ref7$ === void 0 ? null : _ref7$,
|
|
277
|
+
_ref7$2 = _ref7[1],
|
|
278
|
+
markerIndex = _ref7$2 === void 0 ? null : _ref7$2;
|
|
313
279
|
if (stateId === 'intro') {
|
|
314
280
|
setOpened(false);
|
|
315
281
|
setSelectedMarkerIndex(null);
|
|
@@ -322,76 +288,62 @@ function MapScreen(_ref) {
|
|
|
322
288
|
}
|
|
323
289
|
}, [screenState, isEdit, setOpened]);
|
|
324
290
|
var staticUrl;
|
|
325
|
-
|
|
326
291
|
if (width > 0 && height > 0 && apiKey !== null) {
|
|
327
292
|
var correctMarkers = markers !== null ? markers.filter(function (it) {
|
|
328
293
|
return it !== null;
|
|
329
294
|
}).filter(function (_ref8) {
|
|
330
295
|
var _ref8$geoPosition = _ref8.geoPosition,
|
|
331
|
-
|
|
296
|
+
geoPosition = _ref8$geoPosition === void 0 ? null : _ref8$geoPosition;
|
|
332
297
|
return geoPosition !== null;
|
|
333
298
|
}) : null;
|
|
334
299
|
staticUrl = "https://maps.googleapis.com/maps/api/staticmap?size=".concat(Math.round(width), "x").concat(Math.round(height));
|
|
335
|
-
|
|
336
300
|
if (center !== null && (correctMarkers === null || correctMarkers.length === 0)) {
|
|
337
301
|
var _ref9 = center || {},
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
302
|
+
_ref9$lat = _ref9.lat,
|
|
303
|
+
lat = _ref9$lat === void 0 ? null : _ref9$lat,
|
|
304
|
+
_ref9$lng = _ref9.lng,
|
|
305
|
+
lng = _ref9$lng === void 0 ? null : _ref9$lng;
|
|
343
306
|
staticUrl += "¢er=".concat(lat, ",").concat(lng);
|
|
344
307
|
}
|
|
345
|
-
|
|
346
308
|
if (zoom !== null) {
|
|
347
309
|
staticUrl += "&zoom=".concat(zoom);
|
|
348
310
|
}
|
|
349
|
-
|
|
350
311
|
if (apiKey !== null) {
|
|
351
312
|
staticUrl += "&key=".concat(apiKey);
|
|
352
313
|
}
|
|
353
|
-
|
|
354
314
|
if (locale !== null) {
|
|
355
315
|
staticUrl += "&language=".concat(locale);
|
|
356
316
|
}
|
|
357
|
-
|
|
358
317
|
if (correctMarkers !== null) {
|
|
359
318
|
staticUrl += correctMarkers.map(function (marker) {
|
|
360
319
|
var _ref10 = marker || {},
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
320
|
+
_ref10$geoPosition = _ref10.geoPosition,
|
|
321
|
+
geoPosition = _ref10$geoPosition === void 0 ? null : _ref10$geoPosition;
|
|
364
322
|
var _ref11 = geoPosition || {},
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
323
|
+
_ref11$lat = _ref11.lat,
|
|
324
|
+
lat = _ref11$lat === void 0 ? null : _ref11$lat,
|
|
325
|
+
_ref11$lng = _ref11.lng,
|
|
326
|
+
lng = _ref11$lng === void 0 ? null : _ref11$lng;
|
|
370
327
|
var _ref12 = marker || {},
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
328
|
+
_ref12$image = _ref12.image,
|
|
329
|
+
image = _ref12$image === void 0 ? null : _ref12$image;
|
|
374
330
|
var _ref13 = image || {},
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
331
|
+
_ref13$url = _ref13.url,
|
|
332
|
+
url = _ref13$url === void 0 ? null : _ref13$url;
|
|
378
333
|
return lat !== null && lng !== null ? "&markers=".concat(url !== null ? "icon:".concat(url) : '', "%7C").concat(lat, ",").concat(lng) : '';
|
|
379
334
|
}).join('');
|
|
380
335
|
}
|
|
381
336
|
}
|
|
382
|
-
|
|
383
337
|
var renderedMarker = hasSelectedMarker ? finalMarkers[selectedMarkerIndex] : lastRenderedMarker.current;
|
|
384
|
-
|
|
385
338
|
var _ref14 = renderedMarker || {},
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
339
|
+
_ref14$title = _ref14.title,
|
|
340
|
+
markerTitle = _ref14$title === void 0 ? null : _ref14$title,
|
|
341
|
+
_ref14$subtitle = _ref14.subtitle,
|
|
342
|
+
markerSubtitle = _ref14$subtitle === void 0 ? null : _ref14$subtitle,
|
|
343
|
+
_ref14$description = _ref14.description,
|
|
344
|
+
markerDescription = _ref14$description === void 0 ? null : _ref14$description,
|
|
345
|
+
_ref14$image = _ref14.image,
|
|
346
|
+
markerImage = _ref14$image === void 0 ? null : _ref14$image;
|
|
395
347
|
var hasMarkerTitle = markerTitle !== null;
|
|
396
348
|
var hasMarkerSubtitle = markerSubtitle !== null;
|
|
397
349
|
var hasMarkerDescription = markerDescription !== null;
|
|
@@ -553,13 +505,11 @@ function MapScreen(_ref) {
|
|
|
553
505
|
className: styles.background
|
|
554
506
|
}) : null);
|
|
555
507
|
}
|
|
556
|
-
|
|
557
508
|
MapScreen.propTypes = propTypes;
|
|
558
509
|
MapScreen.defaultProps = defaultProps;
|
|
559
510
|
|
|
560
511
|
var MapImagesScreen = function MapImagesScreen(_ref) {
|
|
561
|
-
var props = _extends({}, _ref);
|
|
562
|
-
|
|
512
|
+
var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
563
513
|
return /*#__PURE__*/React.createElement(MapScreen, Object.assign({}, props, {
|
|
564
514
|
withMarkerImages: true
|
|
565
515
|
}));
|
|
@@ -569,31 +519,26 @@ var transform = function transform(newStory, _ref) {
|
|
|
569
519
|
var markers = _ref.markers;
|
|
570
520
|
var marker = markers.find(function (_ref2) {
|
|
571
521
|
var _ref2$geoPosition = _ref2.geoPosition,
|
|
572
|
-
|
|
522
|
+
geoPosition = _ref2$geoPosition === void 0 ? null : _ref2$geoPosition;
|
|
573
523
|
return geoPosition !== null && geoPosition.latitude !== null && geoPosition.longitude !== null;
|
|
574
524
|
});
|
|
575
|
-
|
|
576
525
|
var _ref3 = marker || {},
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
526
|
+
_ref3$geoPosition = _ref3.geoPosition,
|
|
527
|
+
geoPosition = _ref3$geoPosition === void 0 ? {} : _ref3$geoPosition;
|
|
580
528
|
var _ref4 = geoPosition || {},
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
529
|
+
_ref4$lat = _ref4.lat,
|
|
530
|
+
lat = _ref4$lat === void 0 ? null : _ref4$lat,
|
|
531
|
+
_ref4$lng = _ref4.lng,
|
|
532
|
+
lng = _ref4$lng === void 0 ? null : _ref4$lng;
|
|
586
533
|
var _Map = Map$1(newStory, {
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
534
|
+
latitude: lat,
|
|
535
|
+
longitude: lng
|
|
536
|
+
}),
|
|
537
|
+
titleStory = _Map.story,
|
|
538
|
+
titleComponent = _Map.component;
|
|
593
539
|
var _Container = Container$1(titleStory, _toConsumableArray(titleComponent ? [titleComponent] : [])),
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
540
|
+
containerStory = _Container.story,
|
|
541
|
+
containerComponent = _Container.component;
|
|
597
542
|
return _objectSpread(_objectSpread({}, containerStory), {}, {
|
|
598
543
|
components: [].concat(_toConsumableArray(newStory.components || []), _toConsumableArray(containerComponent ? [containerComponent] : []))
|
|
599
544
|
});
|
package/lib/index.js
CHANGED
|
@@ -22,6 +22,7 @@ var ImageElement = require('@micromag/element-image');
|
|
|
22
22
|
var Map = require('@micromag/element-map');
|
|
23
23
|
var Scroll = require('@micromag/element-scroll');
|
|
24
24
|
var Text = require('@micromag/element-text');
|
|
25
|
+
var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
|
|
25
26
|
var _extends = require('@babel/runtime/helpers/extends');
|
|
26
27
|
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
|
|
27
28
|
var appleNews = require('@micromag/transforms/apple-news');
|
|
@@ -41,10 +42,11 @@ var ImageElement__default = /*#__PURE__*/_interopDefaultLegacy(ImageElement);
|
|
|
41
42
|
var Map__default = /*#__PURE__*/_interopDefaultLegacy(Map);
|
|
42
43
|
var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
|
|
43
44
|
var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
|
|
45
|
+
var _objectDestructuringEmpty__default = /*#__PURE__*/_interopDefaultLegacy(_objectDestructuringEmpty);
|
|
44
46
|
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
45
47
|
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
|
|
46
48
|
|
|
47
|
-
var styles = {"container":"micromag-screen-map-container","
|
|
49
|
+
var styles = {"container":"micromag-screen-map-container","splash":"micromag-screen-map-splash","markerOverlayScrollable":"micromag-screen-map-markerOverlayScrollable","markerOverlayContainer":"micromag-screen-map-markerOverlayContainer","background":"micromag-screen-map-background","disabled":"micromag-screen-map-disabled","hidden":"micromag-screen-map-hidden","placeholder":"micromag-screen-map-placeholder","content":"micromag-screen-map-content","markerOverlaySafe":"micromag-screen-map-markerOverlaySafe","markerOverlay":"micromag-screen-map-markerOverlay","markerOverlayContent":"micromag-screen-map-markerOverlayContent","markerOverlayContentInner":"micromag-screen-map-markerOverlayContentInner","swipeIndicator":"micromag-screen-map-swipeIndicator","title":"micromag-screen-map-title","description":"micromag-screen-map-description","button":"micromag-screen-map-button","emptyTitle":"micromag-screen-map-emptyTitle","emptyDescription":"micromag-screen-map-emptyDescription","emptyButton":"micromag-screen-map-emptyButton","splashButton":"micromag-screen-map-splashButton","closeButton":"micromag-screen-map-closeButton","markerImage":"micromag-screen-map-markerImage","markerTitle":"micromag-screen-map-markerTitle","markerSubtitle":"micromag-screen-map-markerSubtitle","markerDescription":"micromag-screen-map-markerDescription","hasSelectedMarker":"micromag-screen-map-hasSelectedMarker","opened":"micromag-screen-map-opened"};
|
|
48
50
|
|
|
49
51
|
var defaultCenter = {
|
|
50
52
|
lat: 45.5,
|
|
@@ -111,91 +113,72 @@ var defaultProps = {
|
|
|
111
113
|
type: null,
|
|
112
114
|
className: null
|
|
113
115
|
};
|
|
114
|
-
|
|
115
116
|
function MapScreen(_ref) {
|
|
116
117
|
var _ref15;
|
|
117
|
-
|
|
118
118
|
var layout = _ref.layout,
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
119
|
+
draggable = _ref.draggable,
|
|
120
|
+
markers = _ref.markers,
|
|
121
|
+
title = _ref.title,
|
|
122
|
+
description = _ref.description,
|
|
123
|
+
button = _ref.button,
|
|
124
|
+
openedMarkerSpacerHeight = _ref.openedMarkerSpacerHeight,
|
|
125
|
+
withMarkerImages = _ref.withMarkerImages,
|
|
126
|
+
zoom = _ref.zoom,
|
|
127
|
+
center = _ref.center,
|
|
128
|
+
fitBounds = _ref.fitBounds,
|
|
129
|
+
background = _ref.background,
|
|
130
|
+
current = _ref.current,
|
|
131
|
+
active = _ref.active,
|
|
132
|
+
transitions = _ref.transitions,
|
|
133
|
+
type = _ref.type,
|
|
134
|
+
className = _ref.className;
|
|
136
135
|
var _useIntl = reactIntl.useIntl(),
|
|
137
|
-
|
|
138
|
-
|
|
136
|
+
locale = _useIntl.locale;
|
|
139
137
|
var _useGoogleKeys = contexts.useGoogleKeys(),
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
138
|
+
_useGoogleKeys$apiKey = _useGoogleKeys.apiKey,
|
|
139
|
+
apiKey = _useGoogleKeys$apiKey === void 0 ? null : _useGoogleKeys$apiKey;
|
|
143
140
|
var trackScreenEvent = hooks.useTrackScreenEvent(type);
|
|
144
|
-
|
|
145
141
|
var _useState = React.useState(null),
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
142
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
143
|
+
selectedMarkerIndex = _useState2[0],
|
|
144
|
+
setSelectedMarkerIndex = _useState2[1];
|
|
150
145
|
var hasSelectedMarker = selectedMarkerIndex !== null;
|
|
151
146
|
var lastRenderedMarker = React.useRef(null);
|
|
152
|
-
|
|
153
147
|
var _useScreenSize = contexts.useScreenSize(),
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
148
|
+
width = _useScreenSize.width,
|
|
149
|
+
height = _useScreenSize.height,
|
|
150
|
+
resolution = _useScreenSize.resolution;
|
|
158
151
|
var _usePlaybackContext = contexts.usePlaybackContext(),
|
|
159
|
-
|
|
160
|
-
|
|
152
|
+
muted = _usePlaybackContext.muted;
|
|
161
153
|
var mediaRef = contexts.usePlaybackMediaRef(current);
|
|
162
|
-
|
|
163
154
|
var _ref2 = background || {},
|
|
164
|
-
|
|
165
|
-
|
|
155
|
+
backgroundColor = _ref2.color;
|
|
166
156
|
var markerOverlayContentStyle = utils.getStyleFromColor(backgroundColor);
|
|
167
|
-
|
|
168
157
|
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
158
|
+
isView = _useScreenRenderConte.isView,
|
|
159
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
160
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
161
|
+
isEdit = _useScreenRenderConte.isEdit,
|
|
162
|
+
isStatic = _useScreenRenderConte.isStatic,
|
|
163
|
+
isCapture = _useScreenRenderConte.isCapture;
|
|
176
164
|
var screenState = contexts.useScreenState();
|
|
177
|
-
|
|
178
165
|
var _useState3 = React.useState(false),
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
166
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
167
|
+
ready = _useState4[0],
|
|
168
|
+
setReady = _useState4[1];
|
|
183
169
|
var transitionPlaying = current && ready;
|
|
184
170
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
185
171
|
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
186
|
-
var backgroundPlaying = current && (isView || isEdit);
|
|
187
|
-
|
|
172
|
+
var backgroundPlaying = current && (isView || isEdit);
|
|
173
|
+
// const backgroundShouldLoad = current || active;
|
|
188
174
|
var backgroundShouldLoad = current || active;
|
|
189
|
-
|
|
190
175
|
var _useState5 = React.useState(isStatic || isCapture),
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
176
|
+
_useState6 = _slicedToArray__default["default"](_useState5, 2),
|
|
177
|
+
opened = _useState6[0],
|
|
178
|
+
setOpened = _useState6[1];
|
|
195
179
|
var _useViewerInteraction = contexts.useViewerInteraction(),
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
180
|
+
enableInteraction = _useViewerInteraction.enableInteraction,
|
|
181
|
+
disableInteraction = _useViewerInteraction.disableInteraction;
|
|
199
182
|
var onMapReady = React.useCallback(function () {
|
|
200
183
|
return setReady(true);
|
|
201
184
|
}, [setReady]);
|
|
@@ -229,20 +212,16 @@ function MapScreen(_ref) {
|
|
|
229
212
|
}, [finalMarkers, setSelectedMarkerIndex, trackScreenEvent]);
|
|
230
213
|
var onButtonClick = React.useCallback(function () {
|
|
231
214
|
setOpened(true);
|
|
232
|
-
|
|
233
215
|
if (disableInteraction !== null) {
|
|
234
216
|
disableInteraction();
|
|
235
217
|
}
|
|
236
|
-
|
|
237
218
|
trackScreenEvent('click_button', button.body);
|
|
238
219
|
}, [setOpened, disableInteraction, trackScreenEvent, button]);
|
|
239
220
|
var onCloseClick = React.useCallback(function () {
|
|
240
221
|
setOpened(false);
|
|
241
|
-
|
|
242
222
|
if (enableInteraction !== null) {
|
|
243
223
|
enableInteraction();
|
|
244
224
|
}
|
|
245
|
-
|
|
246
225
|
trackScreenEvent('click_close', 'Close icon');
|
|
247
226
|
closeMarker();
|
|
248
227
|
}, [setOpened, enableInteraction, trackScreenEvent]);
|
|
@@ -254,7 +233,6 @@ function MapScreen(_ref) {
|
|
|
254
233
|
}, [trackScreenEvent]);
|
|
255
234
|
var onScrolledBottom = React.useCallback(function (_ref3) {
|
|
256
235
|
var initial = _ref3.initial;
|
|
257
|
-
|
|
258
236
|
if (initial) {
|
|
259
237
|
var selectedMarker = (markers || [])[selectedMarkerIndex];
|
|
260
238
|
trackScreenEvent('scroll', "Marker ".concat(selectedMarkerIndex + 1, ": ").concat(selectedMarker.title.body), {
|
|
@@ -263,19 +241,16 @@ function MapScreen(_ref) {
|
|
|
263
241
|
});
|
|
264
242
|
}
|
|
265
243
|
}, [trackScreenEvent, markers, selectedMarkerIndex]);
|
|
266
|
-
|
|
267
244
|
var _useDimensionObserver = hooks.useDimensionObserver({
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
245
|
+
disabled: !isView
|
|
246
|
+
}),
|
|
247
|
+
markerOverContentInnerRef = _useDimensionObserver.ref,
|
|
248
|
+
_useDimensionObserver2 = _useDimensionObserver.width,
|
|
249
|
+
markerOverContentInnerWidth = _useDimensionObserver2 === void 0 ? '100%' : _useDimensionObserver2;
|
|
274
250
|
var _useState7 = React.useState(0),
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
251
|
+
_useState8 = _slicedToArray__default["default"](_useState7, 2),
|
|
252
|
+
markerImagesLoaded = _useState8[0],
|
|
253
|
+
setMarkerImagesLoaded = _useState8[1];
|
|
279
254
|
var allMarkersImagesLoaded = markerImagesLoaded === (markers || []).length;
|
|
280
255
|
var finalReady = ready && (!withMarkerImages || allMarkersImagesLoaded);
|
|
281
256
|
React.useEffect(function () {
|
|
@@ -283,28 +258,22 @@ function MapScreen(_ref) {
|
|
|
283
258
|
setMarkerImagesLoaded(0);
|
|
284
259
|
var imgs = markers.map(function (marker) {
|
|
285
260
|
var _ref4 = marker || {},
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
261
|
+
_ref4$image = _ref4.image,
|
|
262
|
+
image = _ref4$image === void 0 ? null : _ref4$image;
|
|
289
263
|
var _ref5 = image || {},
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
264
|
+
_ref5$url = _ref5.url,
|
|
265
|
+
url = _ref5$url === void 0 ? null : _ref5$url;
|
|
293
266
|
var withUrl = url !== null;
|
|
294
|
-
|
|
295
267
|
if (withUrl) {
|
|
296
268
|
var img = new Image();
|
|
297
269
|
img.src = url;
|
|
298
|
-
|
|
299
270
|
img.onload = function () {
|
|
300
271
|
setMarkerImagesLoaded(function (index) {
|
|
301
272
|
return setMarkerImagesLoaded(index + 1);
|
|
302
273
|
});
|
|
303
274
|
};
|
|
304
|
-
|
|
305
275
|
return img;
|
|
306
276
|
}
|
|
307
|
-
|
|
308
277
|
return null;
|
|
309
278
|
});
|
|
310
279
|
return function () {
|
|
@@ -312,26 +281,24 @@ function MapScreen(_ref) {
|
|
|
312
281
|
return img !== null;
|
|
313
282
|
}).forEach(function (img) {
|
|
314
283
|
img.onload = function () {}; // eslint-disable-line no-param-reassign
|
|
315
|
-
|
|
316
284
|
});
|
|
317
285
|
};
|
|
318
286
|
}
|
|
319
287
|
|
|
320
288
|
return function () {};
|
|
321
|
-
}, [withMarkerImages, markers]);
|
|
289
|
+
}, [withMarkerImages, markers]);
|
|
322
290
|
|
|
291
|
+
// Switch state
|
|
323
292
|
React.useEffect(function () {
|
|
324
293
|
if (!isEdit && !isPreview) {
|
|
325
294
|
return;
|
|
326
295
|
}
|
|
327
|
-
|
|
328
296
|
var _ref6 = screenState !== null ? screenState.split('.') : [],
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
297
|
+
_ref7 = _slicedToArray__default["default"](_ref6, 2),
|
|
298
|
+
_ref7$ = _ref7[0],
|
|
299
|
+
stateId = _ref7$ === void 0 ? null : _ref7$,
|
|
300
|
+
_ref7$2 = _ref7[1],
|
|
301
|
+
markerIndex = _ref7$2 === void 0 ? null : _ref7$2;
|
|
335
302
|
if (stateId === 'intro') {
|
|
336
303
|
setOpened(false);
|
|
337
304
|
setSelectedMarkerIndex(null);
|
|
@@ -344,76 +311,62 @@ function MapScreen(_ref) {
|
|
|
344
311
|
}
|
|
345
312
|
}, [screenState, isEdit, setOpened]);
|
|
346
313
|
var staticUrl;
|
|
347
|
-
|
|
348
314
|
if (width > 0 && height > 0 && apiKey !== null) {
|
|
349
315
|
var correctMarkers = markers !== null ? markers.filter(function (it) {
|
|
350
316
|
return it !== null;
|
|
351
317
|
}).filter(function (_ref8) {
|
|
352
318
|
var _ref8$geoPosition = _ref8.geoPosition,
|
|
353
|
-
|
|
319
|
+
geoPosition = _ref8$geoPosition === void 0 ? null : _ref8$geoPosition;
|
|
354
320
|
return geoPosition !== null;
|
|
355
321
|
}) : null;
|
|
356
322
|
staticUrl = "https://maps.googleapis.com/maps/api/staticmap?size=".concat(Math.round(width), "x").concat(Math.round(height));
|
|
357
|
-
|
|
358
323
|
if (center !== null && (correctMarkers === null || correctMarkers.length === 0)) {
|
|
359
324
|
var _ref9 = center || {},
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
325
|
+
_ref9$lat = _ref9.lat,
|
|
326
|
+
lat = _ref9$lat === void 0 ? null : _ref9$lat,
|
|
327
|
+
_ref9$lng = _ref9.lng,
|
|
328
|
+
lng = _ref9$lng === void 0 ? null : _ref9$lng;
|
|
365
329
|
staticUrl += "¢er=".concat(lat, ",").concat(lng);
|
|
366
330
|
}
|
|
367
|
-
|
|
368
331
|
if (zoom !== null) {
|
|
369
332
|
staticUrl += "&zoom=".concat(zoom);
|
|
370
333
|
}
|
|
371
|
-
|
|
372
334
|
if (apiKey !== null) {
|
|
373
335
|
staticUrl += "&key=".concat(apiKey);
|
|
374
336
|
}
|
|
375
|
-
|
|
376
337
|
if (locale !== null) {
|
|
377
338
|
staticUrl += "&language=".concat(locale);
|
|
378
339
|
}
|
|
379
|
-
|
|
380
340
|
if (correctMarkers !== null) {
|
|
381
341
|
staticUrl += correctMarkers.map(function (marker) {
|
|
382
342
|
var _ref10 = marker || {},
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
343
|
+
_ref10$geoPosition = _ref10.geoPosition,
|
|
344
|
+
geoPosition = _ref10$geoPosition === void 0 ? null : _ref10$geoPosition;
|
|
386
345
|
var _ref11 = geoPosition || {},
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
346
|
+
_ref11$lat = _ref11.lat,
|
|
347
|
+
lat = _ref11$lat === void 0 ? null : _ref11$lat,
|
|
348
|
+
_ref11$lng = _ref11.lng,
|
|
349
|
+
lng = _ref11$lng === void 0 ? null : _ref11$lng;
|
|
392
350
|
var _ref12 = marker || {},
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
351
|
+
_ref12$image = _ref12.image,
|
|
352
|
+
image = _ref12$image === void 0 ? null : _ref12$image;
|
|
396
353
|
var _ref13 = image || {},
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
354
|
+
_ref13$url = _ref13.url,
|
|
355
|
+
url = _ref13$url === void 0 ? null : _ref13$url;
|
|
400
356
|
return lat !== null && lng !== null ? "&markers=".concat(url !== null ? "icon:".concat(url) : '', "%7C").concat(lat, ",").concat(lng) : '';
|
|
401
357
|
}).join('');
|
|
402
358
|
}
|
|
403
359
|
}
|
|
404
|
-
|
|
405
360
|
var renderedMarker = hasSelectedMarker ? finalMarkers[selectedMarkerIndex] : lastRenderedMarker.current;
|
|
406
|
-
|
|
407
361
|
var _ref14 = renderedMarker || {},
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
362
|
+
_ref14$title = _ref14.title,
|
|
363
|
+
markerTitle = _ref14$title === void 0 ? null : _ref14$title,
|
|
364
|
+
_ref14$subtitle = _ref14.subtitle,
|
|
365
|
+
markerSubtitle = _ref14$subtitle === void 0 ? null : _ref14$subtitle,
|
|
366
|
+
_ref14$description = _ref14.description,
|
|
367
|
+
markerDescription = _ref14$description === void 0 ? null : _ref14$description,
|
|
368
|
+
_ref14$image = _ref14.image,
|
|
369
|
+
markerImage = _ref14$image === void 0 ? null : _ref14$image;
|
|
417
370
|
var hasMarkerTitle = markerTitle !== null;
|
|
418
371
|
var hasMarkerSubtitle = markerSubtitle !== null;
|
|
419
372
|
var hasMarkerDescription = markerDescription !== null;
|
|
@@ -575,13 +528,11 @@ function MapScreen(_ref) {
|
|
|
575
528
|
className: styles.background
|
|
576
529
|
}) : null);
|
|
577
530
|
}
|
|
578
|
-
|
|
579
531
|
MapScreen.propTypes = propTypes;
|
|
580
532
|
MapScreen.defaultProps = defaultProps;
|
|
581
533
|
|
|
582
534
|
var MapImagesScreen = function MapImagesScreen(_ref) {
|
|
583
|
-
var props = _extends__default["default"]({}, _ref);
|
|
584
|
-
|
|
535
|
+
var props = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref), _ref));
|
|
585
536
|
return /*#__PURE__*/React__default["default"].createElement(MapScreen, Object.assign({}, props, {
|
|
586
537
|
withMarkerImages: true
|
|
587
538
|
}));
|
|
@@ -591,31 +542,26 @@ var transform = function transform(newStory, _ref) {
|
|
|
591
542
|
var markers = _ref.markers;
|
|
592
543
|
var marker = markers.find(function (_ref2) {
|
|
593
544
|
var _ref2$geoPosition = _ref2.geoPosition,
|
|
594
|
-
|
|
545
|
+
geoPosition = _ref2$geoPosition === void 0 ? null : _ref2$geoPosition;
|
|
595
546
|
return geoPosition !== null && geoPosition.latitude !== null && geoPosition.longitude !== null;
|
|
596
547
|
});
|
|
597
|
-
|
|
598
548
|
var _ref3 = marker || {},
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
549
|
+
_ref3$geoPosition = _ref3.geoPosition,
|
|
550
|
+
geoPosition = _ref3$geoPosition === void 0 ? {} : _ref3$geoPosition;
|
|
602
551
|
var _ref4 = geoPosition || {},
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
552
|
+
_ref4$lat = _ref4.lat,
|
|
553
|
+
lat = _ref4$lat === void 0 ? null : _ref4$lat,
|
|
554
|
+
_ref4$lng = _ref4.lng,
|
|
555
|
+
lng = _ref4$lng === void 0 ? null : _ref4$lng;
|
|
608
556
|
var _Map = appleNews.Map(newStory, {
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
557
|
+
latitude: lat,
|
|
558
|
+
longitude: lng
|
|
559
|
+
}),
|
|
560
|
+
titleStory = _Map.story,
|
|
561
|
+
titleComponent = _Map.component;
|
|
615
562
|
var _Container = appleNews.Container(titleStory, _toConsumableArray__default["default"](titleComponent ? [titleComponent] : [])),
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
563
|
+
containerStory = _Container.story,
|
|
564
|
+
containerComponent = _Container.component;
|
|
619
565
|
return _objectSpread__default["default"](_objectSpread__default["default"]({}, containerStory), {}, {
|
|
620
566
|
components: [].concat(_toConsumableArray__default["default"](newStory.components || []), _toConsumableArray__default["default"](containerComponent ? [containerComponent] : []))
|
|
621
567
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-map",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.318",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -49,25 +49,25 @@
|
|
|
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.318",
|
|
53
|
+
"@micromag/element-background": "^0.3.318",
|
|
54
|
+
"@micromag/element-button": "^0.3.318",
|
|
55
|
+
"@micromag/element-call-to-action": "^0.3.318",
|
|
56
|
+
"@micromag/element-container": "^0.3.318",
|
|
57
|
+
"@micromag/element-heading": "^0.3.318",
|
|
58
|
+
"@micromag/element-image": "^0.3.318",
|
|
59
|
+
"@micromag/element-map": "^0.3.318",
|
|
60
|
+
"@micromag/element-scroll": "^0.3.318",
|
|
61
|
+
"@micromag/element-text": "^0.3.318",
|
|
62
|
+
"@micromag/transforms": "^0.3.318",
|
|
63
63
|
"classnames": "^2.2.6",
|
|
64
64
|
"lodash": "^4.17.21",
|
|
65
65
|
"prop-types": "^15.7.2",
|
|
66
66
|
"react-intl": "^5.12.1",
|
|
67
|
-
"uuid": "^
|
|
67
|
+
"uuid": "^9.0.0"
|
|
68
68
|
},
|
|
69
69
|
"publishConfig": {
|
|
70
70
|
"access": "public"
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "7d1a296e0c0d410e1225279e1f19e3a7715bfa96"
|
|
73
73
|
}
|