awing-library 2.1.198-dev → 2.1.199-dev

package/lib/ACM-AXN/GeoFencing/component.js

@@ -55,6 +55,6 @@ function Component(props) {
                                         }
                                     }, error: !!(radius &&
                                         Number(radius) <
-                                            ((limit === null || limit === void 0 ? void 0 : limit.min) || constants_1.MIN_RADIUS)) }) })] })), (isOnlyMap || showMap) && ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, style: { position: "relative", marginTop: "16px" }, children: (0, jsx_runtime_1.jsx)(AWING_1.GoogleMap, { onUpdateLocation: onGoongMapSelect, apiKey: configs.GOOGLE_MAP_KEY, geofenceRadius: radius ? Number(radius) : 0 }) }))] })] }));
+                                            ((limit === null || limit === void 0 ? void 0 : limit.min) || constants_1.MIN_RADIUS)) }) })] })), (isOnlyMap || showMap) && ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, style: { position: "relative", marginTop: "16px" }, children: (0, jsx_runtime_1.jsx)(AWING_1.GoogleMap, { defaultLocation: { lat: (marker === null || marker === void 0 ? void 0 : marker.latitude) || 0, lng: (marker === null || marker === void 0 ? void 0 : marker.longitude) || 0 }, onUpdateLocation: onGoongMapSelect, apiKey: configs.GOOGLE_MAP_KEY, geofenceRadius: radius ? Number(radius) : 0 }) }))] })] }));
 }
 exports.default = Component;

package/lib/AWING/GoogleMap/GGMap.d.ts

@@ -1,3 +1,3 @@
 import { IGoogleMapProps } from './interface';
-declare const GGMap: ({ defaultLocation, onUpdateLocation, apiKey, geofenceRadius, sizeMap, sxMap, isDisplayAutoComplete, isTypeTracking, markerPositions, zoomCustomed }: IGoogleMapProps) => import("react/jsx-runtime").JSX.Element;
+declare const GGMap: ({ defaultLocation, onUpdateLocation, apiKey, geofenceRadius, sxMap, isDisplayAutoComplete, isTypeTracking, markerPositions, zoomCustomed }: IGoogleMapProps) => import("react/jsx-runtime").JSX.Element;
 export default GGMap;

package/lib/AWING/GoogleMap/GGMap.js

@@ -3,16 +3,28 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -22,7 +34,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var api_1 = require("@react-google-maps/api");
 var lodash_1 = __importDefault(require("lodash"));
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var react_i18next_1 = require("react-i18next");
 var utils_1 = require("./utils");
 var mapContainerStyle = {
@@ -39,12 +51,13 @@ var stylesDefault = {
     }
 };
 var GGMap = function (_a) {
-    var defaultLocation = _a.defaultLocation, onUpdateLocation = _a.onUpdateLocation, apiKey = _a.apiKey, geofenceRadius = _a.geofenceRadius, sizeMap = _a.sizeMap, sxMap = _a.sxMap, _b = _a.isDisplayAutoComplete, isDisplayAutoComplete = _b === void 0 ? false : _b, _c = _a.isTypeTracking, isTypeTracking = _c === void 0 ? false : _c, markerPositions = _a.markerPositions, zoomCustomed = _a.zoomCustomed;
+    var defaultLocation = _a.defaultLocation, onUpdateLocation = _a.onUpdateLocation, apiKey = _a.apiKey, geofenceRadius = _a.geofenceRadius, sxMap = _a.sxMap, _b = _a.isDisplayAutoComplete, isDisplayAutoComplete = _b === void 0 ? false : _b, _c = _a.isTypeTracking, isTypeTracking = _c === void 0 ? false : _c, markerPositions = _a.markerPositions, zoomCustomed = _a.zoomCustomed;
     var t = (0, react_i18next_1.useTranslation)().t;
     var _d = (0, react_1.useState)(), map = _d[0], setMap = _d[1];
     var _e = (0, react_1.useState)(''), error = _e[0], setError = _e[1];
     var autocompleteRef = (0, react_1.useRef)(null);
     var boxRef = (0, react_1.useRef)(null);
+    var makerRefs = (0, react_1.useRef)([]);
     var _f = (0, react_1.useState)(zoomCustomed || 5), zoom = _f[0], setZoom = _f[1];
     var onLoad = function (autocomplete) {
         autocompleteRef.current = autocomplete;
@@ -62,9 +75,13 @@ var GGMap = function (_a) {
             }
             return acc;
         }, {})) !== null && _a !== void 0 ? _a : {};
+        return Object.values(coordMap).map(function (item, index, arr) {
+            var _a;
+            item.radius = ((_a = item.count) !== null && _a !== void 0 ? _a : 0) / arr.reduce(function (acc, item) { var _a; return acc + ((_a = item === null || item === void 0 ? void 0 : item.count) !== null && _a !== void 0 ? _a : 0); }, 0) * (Math.pow(2, 10 - (zoom))) * 10000;
+            return item;
+        });
         // Convert the object to an array
-        return Object.values(coordMap);
-    }, [markerPositions]);
+    }, [markerPositions, zoom]);
     var onPlaceChanged = function () {
         var _a, _b, _c, _d;
         if (autocompleteRef.current !== null) {
@@ -84,9 +101,9 @@ var GGMap = function (_a) {
             console.log('Autocomplete is not loaded yet!');
         }
     };
-    var onLoadMap = function (mapInstance) {
+    var onLoadMap = react_1.default.useCallback(function (mapInstance) {
         setMap(mapInstance);
-    };
+    }, []);
     //Lấy vị trí hiện tại của người dùng
     var getCurrentLocation = function () {
         var showPosition = function (position) {
@@ -118,21 +135,43 @@ var GGMap = function (_a) {
             setError('Geolocation is not supported by this browser.');
         }
     };
-    var onMapClick = function (e) {
+    var onMapClick = react_1.default.useCallback(function (e) {
         var _a, _b, _c, _d;
         onUpdateLocation && onUpdateLocation({
             latitude: (_b = (_a = e === null || e === void 0 ? void 0 : e.latLng) === null || _a === void 0 ? void 0 : _a.lat()) !== null && _b !== void 0 ? _b : 0,
             longitude: (_d = (_c = e === null || e === void 0 ? void 0 : e.latLng) === null || _c === void 0 ? void 0 : _c.lng()) !== null && _d !== void 0 ? _d : 0,
         });
-    };
+    }, []);
     (0, react_1.useEffect)(function () {
         if (lodash_1.default.isNil(defaultLocation) || defaultLocation.lat === 0 || defaultLocation.lng === 0) {
             getCurrentLocation();
         }
     }, [defaultLocation]);
-    var calculateRadius = function (currentZoom) {
-        return Math.max(100000 * Math.pow(2, 5 - (currentZoom / 20)), 250);
-    };
+    (0, react_1.useEffect)(function () {
+        if (map) {
+            makerRefs.current.forEach(function (marker) {
+                marker.setMap(null);
+            });
+            makerRefs.current = markerConvert.map(function (item) {
+                var _a, _b;
+                var maker = new google.maps.Circle({
+                    center: { lat: (_a = item.latitude) !== null && _a !== void 0 ? _a : 0, lng: (_b = item.longitude) !== null && _b !== void 0 ? _b : 0 },
+                    radius: item.radius,
+                    strokeColor: '#4285F4',
+                    strokeOpacity: 0.8,
+                    strokeWeight: 2,
+                    fillColor: "#4285F4",
+                    fillOpacity: 0.35,
+                });
+                maker.setMap(map);
+                return maker;
+            });
+        }
+        console.log(markerConvert);
+    }, [markerConvert]);
+    var handleZoom = (0, react_1.useCallback)(function (zoom) {
+        setZoom(zoom);
+    }, []);
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: sxMap ? sxMap : stylesDefault, ref: boxRef, children: (0, jsx_runtime_1.jsxs)(api_1.LoadScript, { googleMapsApiKey: apiKey || '', libraries: libraries, children: [!isDisplayAutoComplete &&
                     ((0, jsx_runtime_1.jsx)(api_1.Autocomplete, { onPlaceChanged: onPlaceChanged, onLoad: onLoad, children: (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: t('Common.PlaceHolderLocation'), onFocus: function () {
                                 var _a;
@@ -156,37 +195,47 @@ var GGMap = function (_a) {
                                 margin: '10px 0',
                                 zIndex: 99,
                                 top: '50px',
-                            } }) })), (0, jsx_runtime_1.jsx)(api_1.GoogleMap, __assign({ id: "map", mapContainerStyle: sizeMap !== null && sizeMap !== void 0 ? sizeMap : mapContainerStyle, zoom: zoom, onZoomChanged: function () {
-                        var _a;
-                        setZoom((_a = map === null || map === void 0 ? void 0 : map.getZoom()) !== null && _a !== void 0 ? _a : zoom);
-                    }, center: defaultLocation, onLoad: onLoadMap, onClick: onMapClick }, isTypeTracking && {
-                    options: {
-                        disableDefaultUI: true,
-                        styles: utils_1.mapStyles,
-                        zoomControl: true,
-                        streetViewControl: false,
-                        mapTypeControl: false,
-                        fullscreenControl: false,
-                        minZoom: 2
-                    }
-                }, { children: !markerPositions ?
-                        (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(api_1.Marker, { position: defaultLocation !== null && defaultLocation !== void 0 ? defaultLocation : { lat: 21.0063107, lng: 105.8279467 } }), (0, jsx_runtime_1.jsx)(api_1.Circle, { center: defaultLocation, radius: geofenceRadius, options: {
-                                        fillColor: 'red',
-                                        fillOpacity: 0.2,
-                                        strokeColor: 'red',
-                                        strokeOpacity: 1,
-                                        strokeWeight: 2,
-                                    } })] })
-                        : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: markerConvert === null || markerConvert === void 0 ? void 0 : markerConvert.map(function (coordinates, index, positions) {
-                                var _a, _b, _c;
-                                return (0, jsx_runtime_1.jsx)(api_1.CircleF, { center: { lat: (_a = coordinates.latitude) !== null && _a !== void 0 ? _a : 0, lng: (_b = coordinates.longitude) !== null && _b !== void 0 ? _b : 0 }, radius: calculateRadius(zoom * ((_c = coordinates === null || coordinates === void 0 ? void 0 : coordinates.count) !== null && _c !== void 0 ? _c : 0)), options: {
-                                        strokeColor: '#4285F4',
-                                        strokeOpacity: 0.8,
-                                        strokeWeight: 2,
-                                        fillColor: "#4285F4",
-                                        fillOpacity: 0.35,
-                                    } }, index);
-                            }) }) }))] }) }));
+                            } }) })), !isTypeTracking ? (0, jsx_runtime_1.jsx)(MaprenderWithoutTracking, { onLoadMap: onLoadMap, onMapClick: onMapClick, onZoomChanged: handleZoom, defaultLocation: defaultLocation !== null && defaultLocation !== void 0 ? defaultLocation : { lat: 21.0063107, lng: 105.8279467 }, geofenceRadius: geofenceRadius !== null && geofenceRadius !== void 0 ? geofenceRadius : 0, zoomCustomed: zoomCustomed !== null && zoomCustomed !== void 0 ? zoomCustomed : 10 }) : (0, jsx_runtime_1.jsx)(Maprender, { onLoadMap: onLoadMap, onMapClick: onMapClick, onZoomChanged: handleZoom })] }) }));
 };
 exports.default = GGMap;
+var Maprender = react_1.default.memo(function (_a) {
+    var onLoadMap = _a.onLoadMap, onMapClick = _a.onMapClick, onZoomChanged = _a.onZoomChanged;
+    var mapInstance = (0, react_1.useRef)(null);
+    return (0, jsx_runtime_1.jsx)(api_1.GoogleMap, { id: "map", mapContainerStyle: { width: "100%", height: "".concat(521, "px") }, zoom: 2, center: {
+            lat: 21.0063107,
+            lng: 105.8279467
+        }, onZoomChanged: function () {
+            var _a, _b;
+            onZoomChanged((_b = (_a = mapInstance.current) === null || _a === void 0 ? void 0 : _a.getZoom()) !== null && _b !== void 0 ? _b : 0);
+        }, onLoad: function (instance) {
+            mapInstance.current = instance;
+            onLoadMap(instance);
+        }, onClick: onMapClick, options: {
+            disableDefaultUI: true,
+            styles: utils_1.mapStyles,
+            zoomControl: true,
+            streetViewControl: false,
+            mapTypeControl: false,
+            fullscreenControl: false,
+            minZoom: 2,
+            maxZoom: 13,
+        } });
+});
+var MaprenderWithoutTracking = react_1.default.memo(function (_a) {
+    var onLoadMap = _a.onLoadMap, onMapClick = _a.onMapClick, onZoomChanged = _a.onZoomChanged, defaultLocation = _a.defaultLocation, geofenceRadius = _a.geofenceRadius, zoomCustomed = _a.zoomCustomed;
+    var mapInstance = (0, react_1.useRef)(null);
+    return (0, jsx_runtime_1.jsx)(api_1.GoogleMap, { id: "map", mapContainerStyle: mapContainerStyle, zoom: zoomCustomed !== null && zoomCustomed !== void 0 ? zoomCustomed : 10, center: defaultLocation, onZoomChanged: function () {
+            var _a, _b;
+            onZoomChanged((_b = (_a = mapInstance.current) === null || _a === void 0 ? void 0 : _a.getZoom()) !== null && _b !== void 0 ? _b : 0);
+        }, onLoad: function (instance) {
+            mapInstance.current = instance;
+            onLoadMap(instance);
+        }, onClick: onMapClick, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(api_1.Marker, { position: defaultLocation !== null && defaultLocation !== void 0 ? defaultLocation : { lat: 21.0063107, lng: 105.8279467 } }), (0, jsx_runtime_1.jsx)(api_1.Circle, { center: defaultLocation, radius: geofenceRadius, options: {
+                        fillColor: 'red',
+                        fillOpacity: 0.2,
+                        strokeColor: 'red',
+                        strokeOpacity: 1,
+                        strokeWeight: 2,
+                    } })] }) });
+});
 var templateObject_1;

package/lib/AWING/GoogleMap/interface.d.ts

@@ -10,10 +10,6 @@ export interface IGoogleMapProps {
     }) => void;
     apiKey: string;
     geofenceRadius?: number;
-    sizeMap?: {
-        height: string;
-        width: string;
-    };
     sxMap?: DataObject;
     isDisplayAutoComplete?: boolean;
     isTypeTracking?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "awing-library",
-    "version": "2.1.198-dev",
+    "version": "2.1.199-dev",
     "description": "",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",