@janiscommerce/ui-web 0.32.0 → 0.34.0

package/dist/index.umd.js

@@ -15963,6 +15963,28 @@
     }, children));
   };
 
+  var getCoordsFromEvent = function getCoordsFromEvent() {
+    var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    if (_typeof(event) !== 'object') return;
+    var _event$latLng = event.latLng;
+    _event$latLng = _event$latLng === void 0 ? {} : _event$latLng;
+    var _event$latLng$lat = _event$latLng.lat,
+        lat = _event$latLng$lat === void 0 ? function () {} : _event$latLng$lat,
+        _event$latLng$lng = _event$latLng.lng,
+        lng = _event$latLng$lng === void 0 ? function () {} : _event$latLng$lng;
+    return {
+      lat: lat(),
+      lng: lng()
+    };
+  };
+  var markerHasEqualPosition = function markerHasEqualPosition() {
+    var prevPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var newPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var hasEqualLat = (prevPosition === null || prevPosition === void 0 ? void 0 : prevPosition.lat) === (newPosition === null || newPosition === void 0 ? void 0 : newPosition.lat);
+    var hasEqualLng = (prevPosition === null || prevPosition === void 0 ? void 0 : prevPosition.lng) === (newPosition === null || newPosition === void 0 ? void 0 : newPosition.lng);
+    return hasEqualLat && hasEqualLng;
+  };
+
   var Marker = function Marker(_ref) {
     var _ref$markerData = _ref.markerData,
         markerData = _ref$markerData === void 0 ? {} : _ref$markerData,
@@ -15971,29 +15993,40 @@
         _ref$readOnly = _ref.readOnly,
         readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly;
 
-    var _ref2 = markerData || {},
+    var _useState = React.useState(markerData),
+        _useState2 = _slicedToArray(_useState, 2),
+        marker = _useState2[0],
+        setMarker = _useState2[1];
+
+    var _ref2 = marker || {},
         icon = _ref2.icon,
         position = _ref2.position,
         overlay = _ref2.overlay,
         infoWindowChildren = _ref2.infoWindowChildren,
         isDraggable = _ref2.isDraggable;
 
-    var _markerOptions$onClic = markerOptions.onClick,
+    var _markerOptions$onLoad = markerOptions.onLoad,
+        _onLoad = _markerOptions$onLoad === void 0 ? function () {} : _markerOptions$onLoad,
+        _markerOptions$onClic = markerOptions.onClick,
         _onClick = _markerOptions$onClic === void 0 ? function () {} : _markerOptions$onClic,
-        _markerOptions$onDrag = markerOptions.onDragStart,
-        _onDragStart = _markerOptions$onDrag === void 0 ? function () {} : _markerOptions$onDrag,
-        _markerOptions$onDrag2 = markerOptions.onDragEnd,
-        _onDragEnd = _markerOptions$onDrag2 === void 0 ? function () {} : _markerOptions$onDrag2;
+        _markerOptions$onDrag = markerOptions.onDrag,
+        _onDrag = _markerOptions$onDrag === void 0 ? function () {} : _markerOptions$onDrag,
+        _markerOptions$onDrag2 = markerOptions.onDragStart,
+        _onDragStart = _markerOptions$onDrag2 === void 0 ? function () {} : _markerOptions$onDrag2,
+        _markerOptions$onDrag3 = markerOptions.onDragEnd,
+        _onDragEnd = _markerOptions$onDrag3 === void 0 ? function () {} : _markerOptions$onDrag3;
 
-    var _useState = React.useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        infoWindowOpen = _useState2[0],
-        setInfoWindowOpen = _useState2[1];
+    var markerRef = React.useRef(null);
 
     var _useState3 = React.useState(false),
         _useState4 = _slicedToArray(_useState3, 2),
-        mouseOverInfoWindow = _useState4[0],
-        setMouseOverInfoWindow = _useState4[1];
+        infoWindowOpen = _useState4[0],
+        setInfoWindowOpen = _useState4[1];
+
+    var _useState5 = React.useState(false),
+        _useState6 = _slicedToArray(_useState5, 2),
+        mouseOverInfoWindow = _useState6[0],
+        setMouseOverInfoWindow = _useState6[1];
 
     var openInfoWindow = function openInfoWindow() {
       return setInfoWindowOpen(true);
@@ -16006,18 +16039,51 @@
     var delayedInfoWindowHover = debounce(function () {
       if (!mouseOverInfoWindow) closeInfoWindow();
     }, 100);
+
+    var updateMarker = function updateMarker() {
+      var newData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+      var updatedMarker = _objectSpread2(_objectSpread2({}, marker), newData);
+
+      setMarker(updatedMarker);
+      return updatedMarker;
+    };
+
+    var getEventHandlerData = function getEventHandlerData(event) {
+      var _markerRef$current;
+
+      var newPosition = getCoordsFromEvent(event);
+      return {
+        marker: markerHasEqualPosition(marker === null || marker === void 0 ? void 0 : marker.position, newPosition) ? marker : updateMarker({
+          position: newPosition
+        }),
+        prevMarker: marker,
+        instance: (_markerRef$current = markerRef.current) === null || _markerRef$current === void 0 ? void 0 : _markerRef$current.marker
+      };
+    };
+
     var markerProps = {
+      ref: markerRef,
       position: position,
       draggable: isDraggable || !readOnly,
       icon: icon,
-      onClick: function onClick(eventData) {
-        return _onClick(markerData, eventData);
+      onLoad: function onLoad(instance) {
+        return _onLoad({
+          prevMarker: marker,
+          instance: instance
+        });
+      },
+      onClick: function onClick(event) {
+        return _onClick(getEventHandlerData(event));
       },
-      onDragEnd: function onDragEnd(eventData) {
-        return _onDragEnd(markerData, eventData);
+      onDrag: function onDrag(event) {
+        return _onDrag(event);
       },
-      onDragStart: function onDragStart(eventData) {
-        return _onDragStart(markerData, eventData);
+      onDragEnd: function onDragEnd(event) {
+        return _onDragEnd(getEventHandlerData(event));
+      },
+      onDragStart: function onDragStart(event) {
+        return _onDragStart(getEventHandlerData(event));
       },
       onMouseOver: function onMouseOver() {
         return openInfoWindow();
@@ -16058,7 +16124,11 @@
     }, infoWindowChildren()));
   };
 
-  var Marker$1 = /*#__PURE__*/React__default["default"].memo(Marker);
+  var Marker$1 = /*#__PURE__*/React__default["default"].memo(Marker, function (prev, next) {
+    var serializedPrev = JSON.stringify(prev);
+    var serializedNext = JSON.stringify(next);
+    return serializedPrev === serializedNext;
+  });
 
   var Markers = function Markers(_ref) {
     var _ref$readOnly = _ref.readOnly,
@@ -16069,10 +16139,12 @@
         markerOptions = _ref$markerOptions === void 0 ? {} : _ref$markerOptions;
     if (!markers.length) return null;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, markers.map(function (marker, idx) {
+      var _marker$position, _marker$position2;
+
       return /*#__PURE__*/React__default["default"].createElement(Marker$1, {
         markerData: _objectSpread2({}, marker),
         markerOptions: markerOptions,
-        key: idx,
+        key: "".concat(idx.toString(), "-").concat(marker === null || marker === void 0 ? void 0 : (_marker$position = marker.position) === null || _marker$position === void 0 ? void 0 : _marker$position.lat, "-").concat(marker === null || marker === void 0 ? void 0 : (_marker$position2 = marker.position) === null || _marker$position2 === void 0 ? void 0 : _marker$position2.lng),
         readOnly: readOnly,
         markerIdx: idx
       });