@sanity/google-maps-input 3.0.0-v3-studio.6 → 3.0.0-v3-studio.7

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/lib/esm/index.js DELETED
@@ -1,889 +0,0 @@
1
- import {jsx as $7XdDa$jsx, jsxs as $7XdDa$jsxs, Fragment as $7XdDa$Fragment} from "react/jsx-runtime";
2
- import $7XdDa$react, {createRef as $7XdDa$createRef, PureComponent as $7XdDa$PureComponent, useRef as $7XdDa$useRef} from "react";
3
- import {createPlugin as $7XdDa$createPlugin, setIfMissing as $7XdDa$setIfMissing, set as $7XdDa$set, unset as $7XdDa$unset, ChangeIndicator as $7XdDa$ChangeIndicator, useUserColor as $7XdDa$useUserColor, getAnnotationAtPath as $7XdDa$getAnnotationAtPath, DiffTooltip as $7XdDa$DiffTooltip} from "sanity";
4
- import {uniqueId as $7XdDa$uniqueId} from "lodash";
5
- import {Box as $7XdDa$Box, Grid as $7XdDa$Grid, Button as $7XdDa$Button, Dialog as $7XdDa$Dialog, Card as $7XdDa$Card, Text as $7XdDa$Text, Code as $7XdDa$Code, TextInput as $7XdDa$TextInput} from "@sanity/ui";
6
- import {EditIcon as $7XdDa$EditIcon, TrashIcon as $7XdDa$TrashIcon} from "@sanity/icons";
7
- import {BehaviorSubject as $7XdDa$BehaviorSubject} from "rxjs";
8
- import $7XdDa$styledcomponents from "styled-components";
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
- const $f3e4d9113981c5e8$var$callbackName = "___sanity_googleMapsApiCallback";
23
- const $f3e4d9113981c5e8$var$authFailureCallbackName = "gm_authFailure";
24
- const $f3e4d9113981c5e8$var$locale = typeof window !== "undefined" && window.navigator.language || "en";
25
- let $f3e4d9113981c5e8$var$subject;
26
- function $f3e4d9113981c5e8$export$616f2ff2d07a5991(config) {
27
- const selectedLocale = config.defaultLocale || $f3e4d9113981c5e8$var$locale || "en-US";
28
- if ($f3e4d9113981c5e8$var$subject) return $f3e4d9113981c5e8$var$subject;
29
- $f3e4d9113981c5e8$var$subject = new (0, $7XdDa$BehaviorSubject)({
30
- loadState: "loading"
31
- });
32
- window[$f3e4d9113981c5e8$var$authFailureCallbackName] = ()=>{
33
- delete window[$f3e4d9113981c5e8$var$authFailureCallbackName];
34
- $f3e4d9113981c5e8$var$subject.next({
35
- loadState: "authError"
36
- });
37
- };
38
- window[$f3e4d9113981c5e8$var$callbackName] = ()=>{
39
- delete window[$f3e4d9113981c5e8$var$callbackName];
40
- $f3e4d9113981c5e8$var$subject.next({
41
- loadState: "loaded",
42
- api: window.google.maps
43
- });
44
- };
45
- const script = document.createElement("script");
46
- script.onerror = (event, source, lineno, colno, error)=>$f3e4d9113981c5e8$var$subject.next({
47
- loadState: "loadError",
48
- error: $f3e4d9113981c5e8$var$coeerceError(event, error)
49
- });
50
- script.src = `https://maps.googleapis.com/maps/api/js?key=${config.apiKey}&libraries=places&callback=${$f3e4d9113981c5e8$var$callbackName}&language=${selectedLocale}`;
51
- document.getElementsByTagName("head")[0].appendChild(script);
52
- return $f3e4d9113981c5e8$var$subject;
53
- }
54
- function $f3e4d9113981c5e8$var$coeerceError(event, error) {
55
- if (error) return error;
56
- if (typeof event === "string") return new Error(event);
57
- return new Error($f3e4d9113981c5e8$var$isErrorEvent(event) ? event.message : "Failed to load Google Maps API");
58
- }
59
- function $f3e4d9113981c5e8$var$isErrorEvent(event) {
60
- if (typeof event !== "object" || event === null) return false;
61
- if (!("message" in event)) return false;
62
- return typeof event.message === "string";
63
- }
64
-
65
-
66
-
67
-
68
-
69
- function $720eceaeeca17272$export$58a097931cd8d64d(props) {
70
- return /*#__PURE__*/ (0, $7XdDa$jsxs)((0, $7XdDa$Card), {
71
- tone: "critical",
72
- radius: 1,
73
- children: [
74
- /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Box), {
75
- as: "header",
76
- paddingX: 4,
77
- paddingTop: 4,
78
- paddingBottom: 1,
79
- children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Text), {
80
- as: "h2",
81
- weight: "bold",
82
- children: "Google Maps failed to load"
83
- })
84
- }),
85
- /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Box), {
86
- paddingX: 4,
87
- paddingTop: 4,
88
- paddingBottom: 1,
89
- children: props.isAuthError ? /*#__PURE__*/ (0, $7XdDa$jsx)($720eceaeeca17272$var$AuthError, {}) : /*#__PURE__*/ (0, $7XdDa$jsxs)((0, $7XdDa$Fragment), {
90
- children: [
91
- /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Text), {
92
- as: "h3",
93
- children: "Error details:"
94
- }),
95
- /*#__PURE__*/ (0, $7XdDa$jsx)("pre", {
96
- children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Code), {
97
- size: 1,
98
- children: "error" in props && props.error?.message
99
- })
100
- })
101
- ]
102
- })
103
- })
104
- ]
105
- });
106
- }
107
- function $720eceaeeca17272$var$AuthError() {
108
- return /*#__PURE__*/ (0, $7XdDa$jsxs)((0, $7XdDa$Text), {
109
- children: [
110
- /*#__PURE__*/ (0, $7XdDa$jsx)("p", {
111
- children: "The error appears to be related to authentication"
112
- }),
113
- /*#__PURE__*/ (0, $7XdDa$jsx)("p", {
114
- children: "Common causes include:"
115
- }),
116
- /*#__PURE__*/ (0, $7XdDa$jsxs)("ul", {
117
- children: [
118
- /*#__PURE__*/ (0, $7XdDa$jsx)("li", {
119
- children: "Incorrect API key"
120
- }),
121
- /*#__PURE__*/ (0, $7XdDa$jsx)("li", {
122
- children: "Referer not allowed"
123
- }),
124
- /*#__PURE__*/ (0, $7XdDa$jsx)("li", {
125
- children: "Missing authentication scope"
126
- })
127
- ]
128
- }),
129
- /*#__PURE__*/ (0, $7XdDa$jsx)("p", {
130
- children: "Check the browser developer tools for more information."
131
- })
132
- ]
133
- });
134
- }
135
-
136
-
137
- class $004c8002f57d3835$export$a628545bcf173896 extends (0, $7XdDa$react).Component {
138
- constructor(props){
139
- super(props);
140
- this.state = {
141
- loadState: "loading"
142
- };
143
- let sync = true;
144
- this.loadSubscription = (0, $f3e4d9113981c5e8$export$616f2ff2d07a5991)(props.config).subscribe((loadState)=>{
145
- if (sync) this.state = loadState;
146
- else this.setState(loadState);
147
- });
148
- sync = false;
149
- }
150
- componentWillUnmount() {
151
- if (this.loadSubscription) this.loadSubscription.unsubscribe();
152
- }
153
- render() {
154
- switch(this.state.loadState){
155
- case "loadError":
156
- return /*#__PURE__*/ (0, $7XdDa$jsx)((0, $720eceaeeca17272$export$58a097931cd8d64d), {
157
- error: this.state.error,
158
- isAuthError: false
159
- });
160
- case "authError":
161
- return /*#__PURE__*/ (0, $7XdDa$jsx)((0, $720eceaeeca17272$export$58a097931cd8d64d), {
162
- isAuthError: true
163
- });
164
- case "loading":
165
- return /*#__PURE__*/ (0, $7XdDa$jsx)("div", {
166
- children: "Loading Google Maps API"
167
- });
168
- case "loaded":
169
- return this.props.children(this.state.api) || null;
170
- default:
171
- return null;
172
- }
173
- }
174
- }
175
-
176
-
177
-
178
-
179
-
180
-
181
-
182
-
183
- const $efbce5eedf9afa01$export$be3daefb18c346ac = (0, $7XdDa$styledcomponents).div`
184
- position: absolute;
185
- right: 10px;
186
- top: 10px;
187
- width: 220px;
188
- `;
189
-
190
-
191
- class $73e82a3e42e8fc6c$export$55d7609a8f1eccd2 extends $7XdDa$PureComponent {
192
- searchInputRef = /*#__PURE__*/ $7XdDa$createRef();
193
- handleChange = ()=>{
194
- if (!this.autoComplete) return;
195
- this.props.onChange(this.autoComplete.getPlace());
196
- if (this.searchInputRef.current) this.searchInputRef.current.value = "";
197
- };
198
- componentDidMount() {
199
- const input = this.searchInputRef.current;
200
- if (!input) return;
201
- const { api: api , map: map } = this.props;
202
- const { Circle: Circle , places: places , event: event } = api;
203
- const searchBounds = new Circle({
204
- center: map.getCenter(),
205
- radius: 100
206
- }).getBounds();
207
- this.autoComplete = new places.Autocomplete(input, {
208
- bounds: searchBounds,
209
- types: []
210
- });
211
- event.addListener(this.autoComplete, "place_changed", this.handleChange);
212
- }
213
- render() {
214
- return /*#__PURE__*/ (0, $7XdDa$jsx)((0, $efbce5eedf9afa01$export$be3daefb18c346ac), {
215
- children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$TextInput), {
216
- name: "place",
217
- ref: this.searchInputRef,
218
- placeholder: "Search for place or address",
219
- padding: 4
220
- })
221
- });
222
- }
223
- }
224
-
225
-
226
-
227
-
228
- function $0bf72f17fd0ef0c4$export$ad553d4d3a617f20(latLng1, latLng2) {
229
- const lat1 = typeof latLng1.lat === "function" ? latLng1.lat() : latLng1.lat;
230
- const lng1 = typeof latLng1.lng === "function" ? latLng1.lng() : latLng1.lng;
231
- const lat2 = typeof latLng2.lat === "function" ? latLng2.lat() : latLng2.lat;
232
- const lng2 = typeof latLng2.lng === "function" ? latLng2.lng() : latLng2.lng;
233
- return lat1 === lat2 && lng1 === lng2;
234
- }
235
-
236
-
237
-
238
- const $ad6b04c75b364834$export$23f3dfd47374502b = (0, $7XdDa$styledcomponents).div`
239
- position: absolute;
240
- top: 0;
241
- left: 0;
242
- height: 100%;
243
- width: 100%;
244
- box-sizing: border-box;
245
- `;
246
-
247
-
248
- class $238e2fa3d9e85b5f$export$4ad1bae46276c5ce extends (0, $7XdDa$react).PureComponent {
249
- static defaultProps = {
250
- defaultZoom: 8,
251
- scrollWheel: true
252
- };
253
- state = {
254
- map: undefined
255
- };
256
- mapRef = /*#__PURE__*/ (0, $7XdDa$react).createRef();
257
- mapEl = null;
258
- componentDidMount() {
259
- this.attachClickHandler();
260
- }
261
- attachClickHandler = ()=>{
262
- const map = this.state.map;
263
- if (!map) return;
264
- const { api: api , onClick: onClick } = this.props;
265
- const { event: event } = api;
266
- if (this.clickHandler) this.clickHandler.remove();
267
- if (onClick) this.clickHandler = event.addListener(map, "click", onClick);
268
- };
269
- componentDidUpdate(prevProps) {
270
- const map = this.state.map;
271
- if (!map) return;
272
- const { onClick: onClick , location: location , bounds: bounds } = this.props;
273
- if (prevProps.onClick !== onClick) this.attachClickHandler();
274
- if (!(0, $0bf72f17fd0ef0c4$export$ad553d4d3a617f20)(prevProps.location, location)) map.panTo(this.getCenter());
275
- if (bounds && (!prevProps.bounds || !bounds.equals(prevProps.bounds))) map.fitBounds(bounds);
276
- }
277
- componentWillUnmount() {
278
- if (this.clickHandler) this.clickHandler.remove();
279
- }
280
- getCenter() {
281
- const { location: location , api: api } = this.props;
282
- return new api.LatLng(location.lat, location.lng);
283
- }
284
- constructMap(el) {
285
- const { defaultZoom: defaultZoom , api: api , mapTypeControl: mapTypeControl , controlSize: controlSize , bounds: bounds , scrollWheel: scrollWheel } = this.props;
286
- const map = new api.Map(el, {
287
- zoom: defaultZoom,
288
- center: this.getCenter(),
289
- scrollwheel: scrollWheel,
290
- streetViewControl: false,
291
- mapTypeControl: mapTypeControl,
292
- controlSize: controlSize
293
- });
294
- if (bounds) map.fitBounds(bounds);
295
- return map;
296
- }
297
- setMapElement = (element)=>{
298
- if (element && element !== this.mapEl) {
299
- const map = this.constructMap(element);
300
- this.setState({
301
- map: map
302
- }, this.attachClickHandler);
303
- }
304
- this.mapEl = element;
305
- };
306
- render() {
307
- const { children: children } = this.props;
308
- const { map: map } = this.state;
309
- return /*#__PURE__*/ (0, $7XdDa$jsxs)((0, $7XdDa$Fragment), {
310
- children: [
311
- /*#__PURE__*/ (0, $7XdDa$jsx)((0, $ad6b04c75b364834$export$23f3dfd47374502b), {
312
- ref: this.setMapElement
313
- }),
314
- children && map ? children(map) : null
315
- ]
316
- });
317
- }
318
- }
319
-
320
-
321
-
322
-
323
- const $b7b6f34a212b17da$var$markerPath = "M 3.052 3.7 C 1.56 5.293 0.626 7.612 0.663 9.793 C 0.738 14.352 2.793 16.077 6.078 22.351 C 7.263 25.111 8.497 28.032 9.672 32.871 C 9.835 33.584 9.994 34.246 10.069 34.305 C 10.143 34.362 10.301 33.697 10.465 32.983 C 11.639 28.145 12.875 25.226 14.059 22.466 C 17.344 16.192 19.398 14.466 19.474 9.908 C 19.511 7.727 18.574 5.405 17.083 3.814 C 15.379 1.994 12.809 0.649 10.069 0.593 C 7.328 0.536 4.756 1.882 3.052 3.7 Z";
324
- class $b7b6f34a212b17da$export$e98856a975cab58e extends $7XdDa$PureComponent {
325
- eventHandlers = {};
326
- componentDidMount() {
327
- const { position: position , api: api , map: map , onMove: onMove , zIndex: zIndex , opacity: opacity , label: label , markerRef: markerRef , color: color } = this.props;
328
- const { Marker: GMarker } = api;
329
- let icon;
330
- if (color) icon = {
331
- path: $b7b6f34a212b17da$var$markerPath,
332
- fillOpacity: 1,
333
- fillColor: color.background,
334
- strokeColor: color.border,
335
- strokeWeight: 2,
336
- anchor: new api.Point(10, 35),
337
- labelOrigin: new api.Point(10, 11)
338
- };
339
- this.marker = new GMarker({
340
- draggable: Boolean(onMove),
341
- position: position,
342
- map: map,
343
- zIndex: zIndex,
344
- opacity: opacity,
345
- label: label,
346
- icon: icon
347
- });
348
- if (markerRef) markerRef.current = this.marker;
349
- this.attachMoveHandler();
350
- this.attachClickHandler();
351
- }
352
- componentDidUpdate(prevProps) {
353
- if (!this.marker) return;
354
- const { position: position , onMove: onMove , label: label , zIndex: zIndex , opacity: opacity , map: map } = this.props;
355
- if (prevProps.onMove !== onMove) this.attachMoveHandler();
356
- if (!(0, $0bf72f17fd0ef0c4$export$ad553d4d3a617f20)(prevProps.position, position)) this.marker.setPosition(position);
357
- if (prevProps.label !== label) this.marker.setLabel(label || null);
358
- if (prevProps.zIndex !== zIndex) this.marker.setZIndex(zIndex || null);
359
- if (prevProps.opacity !== opacity) this.marker.setOpacity(opacity || null);
360
- if (prevProps.map !== map) this.marker.setMap(map);
361
- }
362
- componentWillUnmount() {
363
- if (this.eventHandlers.move) this.eventHandlers.move.remove();
364
- if (this.marker) this.marker.setMap(null);
365
- }
366
- attachMoveHandler() {
367
- const { api: api , onMove: onMove } = this.props;
368
- if (this.eventHandlers.move) this.eventHandlers.move.remove();
369
- if (this.marker && onMove) this.eventHandlers.move = api.event.addListener(this.marker, "dragend", onMove);
370
- }
371
- attachClickHandler() {
372
- const { api: api , onClick: onClick } = this.props;
373
- if (this.eventHandlers.click) this.eventHandlers.click.remove();
374
- if (this.marker && onClick) this.eventHandlers.click = api.event.addListener(this.marker, "click", onClick);
375
- }
376
- // eslint-disable-next-line class-methods-use-this
377
- render() {
378
- return null;
379
- }
380
- }
381
-
382
-
383
- const $154571ab11e62bfc$var$fallbackLatLng = {
384
- lat: 40.7058254,
385
- lng: -74.1180863
386
- };
387
- class $154571ab11e62bfc$export$9a2476e65b6b92a7 extends (0, $7XdDa$react).PureComponent {
388
- static defaultProps = {
389
- defaultZoom: 8,
390
- defaultLocation: {
391
- lng: 10.74609,
392
- lat: 59.91273
393
- }
394
- };
395
- mapRef = /*#__PURE__*/ (0, $7XdDa$react).createRef();
396
- getCenter() {
397
- const { value: value = {} , defaultLocation: defaultLocation = {} } = this.props;
398
- const point = {
399
- ...$154571ab11e62bfc$var$fallbackLatLng,
400
- ...defaultLocation,
401
- ...value
402
- };
403
- return point;
404
- }
405
- handlePlaceChanged = (place)=>{
406
- if (!place.geometry?.location) return;
407
- this.setValue(place.geometry.location);
408
- };
409
- handleMarkerDragEnd = (event)=>{
410
- if (event.latLng) this.setValue(event.latLng);
411
- };
412
- handleMapClick = (event)=>{
413
- if (event.latLng) this.setValue(event.latLng);
414
- };
415
- setValue(geoPoint) {
416
- if (this.props.onChange) this.props.onChange(geoPoint);
417
- }
418
- render() {
419
- const { api: api , defaultZoom: defaultZoom , value: value , onChange: onChange } = this.props;
420
- return /*#__PURE__*/ (0, $7XdDa$jsx)((0, $238e2fa3d9e85b5f$export$4ad1bae46276c5ce), {
421
- api: api,
422
- location: this.getCenter(),
423
- onClick: this.handleMapClick,
424
- defaultZoom: defaultZoom,
425
- children: (map)=>/*#__PURE__*/ (0, $7XdDa$jsxs)((0, $7XdDa$Fragment), {
426
- children: [
427
- /*#__PURE__*/ (0, $7XdDa$jsx)((0, $73e82a3e42e8fc6c$export$55d7609a8f1eccd2), {
428
- api: api,
429
- map: map,
430
- onChange: this.handlePlaceChanged
431
- }),
432
- value && /*#__PURE__*/ (0, $7XdDa$jsx)((0, $b7b6f34a212b17da$export$e98856a975cab58e), {
433
- api: api,
434
- map: map,
435
- position: value,
436
- onMove: onChange ? this.handleMarkerDragEnd : undefined
437
- })
438
- ]
439
- })
440
- });
441
- }
442
- }
443
-
444
-
445
-
446
- const $8e8668abdcaeab13$export$1c4ad7c095d42d37 = (0, $7XdDa$styledcomponents).img`
447
- width: 100%;
448
- height: auto;
449
- vertical-align: top;
450
- `;
451
- const $8e8668abdcaeab13$export$ffa61c425f593078 = (0, $7XdDa$styledcomponents).div`
452
- height: 40rem;
453
- width: 50rem;
454
- `;
455
-
456
-
457
- let $df916f7ad083efd6$var$config;
458
- function $df916f7ad083efd6$export$ee3fba7cd2f8c355() {
459
- return $df916f7ad083efd6$var$config;
460
- }
461
- function $df916f7ad083efd6$export$a9c6c3563e9053d(newConfig) {
462
- $df916f7ad083efd6$var$config = newConfig;
463
- }
464
-
465
-
466
- const $aae6ff17d8424da8$var$getStaticImageUrl = (value, apiKey)=>{
467
- const loc = `${value.lat},${value.lng}`;
468
- const params = {
469
- key: apiKey,
470
- center: loc,
471
- markers: loc,
472
- zoom: 13,
473
- scale: 2,
474
- size: "640x300"
475
- };
476
- const qs = Object.keys(params).reduce((res, param)=>{
477
- return res.concat(`${param}=${encodeURIComponent(params[param])}`);
478
- }, []);
479
- return `https://maps.googleapis.com/maps/api/staticmap?${qs.join("&")}`;
480
- };
481
- class $aae6ff17d8424da8$var$GeopointInput extends (0, $7XdDa$react).PureComponent {
482
- _geopointInputId = (0, $7XdDa$uniqueId)("GeopointInput");
483
- constructor(props){
484
- super(props);
485
- this.state = {
486
- modalOpen: false
487
- };
488
- }
489
- setEditButton = (el)=>{
490
- this.editButton = el;
491
- };
492
- focus() {
493
- if (this.editButton) this.editButton.focus();
494
- }
495
- handleToggleModal = ()=>{
496
- this.setState((prevState)=>({
497
- modalOpen: !prevState.modalOpen
498
- }));
499
- };
500
- handleCloseModal = ()=>{
501
- this.setState({
502
- modalOpen: false
503
- });
504
- };
505
- handleChange = (latLng)=>{
506
- const { schemaType: schemaType , onChange: onChange } = this.props;
507
- onChange([
508
- (0, $7XdDa$setIfMissing)({
509
- _type: schemaType.name
510
- }),
511
- (0, $7XdDa$set)(latLng.lat(), [
512
- "lat"
513
- ]),
514
- (0, $7XdDa$set)(latLng.lng(), [
515
- "lng"
516
- ]),
517
- ]);
518
- };
519
- handleClear = ()=>{
520
- const { onChange: onChange } = this.props;
521
- onChange((0, $7XdDa$unset)());
522
- };
523
- render() {
524
- const { value: value , readOnly: readOnly , geoConfig: config , path: path , changed: changed , focused: focused } = this.props;
525
- const { modalOpen: modalOpen } = this.state;
526
- if (!config || !config.apiKey) return /*#__PURE__*/ (0, $7XdDa$jsxs)("div", {
527
- children: [
528
- /*#__PURE__*/ (0, $7XdDa$jsxs)("p", {
529
- children: [
530
- "The ",
531
- /*#__PURE__*/ (0, $7XdDa$jsx)("a", {
532
- href: "https://sanity.io/docs/schema-types/geopoint-type",
533
- children: "Geopoint type"
534
- }),
535
- " needs a Google Maps API key with access to:"
536
- ]
537
- }),
538
- /*#__PURE__*/ (0, $7XdDa$jsxs)("ul", {
539
- children: [
540
- /*#__PURE__*/ (0, $7XdDa$jsx)("li", {
541
- children: "Google Maps JavaScript API"
542
- }),
543
- /*#__PURE__*/ (0, $7XdDa$jsx)("li", {
544
- children: "Google Places API Web Service"
545
- }),
546
- /*#__PURE__*/ (0, $7XdDa$jsx)("li", {
547
- children: "Google Static Maps API"
548
- })
549
- ]
550
- }),
551
- /*#__PURE__*/ (0, $7XdDa$jsx)("p", {
552
- children: "Please enter the API key with access to these services in your googleMapsInput plugin config."
553
- })
554
- ]
555
- });
556
- return /*#__PURE__*/ (0, $7XdDa$jsxs)((0, $7XdDa$Fragment), {
557
- children: [
558
- value && /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$ChangeIndicator), {
559
- path: path,
560
- isChanged: changed,
561
- hasFocus: !!focused,
562
- children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $8e8668abdcaeab13$export$1c4ad7c095d42d37), {
563
- src: $aae6ff17d8424da8$var$getStaticImageUrl(value, config.apiKey),
564
- alt: "Map location"
565
- })
566
- }),
567
- !readOnly && /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Box), {
568
- marginTop: 4,
569
- children: /*#__PURE__*/ (0, $7XdDa$jsxs)((0, $7XdDa$Grid), {
570
- columns: 2,
571
- gap: 2,
572
- children: [
573
- /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Button), {
574
- mode: "ghost",
575
- icon: value && (0, $7XdDa$EditIcon),
576
- padding: 3,
577
- ref: this.setEditButton,
578
- text: value ? "Edit" : "Set location",
579
- onClick: this.handleToggleModal
580
- }),
581
- value && /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Button), {
582
- tone: "critical",
583
- icon: (0, $7XdDa$TrashIcon),
584
- padding: 3,
585
- mode: "ghost",
586
- text: "Remove",
587
- onClick: this.handleClear
588
- })
589
- ]
590
- })
591
- }),
592
- modalOpen && /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Dialog), {
593
- id: `${this._geopointInputId}_dialog`,
594
- onClose: this.handleCloseModal,
595
- header: "Place the marker on the map",
596
- width: 1,
597
- children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $8e8668abdcaeab13$export$ffa61c425f593078), {
598
- children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $004c8002f57d3835$export$a628545bcf173896), {
599
- config: (0, $df916f7ad083efd6$export$ee3fba7cd2f8c355)(),
600
- children: (api)=>/*#__PURE__*/ (0, $7XdDa$jsx)((0, $154571ab11e62bfc$export$9a2476e65b6b92a7), {
601
- api: api,
602
- value: value || undefined,
603
- onChange: readOnly ? undefined : this.handleChange,
604
- defaultLocation: config.defaultLocation,
605
- defaultZoom: config.defaultZoom
606
- })
607
- })
608
- })
609
- })
610
- ]
611
- });
612
- }
613
- }
614
- var $aae6ff17d8424da8$export$2e2bcd8739ae039 = $aae6ff17d8424da8$var$GeopointInput;
615
-
616
-
617
-
618
-
619
-
620
-
621
-
622
-
623
-
624
-
625
-
626
-
627
-
628
- class $d97751f0fd202e1b$export$21b07c8f274aebd5 extends $7XdDa$PureComponent {
629
- eventHandlers = {};
630
- componentDidMount() {
631
- const { from: from , to: to , api: api , map: map , zIndex: zIndex , onClick: onClick , color: color , arrowRef: arrowRef } = this.props;
632
- const lineSymbol = {
633
- path: api.SymbolPath.FORWARD_OPEN_ARROW
634
- };
635
- this.line = new api.Polyline({
636
- map: map,
637
- zIndex: zIndex,
638
- path: [
639
- from,
640
- to
641
- ],
642
- icons: [
643
- {
644
- icon: lineSymbol,
645
- offset: "50%"
646
- }
647
- ],
648
- strokeOpacity: 0.55,
649
- strokeColor: color ? color.text : "black"
650
- });
651
- if (onClick) this.eventHandlers.click = api.event.addListener(this.line, "click", onClick);
652
- if (arrowRef) arrowRef.current = this.line;
653
- }
654
- componentDidUpdate(prevProps) {
655
- if (!this.line) return;
656
- const { from: from , to: to , map: map } = this.props;
657
- if (!(0, $0bf72f17fd0ef0c4$export$ad553d4d3a617f20)(prevProps.from, from) || !(0, $0bf72f17fd0ef0c4$export$ad553d4d3a617f20)(prevProps.to, to)) this.line.setPath([
658
- from,
659
- to
660
- ]);
661
- if (prevProps.map !== map) this.line.setMap(map);
662
- }
663
- componentWillUnmount() {
664
- if (this.line) this.line.setMap(null);
665
- if (this.eventHandlers.click) this.eventHandlers.click.remove();
666
- }
667
- // eslint-disable-next-line class-methods-use-this
668
- render() {
669
- return null;
670
- }
671
- }
672
-
673
-
674
- function $d0ad603c81d3eea8$export$f432217b31ec4a77({ diff: diff , api: api , map: map , label: label }) {
675
- const { fromValue: from , toValue: to } = diff;
676
- const annotation = diff.isChanged ? diff.annotation : undefined;
677
- const userColor = (0, $7XdDa$useUserColor)(annotation ? annotation.author : null) || undefined;
678
- const fromRef = $7XdDa$useRef();
679
- const toRef = $7XdDa$useRef();
680
- return /*#__PURE__*/ (0, $7XdDa$jsxs)((0, $7XdDa$Fragment), {
681
- children: [
682
- from && /*#__PURE__*/ (0, $7XdDa$jsx)((0, $b7b6f34a212b17da$export$e98856a975cab58e), {
683
- api: api,
684
- map: map,
685
- position: from,
686
- zIndex: 0,
687
- opacity: 0.55,
688
- markerRef: fromRef,
689
- color: userColor
690
- }),
691
- from && to && /*#__PURE__*/ (0, $7XdDa$jsx)((0, $d97751f0fd202e1b$export$21b07c8f274aebd5), {
692
- api: api,
693
- map: map,
694
- from: from,
695
- to: to,
696
- zIndex: 1,
697
- color: userColor
698
- }),
699
- to && /*#__PURE__*/ (0, $7XdDa$jsx)((0, $b7b6f34a212b17da$export$e98856a975cab58e), {
700
- api: api,
701
- map: map,
702
- position: to,
703
- zIndex: 2,
704
- markerRef: toRef,
705
- label: label,
706
- color: userColor
707
- })
708
- ]
709
- });
710
- }
711
-
712
-
713
-
714
- const $9aeb4640a3d1c536$export$35b4f62b8f8d707c = (0, $7XdDa$styledcomponents).div`
715
- position: relative;
716
- min-height: 200px;
717
-
718
- &:empty {
719
- background-color: var(--card-skeleton-color-from);
720
- display: table;
721
- width: 100%;
722
- }
723
-
724
- &:empty:after {
725
- content: 'Missing/invalid data';
726
- display: table-cell;
727
- vertical-align: middle;
728
- text-align: center;
729
- position: relative;
730
- }
731
- `;
732
-
733
-
734
-
735
- const $0b61abf3d6e295b1$export$2d0695678527b4cc = ({ diff: diff , schemaType: schemaType })=>{
736
- return /*#__PURE__*/ (0, $7XdDa$jsx)((0, $9aeb4640a3d1c536$export$35b4f62b8f8d707c), {
737
- children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $004c8002f57d3835$export$a628545bcf173896), {
738
- config: (0, $df916f7ad083efd6$export$ee3fba7cd2f8c355)(),
739
- children: (api)=>/*#__PURE__*/ (0, $7XdDa$jsx)($0b61abf3d6e295b1$var$GeopointDiff, {
740
- api: api,
741
- diff: diff,
742
- schemaType: schemaType
743
- })
744
- })
745
- });
746
- };
747
- function $0b61abf3d6e295b1$var$GeopointDiff({ api: api , diff: diff }) {
748
- const fromValue = (diff.fromValue || []).filter($0b61abf3d6e295b1$var$hasCoordinates);
749
- const toValue = (diff.toValue || []).filter($0b61abf3d6e295b1$var$hasCoordinates);
750
- if (fromValue.length === 0 && toValue.length === 0) return null;
751
- const bounds = $0b61abf3d6e295b1$var$getBounds(fromValue, toValue, api);
752
- return /*#__PURE__*/ (0, $7XdDa$jsx)((0, $238e2fa3d9e85b5f$export$4ad1bae46276c5ce), {
753
- api: api,
754
- location: bounds.getCenter().toJSON(),
755
- mapTypeControl: false,
756
- controlSize: 20,
757
- bounds: bounds,
758
- children: (map)=>/*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Fragment), {
759
- children: diff.items.map(({ toIndex: toIndex , diff: pointDiff })=>{
760
- if (!$0b61abf3d6e295b1$var$isChangeDiff(pointDiff)) return null;
761
- return /*#__PURE__*/ (0, $7XdDa$jsx)((0, $d0ad603c81d3eea8$export$f432217b31ec4a77), {
762
- api: api,
763
- map: map,
764
- diff: pointDiff,
765
- label: `${toIndex}`
766
- }, toIndex);
767
- })
768
- })
769
- });
770
- }
771
- function $0b61abf3d6e295b1$var$isChangeDiff(diff) {
772
- return diff.action !== "unchanged" && diff.type === "object";
773
- }
774
- function $0b61abf3d6e295b1$var$hasCoordinates(point) {
775
- return typeof point.lat === "number" && typeof point.lng === "number";
776
- }
777
- function $0b61abf3d6e295b1$var$getBounds(fromValue, toValue, api) {
778
- const bounds = new api.LatLngBounds();
779
- const points = [
780
- ...fromValue || [],
781
- ...toValue || []
782
- ];
783
- points.forEach((point)=>bounds.extend(point));
784
- return bounds;
785
- }
786
-
787
-
788
-
789
-
790
-
791
-
792
-
793
-
794
-
795
-
796
- const $f98f019473805f47$export$6b7bf6aeccd8ac3f = ({ diff: diff , schemaType: schemaType })=>{
797
- return /*#__PURE__*/ (0, $7XdDa$jsx)((0, $9aeb4640a3d1c536$export$35b4f62b8f8d707c), {
798
- children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $004c8002f57d3835$export$a628545bcf173896), {
799
- config: (0, $df916f7ad083efd6$export$ee3fba7cd2f8c355)(),
800
- children: (api)=>/*#__PURE__*/ (0, $7XdDa$jsx)($f98f019473805f47$var$GeopointDiff, {
801
- api: api,
802
- diff: diff,
803
- schemaType: schemaType
804
- })
805
- })
806
- });
807
- };
808
- function $f98f019473805f47$var$GeopointDiff({ api: api , diff: diff }) {
809
- const { fromValue: fromValue , toValue: toValue } = diff;
810
- const annotation = (0, $7XdDa$getAnnotationAtPath)(diff, [
811
- "lat"
812
- ]) || (0, $7XdDa$getAnnotationAtPath)(diff, [
813
- "lng"
814
- ]) || (0, $7XdDa$getAnnotationAtPath)(diff, []);
815
- const center = $f98f019473805f47$var$getCenter(diff, api);
816
- const bounds = fromValue && toValue ? $f98f019473805f47$var$getBounds(fromValue, toValue, api) : undefined;
817
- return /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$DiffTooltip), {
818
- annotations: annotation ? [
819
- annotation
820
- ] : [],
821
- description: $f98f019473805f47$var$getAction(diff),
822
- children: /*#__PURE__*/ (0, $7XdDa$jsx)("div", {
823
- children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $238e2fa3d9e85b5f$export$4ad1bae46276c5ce), {
824
- api: api,
825
- location: center,
826
- mapTypeControl: false,
827
- controlSize: 20,
828
- bounds: bounds,
829
- scrollWheel: false,
830
- children: (map)=>/*#__PURE__*/ (0, $7XdDa$jsx)((0, $d0ad603c81d3eea8$export$f432217b31ec4a77), {
831
- api: api,
832
- map: map,
833
- diff: diff
834
- })
835
- })
836
- })
837
- });
838
- }
839
- function $f98f019473805f47$var$getBounds(fromValue, toValue, api) {
840
- return new api.LatLngBounds().extend(fromValue).extend(toValue);
841
- }
842
- function $f98f019473805f47$var$getCenter(diff, api) {
843
- const { fromValue: fromValue , toValue: toValue } = diff;
844
- if (fromValue && toValue) return $f98f019473805f47$var$getBounds(fromValue, toValue, api).getCenter().toJSON();
845
- if (fromValue) return fromValue;
846
- if (toValue) return toValue;
847
- throw new Error("Neither a from or a to value present");
848
- }
849
- function $f98f019473805f47$var$getAction(diff) {
850
- const { fromValue: fromValue , toValue: toValue } = diff;
851
- if (fromValue && toValue) return "Moved";
852
- else if (fromValue) return "Removed";
853
- else if (toValue) return "Added";
854
- return "Unchanged";
855
- }
856
-
857
-
858
- const $357f50a17451fe9f$export$626ae7d0cf8f9143 = (0, $7XdDa$createPlugin)((config)=>{
859
- (0, $df916f7ad083efd6$export$a9c6c3563e9053d)(config);
860
- return {
861
- name: "google-maps-input",
862
- form: {
863
- components: {
864
- input (props) {
865
- if ($357f50a17451fe9f$var$isGeopoint(props.schemaType)) {
866
- const castedProps = props;
867
- return /*#__PURE__*/ (0, $7XdDa$jsx)((0, $aae6ff17d8424da8$export$2e2bcd8739ae039), {
868
- ...castedProps,
869
- geoConfig: config
870
- });
871
- }
872
- return props.renderDefault(props);
873
- }
874
- }
875
- }
876
- };
877
- });
878
- function $357f50a17451fe9f$var$isGeopoint(schemaType) {
879
- return $357f50a17451fe9f$var$isType("geopoint", schemaType);
880
- }
881
- function $357f50a17451fe9f$var$isType(name, schema) {
882
- if (schema?.name === name) return true;
883
- else if (!schema?.name) return false;
884
- return $357f50a17451fe9f$var$isType(name, schema?.type);
885
- }
886
-
887
-
888
- export {$357f50a17451fe9f$export$626ae7d0cf8f9143 as googleMapsInput, $0b61abf3d6e295b1$export$2d0695678527b4cc as GeopointArrayDiff, $f98f019473805f47$export$6b7bf6aeccd8ac3f as GeopointFieldDiff, $aae6ff17d8424da8$export$2e2bcd8739ae039 as GeopointInput};
889
- //# sourceMappingURL=index.js.map