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

Reusable React controls for SharePoint Framework solutions

import { __assign, __makeTemplateObject } from "tslib";
import * as React from 'react';
import { Tooltip, tokens } from '@fluentui/react-components';
import { Marker as MapMarker } from 'react-map-gl/maplibre';
import TooltipContent from './TooltipContent';
import { css } from '@emotion/css';
import strings from 'ControlStrings';
var useStyles = function () {
    return {
        flag: css(templateObject_1 || (templateObject_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    "])), tokens.shadow4, tokens.colorNeutralStroke2),
        tooltipContent: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), tokens.colorBrandBackground2),
    };
};
export 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(MapMarker, { 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(Tooltip, { content: {
                children: renderToolTip !== null && renderToolTip !== void 0 ? renderToolTip : React.createElement(TooltipContent, { data: data }),
                style: __assign({}, tooltipStyle),
                className: tooltipClassName !== null && tooltipClassName !== void 0 ? tooltipClassName : styles.tooltipContent,
            }, relationship: "label" },
            React.createElement("img", { src: data.imageUrl, alt: "".concat(data.name, " ").concat(strings.worldMapFlag), onMouseEnter: function (e) { return (e.currentTarget.style.transform = 'scale(1.1)'); }, onMouseLeave: function (e) { return (e.currentTarget.style.transform = ''); }, style: { cursor: 'pointer' } }))));
};
export default Marker;
var templateObject_1, templateObject_2;
//# sourceMappingURL=Marker.js.map