awing-library 2.1.198-dev → 2.1.200-dev
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -55,6 +55,6 @@ function Component(props) {
|
|
|
55
55
|
}
|
|
56
56
|
}, error: !!(radius &&
|
|
57
57
|
Number(radius) <
|
|
58
|
-
((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 }) }))] })] }));
|
|
58
|
+
((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 }) }))] })] }));
|
|
59
59
|
}
|
|
60
60
|
exports.default = Component;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { IGoogleMapProps } from './interface';
|
|
2
|
-
declare const GGMap: ({ defaultLocation, onUpdateLocation, apiKey, geofenceRadius,
|
|
2
|
+
declare const GGMap: ({ defaultLocation, onUpdateLocation, apiKey, geofenceRadius, sxMap, isDisplayAutoComplete, isTypeTracking, markerPositions, zoomCustomed }: IGoogleMapProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default GGMap;
|
|
@@ -1,18 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
if (
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
};
|
|
15
|
-
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
16
24
|
};
|
|
17
25
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
@@ -22,14 +30,13 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
22
30
|
var material_1 = require("@mui/material");
|
|
23
31
|
var api_1 = require("@react-google-maps/api");
|
|
24
32
|
var lodash_1 = __importDefault(require("lodash"));
|
|
25
|
-
var react_1 = require("react");
|
|
33
|
+
var react_1 = __importStar(require("react"));
|
|
26
34
|
var react_i18next_1 = require("react-i18next");
|
|
27
35
|
var utils_1 = require("./utils");
|
|
28
36
|
var mapContainerStyle = {
|
|
29
37
|
height: '320px',
|
|
30
38
|
width: '100%',
|
|
31
39
|
};
|
|
32
|
-
var myEffectExit = (0, material_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% {\n transform: scale(1);\n border: 0px solid #fff;\n opacity: 1;\n }\n 25% {\n transform: scale(1.1);\n border: 10px solid #1a78fc;\n opacity: 0.8;\n }\n 50% {\n transform: scale(1.12);\n\tborder: 8px solid #1a78fc;\n opacity: 0.5;\n }\n 75% {\n transform: scale(1.14);\n\tborder: 6px solid #1a78fc;\n opacity: 0.3;\n }\n 100% {\n transform: scale(1.16);\n\tborder: 4px solid #1a78fc;\n opacity: 0.2;\n }\n"], ["\n 0% {\n transform: scale(1);\n border: 0px solid #fff;\n opacity: 1;\n }\n 25% {\n transform: scale(1.1);\n border: 10px solid #1a78fc;\n opacity: 0.8;\n }\n 50% {\n transform: scale(1.12);\n\tborder: 8px solid #1a78fc;\n opacity: 0.5;\n }\n 75% {\n transform: scale(1.14);\n\tborder: 6px solid #1a78fc;\n opacity: 0.3;\n }\n 100% {\n transform: scale(1.16);\n\tborder: 4px solid #1a78fc;\n opacity: 0.2;\n }\n"])));
|
|
33
40
|
var libraries = ['places'];
|
|
34
41
|
var stylesDefault = {
|
|
35
42
|
position: 'relative',
|
|
@@ -39,12 +46,13 @@ var stylesDefault = {
|
|
|
39
46
|
}
|
|
40
47
|
};
|
|
41
48
|
var GGMap = function (_a) {
|
|
42
|
-
var defaultLocation = _a.defaultLocation, onUpdateLocation = _a.onUpdateLocation, apiKey = _a.apiKey, geofenceRadius = _a.geofenceRadius,
|
|
49
|
+
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;
|
|
43
50
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
44
51
|
var _d = (0, react_1.useState)(), map = _d[0], setMap = _d[1];
|
|
45
52
|
var _e = (0, react_1.useState)(''), error = _e[0], setError = _e[1];
|
|
46
53
|
var autocompleteRef = (0, react_1.useRef)(null);
|
|
47
54
|
var boxRef = (0, react_1.useRef)(null);
|
|
55
|
+
var makerRefs = (0, react_1.useRef)([]);
|
|
48
56
|
var _f = (0, react_1.useState)(zoomCustomed || 5), zoom = _f[0], setZoom = _f[1];
|
|
49
57
|
var onLoad = function (autocomplete) {
|
|
50
58
|
autocompleteRef.current = autocomplete;
|
|
@@ -62,9 +70,13 @@ var GGMap = function (_a) {
|
|
|
62
70
|
}
|
|
63
71
|
return acc;
|
|
64
72
|
}, {})) !== null && _a !== void 0 ? _a : {};
|
|
73
|
+
return Object.values(coordMap).map(function (item, index, arr) {
|
|
74
|
+
var _a;
|
|
75
|
+
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 - Math.max(zoom, 4))) * 8000;
|
|
76
|
+
return item;
|
|
77
|
+
});
|
|
65
78
|
// Convert the object to an array
|
|
66
|
-
|
|
67
|
-
}, [markerPositions]);
|
|
79
|
+
}, [markerPositions, zoom]);
|
|
68
80
|
var onPlaceChanged = function () {
|
|
69
81
|
var _a, _b, _c, _d;
|
|
70
82
|
if (autocompleteRef.current !== null) {
|
|
@@ -84,9 +96,9 @@ var GGMap = function (_a) {
|
|
|
84
96
|
console.log('Autocomplete is not loaded yet!');
|
|
85
97
|
}
|
|
86
98
|
};
|
|
87
|
-
var onLoadMap = function (mapInstance) {
|
|
99
|
+
var onLoadMap = react_1.default.useCallback(function (mapInstance) {
|
|
88
100
|
setMap(mapInstance);
|
|
89
|
-
};
|
|
101
|
+
}, []);
|
|
90
102
|
//Lấy vị trí hiện tại của người dùng
|
|
91
103
|
var getCurrentLocation = function () {
|
|
92
104
|
var showPosition = function (position) {
|
|
@@ -118,21 +130,43 @@ var GGMap = function (_a) {
|
|
|
118
130
|
setError('Geolocation is not supported by this browser.');
|
|
119
131
|
}
|
|
120
132
|
};
|
|
121
|
-
var onMapClick = function (e) {
|
|
133
|
+
var onMapClick = react_1.default.useCallback(function (e) {
|
|
122
134
|
var _a, _b, _c, _d;
|
|
123
135
|
onUpdateLocation && onUpdateLocation({
|
|
124
136
|
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,
|
|
125
137
|
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,
|
|
126
138
|
});
|
|
127
|
-
};
|
|
139
|
+
}, []);
|
|
128
140
|
(0, react_1.useEffect)(function () {
|
|
129
141
|
if (lodash_1.default.isNil(defaultLocation) || defaultLocation.lat === 0 || defaultLocation.lng === 0) {
|
|
130
142
|
getCurrentLocation();
|
|
131
143
|
}
|
|
132
144
|
}, [defaultLocation]);
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
145
|
+
(0, react_1.useEffect)(function () {
|
|
146
|
+
if (map) {
|
|
147
|
+
makerRefs.current.forEach(function (marker) {
|
|
148
|
+
marker.setMap(null);
|
|
149
|
+
});
|
|
150
|
+
makerRefs.current = markerConvert.map(function (item) {
|
|
151
|
+
var _a, _b;
|
|
152
|
+
var maker = new google.maps.Circle({
|
|
153
|
+
center: { lat: (_a = item.latitude) !== null && _a !== void 0 ? _a : 0, lng: (_b = item.longitude) !== null && _b !== void 0 ? _b : 0 },
|
|
154
|
+
radius: item.radius,
|
|
155
|
+
strokeColor: '#4285F4',
|
|
156
|
+
strokeOpacity: 0.8,
|
|
157
|
+
strokeWeight: 2,
|
|
158
|
+
fillColor: "#4285F4",
|
|
159
|
+
fillOpacity: 0.35,
|
|
160
|
+
});
|
|
161
|
+
maker.setMap(map);
|
|
162
|
+
return maker;
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
console.log(markerConvert);
|
|
166
|
+
}, [markerConvert]);
|
|
167
|
+
var handleZoom = (0, react_1.useCallback)(function (zoom) {
|
|
168
|
+
setZoom(zoom);
|
|
169
|
+
}, []);
|
|
136
170
|
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 &&
|
|
137
171
|
((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 () {
|
|
138
172
|
var _a;
|
|
@@ -156,37 +190,46 @@ var GGMap = function (_a) {
|
|
|
156
190
|
margin: '10px 0',
|
|
157
191
|
zIndex: 99,
|
|
158
192
|
top: '50px',
|
|
159
|
-
} }) })), (0, jsx_runtime_1.jsx)(
|
|
160
|
-
var _a;
|
|
161
|
-
setZoom((_a = map === null || map === void 0 ? void 0 : map.getZoom()) !== null && _a !== void 0 ? _a : zoom);
|
|
162
|
-
}, center: defaultLocation, onLoad: onLoadMap, onClick: onMapClick }, isTypeTracking && {
|
|
163
|
-
options: {
|
|
164
|
-
disableDefaultUI: true,
|
|
165
|
-
styles: utils_1.mapStyles,
|
|
166
|
-
zoomControl: true,
|
|
167
|
-
streetViewControl: false,
|
|
168
|
-
mapTypeControl: false,
|
|
169
|
-
fullscreenControl: false,
|
|
170
|
-
minZoom: 2
|
|
171
|
-
}
|
|
172
|
-
}, { children: !markerPositions ?
|
|
173
|
-
(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: {
|
|
174
|
-
fillColor: 'red',
|
|
175
|
-
fillOpacity: 0.2,
|
|
176
|
-
strokeColor: 'red',
|
|
177
|
-
strokeOpacity: 1,
|
|
178
|
-
strokeWeight: 2,
|
|
179
|
-
} })] })
|
|
180
|
-
: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: markerConvert === null || markerConvert === void 0 ? void 0 : markerConvert.map(function (coordinates, index, positions) {
|
|
181
|
-
var _a, _b, _c;
|
|
182
|
-
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: {
|
|
183
|
-
strokeColor: '#4285F4',
|
|
184
|
-
strokeOpacity: 0.8,
|
|
185
|
-
strokeWeight: 2,
|
|
186
|
-
fillColor: "#4285F4",
|
|
187
|
-
fillOpacity: 0.35,
|
|
188
|
-
} }, index);
|
|
189
|
-
}) }) }))] }) }));
|
|
193
|
+
} }) })), !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 })] }) }));
|
|
190
194
|
};
|
|
191
195
|
exports.default = GGMap;
|
|
192
|
-
var
|
|
196
|
+
var Maprender = react_1.default.memo(function (_a) {
|
|
197
|
+
var onLoadMap = _a.onLoadMap, onMapClick = _a.onMapClick, onZoomChanged = _a.onZoomChanged;
|
|
198
|
+
var mapInstance = (0, react_1.useRef)(null);
|
|
199
|
+
return (0, jsx_runtime_1.jsx)(api_1.GoogleMap, { id: "map", mapContainerStyle: { width: "100%", height: "".concat(521, "px") }, zoom: 3, center: {
|
|
200
|
+
lat: 21.0063107,
|
|
201
|
+
lng: 105.8279467
|
|
202
|
+
}, onZoomChanged: function () {
|
|
203
|
+
var _a, _b;
|
|
204
|
+
onZoomChanged((_b = (_a = mapInstance.current) === null || _a === void 0 ? void 0 : _a.getZoom()) !== null && _b !== void 0 ? _b : 0);
|
|
205
|
+
}, onLoad: function (instance) {
|
|
206
|
+
mapInstance.current = instance;
|
|
207
|
+
onLoadMap(instance);
|
|
208
|
+
}, onClick: onMapClick, options: {
|
|
209
|
+
disableDefaultUI: true,
|
|
210
|
+
styles: utils_1.mapStyles,
|
|
211
|
+
zoomControl: true,
|
|
212
|
+
streetViewControl: false,
|
|
213
|
+
mapTypeControl: false,
|
|
214
|
+
fullscreenControl: false,
|
|
215
|
+
minZoom: 2,
|
|
216
|
+
maxZoom: 13,
|
|
217
|
+
} });
|
|
218
|
+
});
|
|
219
|
+
var MaprenderWithoutTracking = react_1.default.memo(function (_a) {
|
|
220
|
+
var onLoadMap = _a.onLoadMap, onMapClick = _a.onMapClick, onZoomChanged = _a.onZoomChanged, defaultLocation = _a.defaultLocation, geofenceRadius = _a.geofenceRadius, zoomCustomed = _a.zoomCustomed;
|
|
221
|
+
var mapInstance = (0, react_1.useRef)(null);
|
|
222
|
+
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 () {
|
|
223
|
+
var _a, _b;
|
|
224
|
+
onZoomChanged((_b = (_a = mapInstance.current) === null || _a === void 0 ? void 0 : _a.getZoom()) !== null && _b !== void 0 ? _b : 0);
|
|
225
|
+
}, onLoad: function (instance) {
|
|
226
|
+
mapInstance.current = instance;
|
|
227
|
+
onLoadMap(instance);
|
|
228
|
+
}, 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: {
|
|
229
|
+
fillColor: 'red',
|
|
230
|
+
fillOpacity: 0.2,
|
|
231
|
+
strokeColor: 'red',
|
|
232
|
+
strokeOpacity: 1,
|
|
233
|
+
strokeWeight: 2,
|
|
234
|
+
} })] }) });
|
|
235
|
+
});
|