awing-library 2.1.185-dev → 2.1.187-dev

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

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

package/lib/AWING/GoogleMap/GGMap.js

@@ -1,4 +1,15 @@
 "use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,20 +20,27 @@ var api_1 = require("@react-google-maps/api");
 var lodash_1 = __importDefault(require("lodash"));
 var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
+var utils_1 = require("./utils");
 var mapContainerStyle = {
     height: '320px',
     width: '100%',
 };
 var libraries = ['places'];
+var stylesDefault = {
+    position: 'relative',
+    '& .pac-container.pac-logo': {
+        top: "55px!important",
+        left: "0!important",
+    }
+};
 var GGMap = function (_a) {
-    var _b, _c;
-    var defaultLocation = _a.defaultLocation, onUpdateLocation = _a.onUpdateLocation, apiKey = _a.apiKey, markerPosition = _a.markerPosition, geofenceRadius = _a.geofenceRadius;
+    var defaultLocation = _a.defaultLocation, onUpdateLocation = _a.onUpdateLocation, apiKey = _a.apiKey, markerPosition = _a.markerPosition, 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 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 _f = (0, react_1.useState)(15), zoom = _f[0], setZoom = _f[1];
+    var _f = (0, react_1.useState)(zoomCustomed || 0), zoom = _f[0], setZoom = _f[1];
     var onLoad = function (autocomplete) {
         autocompleteRef.current = autocomplete;
     };
@@ -33,7 +51,7 @@ var GGMap = function (_a) {
             if (place.geometry) {
                 var newLat = (_b = (_a = place === null || place === void 0 ? void 0 : place.geometry) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.lat();
                 var newLng = (_d = (_c = place === null || place === void 0 ? void 0 : place.geometry) === null || _c === void 0 ? void 0 : _c.location) === null || _d === void 0 ? void 0 : _d.lng();
-                onUpdateLocation({
+                onUpdateLocation && onUpdateLocation({
                     latitude: newLat !== null && newLat !== void 0 ? newLat : 0,
                     longitude: newLng !== null && newLng !== void 0 ? newLng : 0,
                 });
@@ -48,41 +66,10 @@ var GGMap = function (_a) {
     var onLoadMap = function (mapInstance) {
         setMap(mapInstance);
     };
-    //Lấy geo fencing
-    // const getDistance = (
-    //     lat1: number,
-    //     lon1: number,
-    //     lat2: number,
-    //     lon2: number
-    // ) => {
-    //     const R = 6371e3; // Radius of the Earth in meters
-    //     const φ1 = (lat1 * Math.PI) / 180;
-    //     const φ2 = (lat2 * Math.PI) / 180;
-    //     const Δφ = ((lat2 - lat1) * Math.PI) / 180;
-    //     const Δλ = ((lon2 - lon1) * Math.PI) / 180;
-    //     const a =
-    //         Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
-    //         Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
-    //     const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-    //     const distance = R * c; // Distance in meters
-    //     return distance;
-    // };
     //Lấy vị trí hiện tại của người dùng
     var getCurrentLocation = function () {
-        var handleLocationGeoFencing = function (position) {
-            var userLat = position.coords.latitude;
-            var userLng = position.coords.longitude;
-            // const distance = getDistance(
-            //     userLat,
-            //     userLng,
-            //     markerPosition.lat,
-            //     markerPosition.lng
-            // );
-            // console.log("distance", distance);
-        };
         var showPosition = function (position) {
-            handleLocationGeoFencing(position);
-            onUpdateLocation({
+            onUpdateLocation && onUpdateLocation({
                 latitude: position.coords.latitude,
                 longitude: position.coords.longitude,
             });
@@ -112,7 +99,7 @@ var GGMap = function (_a) {
     };
     var onMapClick = function (e) {
         var _a, _b, _c, _d;
-        onUpdateLocation({
+        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,
         });
@@ -122,41 +109,64 @@ var GGMap = function (_a) {
             getCurrentLocation();
         }
     }, [defaultLocation]);
-    var marker = { lat: (_b = Number(markerPosition === null || markerPosition === void 0 ? void 0 : markerPosition.latitude)) !== null && _b !== void 0 ? _b : 0, lng: (_c = Number(markerPosition === null || markerPosition === void 0 ? void 0 : markerPosition.longitude)) !== null && _c !== void 0 ? _c : 0 };
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-            position: 'relative',
-            '& .pac-container.pac-logo': {
-                top: "55px!important",
-                left: "0!important",
-            }
-        }, ref: boxRef, children: (0, jsx_runtime_1.jsxs)(api_1.LoadScript, { googleMapsApiKey: apiKey || '', libraries: libraries, children: [(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;
-                            var ggSuggest = document.querySelector('.pac-container.pac-logo');
-                            if (ggSuggest) {
-                                (_a = boxRef.current) === null || _a === void 0 ? void 0 : _a.append(ggSuggest);
-                            }
-                        }, style: {
-                            boxSizing: "border-box",
-                            border: "1px solid transparent",
-                            width: "378px",
-                            height: "40px",
-                            padding: "0 12px",
-                            borderRadius: "3px",
-                            boxShadow: "0 2px 6px rgba(0, 0, 0, 0.3)",
-                            fontSize: "14px",
-                            outline: "none",
-                            textOverflow: "ellipses",
-                            position: 'inherit',
-                            right: '3%',
-                            margin: '10px 0',
-                            zIndex: 99,
-                            top: '50px',
-                        } }) }), (0, jsx_runtime_1.jsx)(api_1.GoogleMap, { id: "map", mapContainerStyle: mapContainerStyle, zoom: zoom, center: marker, onLoad: onLoadMap, onClick: onMapClick, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(api_1.Marker, { position: marker }), (0, jsx_runtime_1.jsx)(api_1.Circle, { center: marker, radius: geofenceRadius, options: {
-                                    fillColor: 'red',
-                                    fillOpacity: 0.2,
-                                    strokeColor: 'red',
-                                    strokeOpacity: 1,
-                                    strokeWeight: 2,
-                                } })] }) })] }) }));
+    var marker = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        return {
+            lat: (_a = Number(markerPosition === null || markerPosition === void 0 ? void 0 : markerPosition.latitude)) !== null && _a !== void 0 ? _a : 0,
+            lng: (_b = Number(markerPosition === null || markerPosition === void 0 ? void 0 : markerPosition.longitude)) !== null && _b !== void 0 ? _b : 0,
+        };
+    }, [markerPosition]);
+    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;
+                                var ggSuggest = document.querySelector('.pac-container.pac-logo');
+                                if (ggSuggest) {
+                                    (_a = boxRef.current) === null || _a === void 0 ? void 0 : _a.append(ggSuggest);
+                                }
+                            }, style: {
+                                boxSizing: "border-box",
+                                border: "1px solid transparent",
+                                width: "378px",
+                                height: "40px",
+                                padding: "0 12px",
+                                borderRadius: "3px",
+                                boxShadow: "0 2px 6px rgba(0, 0, 0, 0.3)",
+                                fontSize: "14px",
+                                outline: "none",
+                                textOverflow: "ellipses",
+                                position: 'inherit',
+                                right: '3%',
+                                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, center: marker, onLoad: onLoadMap, onClick: onMapClick }, isTypeTracking && {
+                    options: {
+                        disableDefaultUI: true,
+                        styles: utils_1.mapStyles,
+                        zoomControl: true,
+                        streetViewControl: false,
+                        mapTypeControl: false,
+                        fullscreenControl: false,
+                    }
+                }, { children: !markerPositions ?
+                        (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(api_1.Marker, { position: marker }), (0, jsx_runtime_1.jsx)(api_1.Circle, { center: marker, radius: geofenceRadius, options: {
+                                        fillColor: 'red',
+                                        fillOpacity: 0.2,
+                                        strokeColor: 'red',
+                                        strokeOpacity: 1,
+                                        strokeWeight: 2,
+                                    } })] })
+                        : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: markerPositions === null || markerPositions === void 0 ? void 0 : markerPositions.map(function (coordinates, index, positions) {
+                                var _a, _b;
+                                // const radius =
+                                //     Math.max(
+                                //         30,
+                                //         (coordinates.count /
+                                //             Math.max(...positions.map((p) => p.count))) *
+                                //         120
+                                //     ) *
+                                //     (1 / 7);
+                                return (0, jsx_runtime_1.jsx)(api_1.Marker, { position: { lat: (_a = coordinates.latitude) !== null && _a !== void 0 ? _a : 0, lng: (_b = coordinates.longitude) !== null && _b !== void 0 ? _b : 0 } }, index);
+                            }) }) }))] }) }));
 };
 exports.default = GGMap;

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

@@ -1,3 +1,4 @@
+import { DataObject } from "../../AWING/interface";
 export interface IGoogleMapProps {
     defaultLocation?: {
         lat: number;
@@ -7,10 +8,22 @@ export interface IGoogleMapProps {
         latitude: number;
         longitude: number;
     };
-    onUpdateLocation: (newValue: {
+    onUpdateLocation?: (newValue: {
         latitude: number;
         longitude: number;
     }) => void;
     apiKey: string;
     geofenceRadius?: number;
+    sizeMap?: {
+        height: string;
+        width: string;
+    };
+    sxMap?: DataObject;
+    isDisplayAutoComplete?: boolean;
+    isTypeTracking?: boolean;
+    markerPositions?: {
+        longitude: number | null;
+        latitude: number | null;
+    }[];
+    zoomCustomed?: number;
 }

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

@@ -0,0 +1,25 @@
+export declare const mapStyles: ({
+    elementType: string;
+    stylers: {
+        color: string;
+    }[];
+    featureType?: undefined;
+} | {
+    elementType: string;
+    stylers: {
+        visibility: string;
+    }[];
+    featureType?: undefined;
+} | {
+    featureType: string;
+    elementType: string;
+    stylers: {
+        color: string;
+    }[];
+} | {
+    featureType: string;
+    stylers: {
+        visibility: string;
+    }[];
+    elementType?: undefined;
+})[];

package/lib/AWING/GoogleMap/utils.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapStyles = void 0;
+exports.mapStyles = [
+    {
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "color": "#dadce0"
+            }
+        ]
+    },
+    {
+        "elementType": "labels.icon",
+        "stylers": [
+            {
+                "visibility": "off"
+            }
+        ]
+    },
+    {
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "color": "#212225"
+            }
+        ]
+    },
+    {
+        "elementType": "labels.text.stroke",
+        "stylers": [
+            {
+                "color": "#dadce0"
+            }
+        ]
+    },
+    {
+        "featureType": "administrative",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "color": "#212225"
+            }
+        ]
+    },
+    {
+        "featureType": "administrative.country",
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "color": "#212225"
+            }
+        ]
+    },
+    {
+        "featureType": "administrative.land_parcel",
+        "stylers": [
+            {
+                "visibility": "off"
+            }
+        ]
+    },
+    {
+        "featureType": "administrative.locality",
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "color": "#898989"
+            }
+        ]
+    },
+    {
+        "featureType": "poi",
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "color": "#212225"
+            }
+        ]
+    },
+    {
+        "featureType": "poi.park",
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "color": "#616161"
+            }
+        ]
+    },
+    {
+        "featureType": "road",
+        "elementType": "geometry.fill",
+        "stylers": [
+            {
+                "color": "#c8c8c8"
+            }
+        ]
+    },
+    {
+        "featureType": "road",
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "color": "#8a8a8a"
+            }
+        ]
+    },
+    {
+        "featureType": "transit",
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "color": "#212225"
+            }
+        ]
+    },
+    {
+        "featureType": "water",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "color": "#f8f9fa"
+            }
+        ]
+    },
+    {
+        "featureType": "water",
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "color": "#f8f9fa"
+            }
+        ]
+    }
+];

package/package.json

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