@pnp/spfx-controls-react/lib-commonjs/controls/worldMap/Marker.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Marker = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_components_1 = require("@fluentui/react-components");
var maplibre_1 = require("react-map-gl/maplibre");
var TooltipContent_1 = tslib_1.__importDefault(require("./TooltipContent"));
var css_1 = require("@emotion/css");
var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
var useStyles = function () {
    return {
        flag: (0, css_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      width: 22px;\n      height: 10px;\n      border-radius: 4px;\n      box-shadow: '", ";\n      border: 1px solid ", ";\n      cursor: pointer;\n      display: block;\n      margin: 0 auto;\n    "], ["\n      width: 22px;\n      height: 10px;\n      border-radius: 4px;\n      box-shadow: '", ";\n      border: 1px solid ", ";\n      cursor: pointer;\n      display: block;\n      margin: 0 auto;\n    "])), react_components_1.tokens.shadow4, react_components_1.tokens.colorNeutralStroke2),
        tooltipContent: (0, css_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), react_components_1.tokens.colorBrandBackground2),
    };
};
var Marker = function (_a) {
    var data = _a.data, onClick = _a.onClick, markerClassName = _a.markerClassName, markerStyle = _a.markerStyle, renderToolTip = _a.renderToolTip, tooltipClassName = _a.tooltipClassName, tooltipStyle = _a.tooltipStyle;
    var styles = useStyles();
    return (React.createElement(maplibre_1.Marker, { longitude: data.coordinates[0], latitude: data.coordinates[1], anchor: "bottom", onClick: function () { return onClick && onClick(data); }, className: markerClassName !== null && markerClassName !== void 0 ? markerClassName : styles.flag, style: markerStyle !== null && markerStyle !== void 0 ? markerStyle : undefined },
        React.createElement(react_components_1.Tooltip, { content: {
                children: renderToolTip !== null && renderToolTip !== void 0 ? renderToolTip : React.createElement(TooltipContent_1.default, { data: data }),
                style: tslib_1.__assign({}, tooltipStyle),
                className: tooltipClassName !== null && tooltipClassName !== void 0 ? tooltipClassName : styles.tooltipContent,
            }, relationship: "label" },
            React.createElement("img", { src: data.imageUrl, alt: "".concat(data.name, " ").concat(ControlStrings_1.default.worldMapFlag), onMouseEnter: function (e) { return (e.currentTarget.style.transform = 'scale(1.1)'); }, onMouseLeave: function (e) { return (e.currentTarget.style.transform = ''); }, style: { cursor: 'pointer' } }))));
};
exports.Marker = Marker;
exports.default = exports.Marker;
var templateObject_1, templateObject_2;
//# sourceMappingURL=Marker.js.map