@janiscommerce/ui-web 0.31.0 → 0.33.0

package/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [0.33.0] - 2025-04-10
+
+### Added
+
+- Memo for markers
+- OnLoad cb on markers
+
+## [0.32.0] - 2025-04-03
+
+### Added
+
+- markerOptions in map component
+
 ## [0.31.0] - 2025-03-14
 
 ### Added

package/dist/index.esm.js

@@ -11230,7 +11230,7 @@ const updaterMap$f = {
         instance.setZIndex(zIndex);
     },
 };
-class Marker$1 extends React.PureComponent {
+class Marker$2 extends React.PureComponent {
     constructor() {
         super(...arguments);
         this.registeredEvents = [];
@@ -11297,7 +11297,7 @@ class Marker$1 extends React.PureComponent {
         return children || null;
     }
 }
-Marker$1.contextType = MapContext;
+Marker$2.contextType = MapContext;
 
 var ClusterIcon = /** @class */ (function () {
     function ClusterIcon(cluster, styles) {
@@ -15938,15 +15938,28 @@ var InfoWindow = function InfoWindow(_ref) {
 };
 
 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 = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -15969,31 +15982,29 @@ var Marker = function Marker(_ref) {
   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();
@@ -16012,35 +16023,43 @@ var Marker = function Marker(_ref) {
     };
   };
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Marker$1, markerProps), markerData.overlay && /*#__PURE__*/React__default.createElement(OverlayView, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Marker$2, markerProps), overlay && /*#__PURE__*/React__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.createElement(InfoWindow, {
+  }, overlay()), infoWindowOpen && infoWindowChildren && /*#__PURE__*/React__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.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.createElement(React__default.Fragment, null, markers.map(function (marker, idx) {
-    return /*#__PURE__*/React__default.createElement(Marker, {
+    var _marker$position, _marker$position2;
+
+    return /*#__PURE__*/React__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
     });
   }));
 };
@@ -16048,16 +16067,16 @@ var Markers = function Markers(_ref) {
 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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Markers, {
     readOnly: readOnly,
-    setMarker: setMarker,
-    markers: routeData.points
+    markers: routeData.points,
+    markerOptions: markerOptions
   }), /*#__PURE__*/React__default.createElement(Polyline, {
     path: polylines,
     options: routeData.polylineOptions
@@ -16067,10 +16086,10 @@ var Route = function Route(_ref) {
 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,
@@ -16078,8 +16097,7 @@ var MarkersDrawer = function MarkersDrawer(_ref) {
       _ref$googleMapsApiKey = _ref.googleMapsApiKey,
       googleMapsApiKey = _ref$googleMapsApiKey === void 0 ? '' : _ref$googleMapsApiKey;
   var commonProps = {
-    readOnly: readOnly,
-    setMarker: setMarker
+    readOnly: readOnly
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, markers.map(function (marker, idx) {
     var _marker$polylines;
@@ -16088,13 +16106,15 @@ var MarkersDrawer = function MarkersDrawer(_ref) {
       key: "".concat(idx.toString())
     }, commonProps, {
       routeData: marker,
+      markerOptions: markerOptions,
       callbackOnSuccessDirections: callbackOnSuccessDirections,
       callbackOnErrorDirections: callbackOnErrorDirections,
       googleMapsApiKey: googleMapsApiKey
     })) : /*#__PURE__*/React__default.createElement(Markers, _extends$1({
       key: "".concat(idx.toString())
     }, commonProps, {
-      markers: marker.points
+      markers: marker.points,
+      markerOptions: markerOptions
     }));
   }));
 };
@@ -35404,7 +35424,7 @@ var SearchBox = function SearchBox(_ref) {
   })));
 };
 
-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;
@@ -35421,6 +35441,8 @@ var Map$1 = function Map(_ref) {
       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,
@@ -35485,6 +35507,7 @@ var Map$1 = function Map(_ref) {
     className: "google-map-component__search-box"
   }), validMarkersExist && /*#__PURE__*/React__default.createElement(MarkersDrawer, {
     markers: markers,
+    markerOptions: markerOptions,
     readOnly: mapOptions.readOnly,
     callbackOnSuccessDirections: callbackOnSuccessDirections,
     callbackOnErrorDirections: callbackOnErrorDirections,