@tripian/react 9.0.28 → 9.0.29

package/components/GoogleMaps/GMarker/Base/helper.d.ts

@@ -1,2 +1,3 @@
 export declare const iconUrl: (poiIcon?: string, color?: string, offer?: boolean) => string;
 export declare const getOrderImage: (order: number) => string;
+export declare const createSvgIcon: (number: number) => string;

package/index.js

@@ -27247,7 +27247,7 @@ exports.default = questionContext;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOrderImage = exports.iconUrl = void 0;
+exports.createSvgIcon = exports.getOrderImage = exports.iconUrl = void 0;
 var iconUrl = function (poiIcon, color, offer) {
     if (poiIcon === void 0) { poiIcon = 'Flag'; }
     if (color === void 0) { color = 'black2'; }
@@ -27256,6 +27256,13 @@ var iconUrl = function (poiIcon, color, offer) {
 exports.iconUrl = iconUrl;
 var getOrderImage = function (order) { return "https://s3-eu-west-1.amazonaws.com/poi-pics/Icon/order/marker-order-".concat(order, ".png"); };
 exports.getOrderImage = getOrderImage;
+var createSvgIcon = function (number) {
+    if (number > -1) {
+        return "\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" width=\"256\" height=\"256\">\n      <circle cx=\"128\" cy=\"128\" r=\"75\" fill=\"#D6504A\" stroke=\"white\" stroke-width=\"15\" />\n      <text x=\"128\" y=\"128\" font-size=\"100\" font-weight=\"bold\" text-anchor=\"middle\" fill=\"white\" font-family=\"Arial\" dy=\"0.35em\">".concat(number + 1, "</text>\n    </svg>\n  ");
+    }
+    return '';
+};
+exports.createSvgIcon = createSvgIcon;
 
 
 /***/ }),
@@ -79081,12 +79088,22 @@ var react_1 = __importStar(__webpack_require__(0));
 var api_1 = __webpack_require__(41);
 var helper_1 = __webpack_require__(116);
 var GMarkerOrderBase = function (_a) {
+    // const markerIcon = useMemo(
+    //   () => ({
+    //     url: getOrderImage(order),
+    //     scaledSize: new google.maps.Size(18, 18),
+    //     anchor: new google.maps.Point(-2, 28),
+    //   }),
+    //   [order],
+    // );
     var coordinate = _a.coordinate, callbackMarkerClicked = _a.callbackMarkerClicked, title = _a.title, order = _a.order, animation = _a.animation;
+    var svgIcon = (0, react_1.useMemo)(function () { return (0, helper_1.createSvgIcon)(order); }, [order]);
+    var orderImageSvg = (0, react_1.useMemo)(function () { return "data:image/svg+xml;charset=UTF-8,".concat(encodeURIComponent(svgIcon)); }, [svgIcon]);
     var markerIcon = (0, react_1.useMemo)(function () { return ({
-        url: (0, helper_1.getOrderImage)(order),
-        scaledSize: new google.maps.Size(18, 18),
-        anchor: new google.maps.Point(-2, 28),
-    }); }, [order]);
+        url: orderImageSvg,
+        scaledSize: new google.maps.Size(25, 25),
+        anchor: new google.maps.Point(0, 28),
+    }); }, [orderImageSvg]);
     return (react_1.default.createElement(api_1.Marker, { position: coordinate, icon: markerIcon, onClick: callbackMarkerClicked, 
         /* label={{ text: (step.order + 1).toString(), fontSize: '13px', color: 'white' }} */
         animation: animation, title: title }));