@janiscommerce/ui-web 0.31.0 → 0.33.0

package/dist/index.umd.js

@@ -11256,7 +11256,7 @@
           instance.setZIndex(zIndex);
       },
   };
-  class Marker$1 extends React__namespace.PureComponent {
+  class Marker$2 extends React__namespace.PureComponent {
       constructor() {
           super(...arguments);
           this.registeredEvents = [];
@@ -11323,7 +11323,7 @@
           return children || null;
       }
   }
-  Marker$1.contextType = MapContext;
+  Marker$2.contextType = MapContext;
 
   var ClusterIcon = /** @class */ (function () {
       function ClusterIcon(cluster, styles) {
@@ -15964,15 +15964,28 @@
   };
 
   var Marker = function Marker(_ref) {
-    var markerData = _ref.markerData,
-        readOnly = _ref.readOnly,
-        _ref$setMarkerCallbac = _ref.setMarkerCallback,
-        setMarkerCallback = _ref$setMarkerCallbac === void 0 ? function () {} : _ref$setMarkerCallbac,
-        markerIdx = _ref.markerIdx,
-        schemaMarkerProps = _ref.markerProps;
-
-    var _ref2 = schemaMarkerProps || {},
-        _onClick = _ref2.onClick;
+    var _ref$markerData = _ref.markerData,
+        markerData = _ref$markerData === void 0 ? {} : _ref$markerData,
+        _ref$markerOptions = _ref.markerOptions,
+        markerOptions = _ref$markerOptions === void 0 ? {} : _ref$markerOptions,
+        _ref$readOnly = _ref.readOnly,
+        readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly;
+
+    var _ref2 = markerData || {},
+        icon = _ref2.icon,
+        position = _ref2.position,
+        overlay = _ref2.overlay,
+        infoWindowChildren = _ref2.infoWindowChildren,
+        isDraggable = _ref2.isDraggable;
+
+    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;
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -15995,31 +16008,29 @@
     var delayedInfoWindowHover = debounce(function () {
       if (!mouseOverInfoWindow) closeInfoWindow();
     }, 100);
-
-    var markerHandles = _objectSpread2(_objectSpread2({}, _onClick && {
-      onClick: function onClick() {
-        return _onClick(markerData);
-      }
-    }), {}, {
+    var markerProps = {
+      position: position,
+      draggable: isDraggable || !readOnly,
+      icon: icon,
+      onLoad: function onLoad(markerInstance) {
+        return _onLoad(markerData, markerInstance);
+      },
+      onClick: function onClick(eventData) {
+        return _onClick(markerData, eventData);
+      },
+      onDragEnd: function onDragEnd(eventData) {
+        return _onDragEnd(markerData, eventData);
+      },
+      onDragStart: function onDragStart(eventData) {
+        return _onDragStart(markerData, eventData);
+      },
       onMouseOver: function onMouseOver() {
         return openInfoWindow();
       },
       onMouseOut: function onMouseOut() {
         return delayedInfoWindowHover();
       }
-    });
-
-    var markerProps = _objectSpread2(_objectSpread2({
-      position: markerData.position,
-      draggable: !readOnly,
-      onDragEnd: function onDragEnd(_ref3) {
-        var latLng = _ref3.latLng;
-        return setMarkerCallback(latLng, markerIdx, markerData);
-      }
-    }, _objectSpread2({}, markerHandles)), {}, {
-      icon: markerData.icon
-    });
-
+    };
     var infoWindowHandles = {
       onMouseEnter: function onMouseEnter() {
         delayedInfoWindowHover.cancel();
@@ -16038,35 +16049,43 @@
       };
     };
 
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Marker$1, markerProps), markerData.overlay && /*#__PURE__*/React__default["default"].createElement(OverlayView, {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Marker$2, markerProps), overlay && /*#__PURE__*/React__default["default"].createElement(OverlayView, {
       className: "google-map-component__overlay-view",
-      position: markerData.position,
+      position: position,
       mapPaneName: OverlayView.OVERLAY_MOUSE_TARGET,
       getPixelPositionOffset: function getPixelPositionOffset(width) {
         return _getPixelPositionOffset(width);
       }
-    }, markerData.overlay()), infoWindowOpen && markerData.infoWindowChildren && /*#__PURE__*/React__default["default"].createElement(InfoWindow, {
+    }, overlay()), infoWindowOpen && infoWindowChildren && /*#__PURE__*/React__default["default"].createElement(InfoWindow, {
       className: "google-map-component__info-window",
-      data: markerData.position,
+      data: position,
       infoWindowHandles: infoWindowHandles
-    }, markerData.infoWindowChildren()));
+    }, infoWindowChildren()));
   };
 
+  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,
-        readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-        _ref$setMarker = _ref.setMarker,
-        setMarker = _ref$setMarker === void 0 ? function () {} : _ref$setMarker,
+        readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly,
         _ref$markers = _ref.markers,
-        markers = _ref$markers === void 0 ? [] : _ref$markers;
+        markers = _ref$markers === void 0 ? [] : _ref$markers,
+        _ref$markerOptions = _ref.markerOptions,
+        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) {
-      return /*#__PURE__*/React__default["default"].createElement(Marker, {
+      var _marker$position, _marker$position2;
+
+      return /*#__PURE__*/React__default["default"].createElement(Marker$1, {
         markerData: _objectSpread2({}, marker),
-        key: idx,
+        markerOptions: markerOptions,
+        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,
-        setMarkerCallback: setMarker
+        markerIdx: idx
       });
     }));
   };
@@ -16074,16 +16093,16 @@
   var Route = function Route(_ref) {
     var _ref$routeData = _ref.routeData,
         routeData = _ref$routeData === void 0 ? {} : _ref$routeData,
+        _ref$markerOptions = _ref.markerOptions,
+        markerOptions = _ref$markerOptions === void 0 ? {} : _ref$markerOptions,
         _ref$readOnly = _ref.readOnly,
-        readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-        _ref$setMarker = _ref.setMarker,
-        setMarker = _ref$setMarker === void 0 ? function () {} : _ref$setMarker;
+        readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly;
     var _routeData$polylines = routeData.polylines,
         polylines = _routeData$polylines === void 0 ? [] : _routeData$polylines;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Markers, {
       readOnly: readOnly,
-      setMarker: setMarker,
-      markers: routeData.points
+      markers: routeData.points,
+      markerOptions: markerOptions
     }), /*#__PURE__*/React__default["default"].createElement(Polyline, {
       path: polylines,
       options: routeData.polylineOptions
@@ -16093,10 +16112,10 @@
   var MarkersDrawer = function MarkersDrawer(_ref) {
     var _ref$markers = _ref.markers,
         markers = _ref$markers === void 0 ? [] : _ref$markers,
+        _ref$markerOptions = _ref.markerOptions,
+        markerOptions = _ref$markerOptions === void 0 ? {} : _ref$markerOptions,
         _ref$readOnly = _ref.readOnly,
         readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly,
-        _ref$setMarker = _ref.setMarker,
-        setMarker = _ref$setMarker === void 0 ? function () {} : _ref$setMarker,
         _ref$callbackOnSucces = _ref.callbackOnSuccessDirections,
         callbackOnSuccessDirections = _ref$callbackOnSucces === void 0 ? function () {} : _ref$callbackOnSucces,
         _ref$callbackOnErrorD = _ref.callbackOnErrorDirections,
@@ -16104,8 +16123,7 @@
         _ref$googleMapsApiKey = _ref.googleMapsApiKey,
         googleMapsApiKey = _ref$googleMapsApiKey === void 0 ? '' : _ref$googleMapsApiKey;
     var commonProps = {
-      readOnly: readOnly,
-      setMarker: setMarker
+      readOnly: readOnly
     };
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, markers.map(function (marker, idx) {
       var _marker$polylines;
@@ -16114,13 +16132,15 @@
         key: "".concat(idx.toString())
       }, commonProps, {
         routeData: marker,
+        markerOptions: markerOptions,
         callbackOnSuccessDirections: callbackOnSuccessDirections,
         callbackOnErrorDirections: callbackOnErrorDirections,
         googleMapsApiKey: googleMapsApiKey
       })) : /*#__PURE__*/React__default["default"].createElement(Markers, _extends$1({
         key: "".concat(idx.toString())
       }, commonProps, {
-        markers: marker.points
+        markers: marker.points,
+        markerOptions: markerOptions
       }));
     }));
   };
@@ -35430,7 +35450,7 @@
     })));
   };
 
-  var _excluded = ["googleMapsApiKey", "width", "height", "center", "zoom", "markers", "options", "callbackOnSuccessDirections", "callbackOnErrorDirections"];
+  var _excluded = ["googleMapsApiKey", "width", "height", "center", "zoom", "markers", "markerOptions", "options", "callbackOnSuccessDirections", "callbackOnErrorDirections"];
 
   var Map$1 = function Map(_ref) {
     var _mapRef$current;
@@ -35447,6 +35467,8 @@
         zoom = _ref$zoom === void 0 ? 13 : _ref$zoom,
         _ref$markers = _ref.markers,
         markers = _ref$markers === void 0 ? [] : _ref$markers,
+        _ref$markerOptions = _ref.markerOptions,
+        markerOptions = _ref$markerOptions === void 0 ? {} : _ref$markerOptions,
         _ref$options = _ref.options,
         options = _ref$options === void 0 ? {} : _ref$options,
         _ref$callbackOnSucces = _ref.callbackOnSuccessDirections,
@@ -35511,6 +35533,7 @@
       className: "google-map-component__search-box"
     }), validMarkersExist && /*#__PURE__*/React__default["default"].createElement(MarkersDrawer, {
       markers: markers,
+      markerOptions: markerOptions,
       readOnly: mapOptions.readOnly,
       callbackOnSuccessDirections: callbackOnSuccessDirections,
       callbackOnErrorDirections: callbackOnErrorDirections,