@janiscommerce/ui-web 0.32.0 → 0.34.0

package/CHANGELOG.md

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

package/dist/index.esm.js

@@ -15937,6 +15937,28 @@ var InfoWindow = function InfoWindow(_ref) {
   }, 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,
@@ -15945,29 +15967,40 @@ var Marker = function Marker(_ref) {
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly;
 
-  var _ref2 = markerData || {},
+  var _useState = 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 = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      infoWindowOpen = _useState2[0],
-      setInfoWindowOpen = _useState2[1];
+  var markerRef = useRef(null);
 
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      mouseOverInfoWindow = _useState4[0],
-      setMouseOverInfoWindow = _useState4[1];
+      infoWindowOpen = _useState4[0],
+      setInfoWindowOpen = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      mouseOverInfoWindow = _useState6[0],
+      setMouseOverInfoWindow = _useState6[1];
 
   var openInfoWindow = function openInfoWindow() {
     return setInfoWindowOpen(true);
@@ -15980,18 +16013,51 @@ var Marker = function Marker(_ref) {
   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();
@@ -16032,7 +16098,11 @@ var Marker = function Marker(_ref) {
   }, infoWindowChildren()));
 };
 
-var Marker$1 = /*#__PURE__*/React__default.memo(Marker);
+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,
@@ -16043,10 +16113,12 @@ var Markers = function Markers(_ref) {
       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) {
+    var _marker$position, _marker$position2;
+
     return /*#__PURE__*/React__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
     });