@contentful/field-editor-location 1.2.1 → 1.2.3

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/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.2.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-location@1.2.2...@contentful/field-editor-location@1.2.3) (2023-04-19)
7
+
8
+ **Note:** Version bump only for package @contentful/field-editor-location
9
+
10
+ ## [1.2.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-location@1.2.1...@contentful/field-editor-location@1.2.2) (2023-03-14)
11
+
12
+ **Note:** Version bump only for package @contentful/field-editor-location
13
+
6
14
  ## [1.2.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-location@1.2.0...@contentful/field-editor-location@1.2.1) (2023-03-10)
7
15
 
8
16
  **Note:** Version bump only for package @contentful/field-editor-location
@@ -15,94 +15,71 @@ var GoogleMapReact = _interopDefault(require('google-map-react'));
15
15
  var f36Components = require('@contentful/f36-components');
16
16
  var tokens = _interopDefault(require('@contentful/f36-tokens'));
17
17
 
18
- function _inheritsLoose(subClass, superClass) {
19
- subClass.prototype = Object.create(superClass.prototype);
20
- subClass.prototype.constructor = subClass;
21
-
22
- _setPrototypeOf(subClass, superClass);
23
- }
24
-
25
- function _setPrototypeOf(o, p) {
26
- _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
27
- o.__proto__ = p;
28
- return o;
29
- };
30
-
31
- return _setPrototypeOf(o, p);
32
- }
33
-
34
- var styles = {
18
+ /* eslint-disable @typescript-eslint/no-explicit-any */
19
+ const styles = {
35
20
  root: /*#__PURE__*/emotion.css({
36
21
  height: '300px',
37
22
  width: '100%'
38
23
  })
39
24
  };
40
- var BerlinLocation = {
25
+ const BerlinLocation = {
41
26
  lat: 52.5018,
42
27
  lng: 13.41115439
43
28
  };
44
- var GoogleMapView = /*#__PURE__*/function (_React$Component) {
45
- _inheritsLoose(GoogleMapView, _React$Component);
46
-
47
- function GoogleMapView(props) {
48
- var _this;
49
-
50
- _this = _React$Component.call(this, props) || this;
51
-
52
- _this.onGoogleApiLoaded = function (event) {
53
- var maps = event.maps,
54
- map = event.map;
55
- var marker = new maps.Marker({
56
- map: map,
29
+ class GoogleMapView extends React__default.Component {
30
+ constructor(props) {
31
+ super(props);
32
+
33
+ this.onGoogleApiLoaded = event => {
34
+ const {
35
+ maps,
36
+ map
37
+ } = event;
38
+ const marker = new maps.Marker({
39
+ map,
57
40
  position: map.getCenter(),
58
- cursor: _this.props.disabled ? 'not-allowed' : 'auto',
59
- draggable: !_this.props.disabled,
60
- visible: Boolean(_this.props.location)
41
+ cursor: this.props.disabled ? 'not-allowed' : 'auto',
42
+ draggable: !this.props.disabled,
43
+ visible: Boolean(this.props.location)
61
44
  });
62
- maps.event.addListener(map, 'click', function (event) {
63
- if (_this.props.disabled || !_this.state.marker || !_this.state.maps) {
45
+ maps.event.addListener(map, 'click', event => {
46
+ if (this.props.disabled || !this.state.marker || !this.state.maps) {
64
47
  return;
65
48
  }
66
49
 
67
- _this.state.marker.setPosition(event.latLng);
68
-
69
- _this.state.marker.setVisible(true);
70
-
71
- _this.props.onChangeLocation({
50
+ this.state.marker.setPosition(event.latLng);
51
+ this.state.marker.setVisible(true);
52
+ this.props.onChangeLocation({
72
53
  lat: event.latLng.lat(),
73
54
  lng: event.latLng.lng()
74
55
  });
75
56
  });
76
- maps.event.addListener(marker, 'dragend', function (event) {
77
- _this.props.onChangeLocation({
57
+ maps.event.addListener(marker, 'dragend', event => {
58
+ this.props.onChangeLocation({
78
59
  lat: event.latLng.lat(),
79
60
  lng: event.latLng.lng()
80
61
  });
81
62
  });
82
-
83
- _this.setState({
84
- marker: marker,
85
- maps: maps
86
- }, function () {
87
- _this.props.onGoogleApiLoaded({
88
- maps: maps
63
+ this.setState({
64
+ marker,
65
+ maps
66
+ }, () => {
67
+ this.props.onGoogleApiLoaded({
68
+ maps
89
69
  });
90
70
  });
91
71
  };
92
72
 
93
- _this.state = {
73
+ this.state = {
94
74
  marker: undefined,
95
75
  maps: undefined
96
76
  };
97
- return _this;
98
77
  }
99
78
 
100
- var _proto = GoogleMapView.prototype;
101
-
102
- _proto.componentDidUpdate = function componentDidUpdate() {
79
+ componentDidUpdate() {
103
80
  if (this.state.marker && this.state.maps) {
104
81
  if (this.props.location) {
105
- var latLng = new this.state.maps.LatLng(this.props.location.lat, this.props.location.lng);
82
+ const latLng = new this.state.maps.LatLng(this.props.location.lat, this.props.location.lng);
106
83
  this.state.marker.setPosition(latLng);
107
84
  this.state.marker.setVisible(true);
108
85
  } else {
@@ -112,9 +89,9 @@ var GoogleMapView = /*#__PURE__*/function (_React$Component) {
112
89
  this.state.marker.setDraggable(!this.props.disabled);
113
90
  this.state.marker.setCursor(this.props.disabled ? 'not-allowed' : 'auto');
114
91
  }
115
- };
92
+ }
116
93
 
117
- _proto.render = function render() {
94
+ render() {
118
95
  return React__default.createElement("div", {
119
96
  className: styles.root
120
97
  }, React__default.createElement(GoogleMapReact, {
@@ -132,12 +109,11 @@ var GoogleMapView = /*#__PURE__*/function (_React$Component) {
132
109
  yesIWantToUseGoogleMapApiInternals: true,
133
110
  onGoogleApiLoaded: this.onGoogleApiLoaded
134
111
  }));
135
- };
112
+ }
136
113
 
137
- return GoogleMapView;
138
- }(React__default.Component);
114
+ }
139
115
 
140
- var styles$1 = {
116
+ const styles$1 = {
141
117
  root: /*#__PURE__*/emotion.css({
142
118
  width: '100%'
143
119
  }),
@@ -163,25 +139,13 @@ var styles$1 = {
163
139
  })
164
140
  };
165
141
  function LocationSearchInput(props) {
166
- var _React$useState = React__default.useState(false),
167
- isSearching = _React$useState[0],
168
- setIsSearching = _React$useState[1];
169
-
170
- var _React$useState2 = React__default.useState(''),
171
- address = _React$useState2[0],
172
- setAddress = _React$useState2[1];
173
-
174
- var _React$useState3 = React__default.useState(false),
175
- hasError = _React$useState3[0],
176
- setHasError = _React$useState3[1];
177
-
178
- var _React$useState4 = React__default.useState(null),
179
- suggestion = _React$useState4[0],
180
- setSuggestion = _React$useState4[1];
181
-
182
- React__default.useEffect(function () {
142
+ const [isSearching, setIsSearching] = React__default.useState(false);
143
+ const [address, setAddress] = React__default.useState('');
144
+ const [hasError, setHasError] = React__default.useState(false);
145
+ const [suggestion, setSuggestion] = React__default.useState(null);
146
+ React__default.useEffect(() => {
183
147
  setIsSearching(true);
184
- props.onGetAddressFromLocation(props.value, address).then(function (address) {
148
+ props.onGetAddressFromLocation(props.value, address).then(address => {
185
149
  setAddress(address);
186
150
  setIsSearching(false);
187
151
  }); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
@@ -195,7 +159,7 @@ function LocationSearchInput(props) {
195
159
  isInvalid: hasError,
196
160
  placeholder: "Start typing to find location",
197
161
  value: address,
198
- onChange: function onChange(e) {
162
+ onChange: e => {
199
163
  setAddress(e.target.value);
200
164
  setHasError(false);
201
165
  setSuggestion(null);
@@ -206,7 +170,7 @@ function LocationSearchInput(props) {
206
170
  }
207
171
 
208
172
  setIsSearching(true);
209
- props.onSearchAddress(e.target.value).then(function (value) {
173
+ props.onSearchAddress(e.target.value).then(value => {
210
174
  setIsSearching(false);
211
175
 
212
176
  if (value === null) {
@@ -234,7 +198,7 @@ function LocationSearchInput(props) {
234
198
  }, React__default.createElement(f36Components.Button, {
235
199
  variant: "transparent",
236
200
  testId: "location-editor-suggestion",
237
- onClick: function onClick() {
201
+ onClick: () => {
238
202
  setAddress(suggestion.address);
239
203
  props.onChangeLocation(suggestion.location);
240
204
  setSuggestion(null);
@@ -252,7 +216,7 @@ var ViewType;
252
216
  ViewType["Coordinates"] = "Coordinates";
253
217
  })(ViewType || (ViewType = {}));
254
218
 
255
- var styles$2 = {
219
+ const styles$2 = {
256
220
  root: /*#__PURE__*/emotion.css({
257
221
  display: 'flex',
258
222
  flexDirection: 'row',
@@ -297,7 +261,7 @@ function LocationSelector(props) {
297
261
  isDisabled: props.disabled,
298
262
  value: ViewType.Address,
299
263
  isChecked: props.view === ViewType.Address,
300
- onChange: function onChange() {
264
+ onChange: () => {
301
265
  props.onChangeView(ViewType.Address);
302
266
  }
303
267
  }, "Address"), React__default.createElement(f36Components.Radio, {
@@ -309,7 +273,7 @@ function LocationSelector(props) {
309
273
  isDisabled: props.disabled,
310
274
  value: ViewType.Coordinates,
311
275
  isChecked: props.view === ViewType.Coordinates,
312
- onChange: function onChange() {
276
+ onChange: () => {
313
277
  props.onChangeView(ViewType.Coordinates);
314
278
  }
315
279
  }, "Coordinates")), props.view === ViewType.Address && React__default.createElement("div", {
@@ -332,7 +296,7 @@ function LocationSelector(props) {
332
296
  placeholder: "Between -90 and 90",
333
297
  isDisabled: props.disabled,
334
298
  value: props.value ? String(props.value.lat) : '',
335
- onChange: function onChange(e) {
299
+ onChange: e => {
336
300
  props.onChangeLocation({
337
301
  lng: props.value && props.value.lng !== undefined ? props.value.lng : 0,
338
302
  lat: Number(e.target.value) || 0
@@ -354,7 +318,7 @@ function LocationSelector(props) {
354
318
  placeholder: "Between -180 and 180",
355
319
  isDisabled: props.disabled,
356
320
  value: props.value ? String(props.value.lng) : '',
357
- onChange: function onChange(e) {
321
+ onChange: e => {
358
322
  props.onChangeLocation({
359
323
  lat: props.value && props.value.lat !== undefined ? props.value.lat : 0,
360
324
  lng: Number(e.target.value) || 0
@@ -371,7 +335,7 @@ function LocationSelector(props) {
371
335
  isDisabled: props.disabled,
372
336
  testId: "location-editor-clear",
373
337
  className: styles$2.clearBtn,
374
- onClick: function onClick() {
338
+ onClick: () => {
375
339
  props.onChangeLocation(undefined);
376
340
  }
377
341
  }, "Clear")));
@@ -388,144 +352,132 @@ function toLocationValue(coords) {
388
352
  }
389
353
  }
390
354
 
391
- var LocationEditor = /*#__PURE__*/function (_React$Component) {
392
- _inheritsLoose(LocationEditor, _React$Component);
393
-
394
- function LocationEditor(props) {
395
- var _this;
396
-
397
- _this = _React$Component.call(this, props) || this;
398
- _this.onSearchAddress = throttle(function (value) {
399
- if (!_this.state.mapsObject) {
355
+ class LocationEditor extends React.Component {
356
+ constructor(props) {
357
+ super(props);
358
+ this.onSearchAddress = throttle(value => {
359
+ if (!this.state.mapsObject) {
400
360
  return Promise.resolve(null);
401
361
  }
402
362
 
403
- var mapsObject = _this.state.mapsObject;
363
+ const {
364
+ mapsObject
365
+ } = this.state;
404
366
 
405
367
  if (!value) {
406
368
  return Promise.resolve(null);
407
369
  }
408
370
 
409
- return new Promise(function (resolve) {
410
- var geocoder = new mapsObject.Geocoder();
371
+ return new Promise(resolve => {
372
+ const geocoder = new mapsObject.Geocoder();
411
373
  geocoder.geocode({
412
374
  address: value
413
- }, resolve, function () {
375
+ }, resolve, () => {
414
376
  resolve(null);
415
377
  });
416
378
  });
417
379
  }, 300);
418
380
 
419
- _this.onGetAddressFromLocation = function (location, value) {
420
- if (!_this.state.mapsObject || !location) {
381
+ this.onGetAddressFromLocation = (location, value) => {
382
+ if (!this.state.mapsObject || !location) {
421
383
  return Promise.resolve('');
422
384
  }
423
385
 
424
- var mapsObject = _this.state.mapsObject;
425
- return new Promise(function (resolve) {
426
- var geocoder = new mapsObject.Geocoder();
386
+ const {
387
+ mapsObject
388
+ } = this.state;
389
+ return new Promise(resolve => {
390
+ const geocoder = new mapsObject.Geocoder();
427
391
  geocoder.geocode({
428
- location: location
429
- }, function (result) {
392
+ location
393
+ }, result => {
430
394
  if (result && result.length > 0) {
431
- var addresses = result.map(function (item) {
432
- return item.formatted_address;
433
- });
434
- resolve(addresses.find(function (item) {
435
- return item === value;
436
- }) || addresses[0]);
395
+ const addresses = result.map(item => item.formatted_address);
396
+ resolve(addresses.find(item => item === value) || addresses[0]);
437
397
  } else {
438
398
  resolve('');
439
399
  }
440
- }, function () {
400
+ }, () => {
441
401
  resolve('');
442
402
  });
443
403
  });
444
404
  };
445
405
 
446
- _this.state = {
406
+ this.state = {
447
407
  localValue: props.value ? {
448
408
  lng: props.value.lon,
449
409
  lat: props.value.lat
450
410
  } : undefined,
451
411
  mapsObject: null
452
412
  };
453
- return _this;
454
413
  } // @ts-expect-error
455
414
 
456
415
 
457
- var _proto = LocationEditor.prototype;
458
-
459
- _proto.render = function render() {
460
- var _this2 = this;
461
-
462
- var _this$state = this.state,
463
- mapsObject = _this$state.mapsObject,
464
- localValue = _this$state.localValue;
416
+ render() {
417
+ const {
418
+ mapsObject,
419
+ localValue
420
+ } = this.state;
465
421
  return React.createElement("div", {
466
422
  "data-test-id": "location-editor"
467
423
  }, React.createElement(GoogleMapView, {
468
424
  disabled: this.props.disabled || mapsObject === null,
469
425
  googleMapsKey: this.props.googleMapsKey,
470
426
  location: localValue,
471
- onGoogleApiLoaded: function onGoogleApiLoaded(_ref) {
472
- var maps = _ref.maps;
473
-
474
- _this2.setState({
427
+ onGoogleApiLoaded: ({
428
+ maps
429
+ }) => {
430
+ this.setState({
475
431
  mapsObject: maps
476
432
  });
477
433
  },
478
- onChangeLocation: function onChangeLocation(coords) {
479
- _this2.setState({
434
+ onChangeLocation: coords => {
435
+ this.setState({
480
436
  localValue: coords
481
437
  });
482
-
483
- _this2.props.setValue(toLocationValue(coords));
438
+ this.props.setValue(toLocationValue(coords));
484
439
  }
485
440
  }), React.createElement(LocationSelector, {
486
441
  disabled: this.props.disabled || mapsObject === null,
487
442
  value: localValue,
488
443
  view: this.props.selectedView,
489
- onChangeView: function onChangeView(view) {
490
- _this2.props.setSelectedView(view);
444
+ onChangeView: view => {
445
+ this.props.setSelectedView(view);
491
446
  },
492
- onChangeLocation: function onChangeLocation(coords) {
493
- _this2.setState({
447
+ onChangeLocation: coords => {
448
+ this.setState({
494
449
  localValue: coords
495
450
  });
496
-
497
- _this2.props.setValue(toLocationValue(coords));
451
+ this.props.setValue(toLocationValue(coords));
498
452
  },
499
453
  onSearchAddress: this.onSearchAddress,
500
454
  onGetAddressFromLocation: this.onGetAddressFromLocation
501
455
  }));
502
- };
456
+ }
503
457
 
504
- return LocationEditor;
505
- }(React.Component);
458
+ }
506
459
  function LocationEditorConnected(props) {
507
- var field = props.field;
508
- var googleMapsKey = props.parameters ? props.parameters.instance.googleMapsKey : undefined;
509
-
510
- var _React$useState = React.useState(ViewType.Address),
511
- selectedView = _React$useState[0],
512
- setSelectedView = _React$useState[1];
513
-
460
+ const {
461
+ field
462
+ } = props;
463
+ const googleMapsKey = props.parameters ? props.parameters.instance.googleMapsKey : undefined;
464
+ const [selectedView, setSelectedView] = React.useState(ViewType.Address);
514
465
  return React.createElement(fieldEditorShared.FieldConnector, {
515
- isEqualValues: function isEqualValues(value1, value2) {
466
+ isEqualValues: (value1, value2) => {
516
467
  return deepEqual(value1, value2);
517
468
  },
518
469
  field: field,
519
470
  isInitiallyDisabled: props.isInitiallyDisabled
520
- }, function (_ref2) {
521
- var value = _ref2.value,
522
- disabled = _ref2.disabled,
523
- setValue = _ref2.setValue,
524
- externalReset = _ref2.externalReset;
471
+ }, ({
472
+ value,
473
+ disabled,
474
+ setValue,
475
+ externalReset
476
+ }) => {
525
477
  return React.createElement(LocationEditor // on external change reset component completely and init with initial value again
526
478
  , {
527
479
  // on external change reset component completely and init with initial value again
528
- key: "location-editor-" + externalReset,
480
+ key: `location-editor-${externalReset}`,
529
481
  value: value,
530
482
  disabled: disabled,
531
483
  setValue: setValue,
@@ -539,7 +491,7 @@ LocationEditorConnected.defaultProps = {
539
491
  isInitiallyDisabled: true
540
492
  };
541
493
 
542
- var LocationEditor$1 = LocationEditorConnected;
494
+ const LocationEditor$1 = LocationEditorConnected;
543
495
 
544
496
  exports.LocationEditor = LocationEditor$1;
545
497
  //# sourceMappingURL=field-editor-location.cjs.development.js.map