@cashub/ui 0.19.0 → 0.19.1

package/map/GoogleMap.js

@@ -365,6 +365,13 @@ var Map = function Map(_ref3) {
 
         if (edit) {
           circle.addListener('radius_changed', function () {
+            var radius = circle.getRadius();
+
+            if (geoFenceOptions.minRadius && radius < geoFenceOptions.minRadius) {
+              circle.setRadius(geoFenceOptions.minRadius);
+              return;
+            }
+
             edit(circle.getRadius());
           });
         }
@@ -383,7 +390,7 @@ var Map = function Map(_ref3) {
         window.google.maps.event.clearListeners(circle, 'center_changed');
       };
     }
-  }, [map, geoFence, geoFenceOptions.latitude, geoFenceOptions.longitude, geoFenceOptions.radius, geoFenceOptions.editable, geoFenceOptions.eventHandlers]);
+  }, [map, geoFence, geoFenceOptions.latitude, geoFenceOptions.longitude, geoFenceOptions.radius, geoFenceOptions.minRadius, geoFenceOptions.editable, geoFenceOptions.eventHandlers]);
   (0, _react.useEffect)(function () {
     if (ref.current && !map) {
       setMap(new window.google.maps.Map(ref.current, {}));

package/map/LeafletMap.js

@@ -19,6 +19,8 @@ require("react-leaflet-markercluster/dist/styles.min.css");
 
 var _LeafletMapContainer = _interopRequireDefault(require("./subComponent/LeafletMapContainer"));
 
+var _LeafletDrawControl = _interopRequireDefault(require("./subComponent/LeafletDrawControl"));
+
 var _map_icon = _interopRequireDefault(require("../assets/icons/map_icon1.png"));
 
 var _map_icon2 = _interopRequireDefault(require("../assets/icons/map_icon4.png"));
@@ -50,6 +52,10 @@ var LeafletMap = function LeafletMap(_ref) {
     position: null,
     locations: []
   } : _ref$data,
+      _ref$geoFence = _ref.geoFence,
+      geoFence = _ref$geoFence === void 0 ? false : _ref$geoFence,
+      _ref$geoFenceOptions = _ref.geoFenceOptions,
+      geoFenceOptions = _ref$geoFenceOptions === void 0 ? {} : _ref$geoFenceOptions,
       onError = _ref.onError,
       customPopup = _ref.customPopup,
       checkPrimaryLocation = _ref.checkPrimaryLocation,
@@ -75,11 +81,46 @@ var LeafletMap = function LeafletMap(_ref) {
       markers = _useState8[0],
       setMarkers = _useState8[1];
 
+  var drawControlRef = (0, _react.useRef)();
   var handleError = (0, _react.useCallback)(function (errorCode) {
     if (onError) {
       onError(errorCode);
     }
   }, [onError]);
+  var handleMountedDrawControl = (0, _react.useCallback)(function (control) {
+    drawControlRef.current = control;
+
+    if (geoFenceOptions.editable) {
+      drawControlRef.current.enableEdit();
+    }
+  }, [geoFenceOptions.editable]);
+  var handleEditResizeDraw = (0, _react.useCallback)(function (event) {
+    var minRadius = geoFenceOptions.minRadius,
+        eventHandlers = geoFenceOptions.eventHandlers;
+    var radius = event.layer.getRadius();
+
+    if (minRadius && radius < minRadius) {
+      event.layer.setRadius(minRadius);
+      return;
+    }
+
+    var tooltips = event.target._panes.popupPane.getElementsByClassName('leaflet-draw-tooltip');
+
+    for (var index = 0; index < tooltips.length; index += 1) {
+      tooltips[index].textContent = "Radius: ".concat(parseInt(radius, 10));
+    }
+
+    if (eventHandlers.edit) {
+      eventHandlers.edit(radius);
+    }
+  }, [geoFenceOptions]);
+  var handleEditMoveDraw = (0, _react.useCallback)(function (event) {
+    var eventHandlers = geoFenceOptions.eventHandlers;
+
+    if (eventHandlers.drag) {
+      eventHandlers.drag(event.layer.getLatLng());
+    }
+  }, [geoFenceOptions]);
   (0, _react.useEffect)(function () {
     var defaultPosition = data.defaultPosition,
         position = data.position,
@@ -144,6 +185,11 @@ var LeafletMap = function LeafletMap(_ref) {
     setValidBound(bounds);
     setMarkers(markers);
   }, [data, handleError, customPopup, checkPrimaryLocation]);
+  (0, _react.useEffect)(function () {
+    if (drawControlRef.current && geoFenceOptions.editable) {
+      drawControlRef.current.enableEdit();
+    }
+  }, [geoFenceOptions.editable]);
 
   if (!hasError) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_LeafletMapContainer.default, {
@@ -176,6 +222,25 @@ var LeafletMap = function LeafletMap(_ref) {
           });
         },
         children: markers
+      }), geoFence && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactLeaflet.FeatureGroup, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LeafletDrawControl.default, {
+          draw: false,
+          edit: {
+            edit: false,
+            remove: false
+          },
+          onMounted: handleMountedDrawControl,
+          onEditResize: handleEditResizeDraw,
+          onEditMove: handleEditMoveDraw
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactLeaflet.Circle, {
+          center: [geoFenceOptions.latitude, geoFenceOptions.longitude],
+          radius: geoFenceOptions.radius,
+          pathOptions: {
+            stroke: false,
+            fillColor: 'var(--color-primary)',
+            fillOpacity: 0.5
+          }
+        })]
       }), children]
     });
   }

package/map/{DrawControl.js → subComponent/LeafletDrawControl.js}

@@ -62,7 +62,7 @@ _leaflet.default.drawLocal.edit.handlers.edit.tooltip = {
   subtext: null
 };
 
-var DrawControl = function DrawControl(props) {
+var LeafletDrawControl = function LeafletDrawControl(props) {
   var _useLeafletContext = (0, _core.useLeafletContext)(),
       map = _useLeafletContext.map,
       layerContainer = _useLeafletContext.layerContainer;
@@ -160,5 +160,5 @@ var createDrawElement = function createDrawElement(props, layerContainer) {
   return new _leaflet.Control.Draw(options);
 };
 
-var _default = DrawControl;
+var _default = LeafletDrawControl;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",