@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
32 lines • 3.12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TooltipContent = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_components_1 = require("@fluentui/react-components");
var css_1 = require("@emotion/css");
var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
var stackStyles = (0, css_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n min-width: 160px;\n\n display: flex;\n flex-direction: column;\n gap: 4px;\n align-items: flex-start;\n background-color: ", ";\n padding: 0;\n min-width: 100px;\n"], ["\n min-width: 160px;\n\n display: flex;\n flex-direction: column;\n gap: 4px;\n align-items: flex-start;\n background-color: ", ";\n padding: 0;\n min-width: 100px;\n"])), react_components_1.tokens.colorBrandBackground2);
var rowStyles = (0, css_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
var imageStyles = (0, css_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n width: 32px;\n height: 20px;\n display: block;\n border-radius: 4px;\n box-shadow: '", ";\n"], ["\n width: 32px;\n height: 20px;\n display: block;\n border-radius: 4px;\n box-shadow: '", ";\n"])), react_components_1.tokens.shadow4);
var titleStyles = (0, css_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n font-weight: 600;\n font-size: 1rem;\n"], ["\n font-weight: 600;\n font-size: 1rem;\n"])));
var subTitleStyles = (0, css_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n color: '", ";\n font-size: 0.92rem;\n"], ["\n color: '", ";\n font-size: 0.92rem;\n"])), react_components_1.tokens.colorNeutralForeground2);
var TooltipContent = function (_a) {
var data = _a.data;
return (React.createElement("div", { className: stackStyles },
React.createElement("div", { className: rowStyles },
React.createElement("img", { src: data.imageUrl, alt: "".concat(data.name, " ").concat(ControlStrings_1.default.worldMapFlag), className: imageStyles }),
React.createElement(react_components_1.Text, { className: titleStyles }, data.name)),
React.createElement("div", { className: rowStyles },
React.createElement(react_components_1.Text, { className: subTitleStyles }, ControlStrings_1.default.worldMapCoord),
React.createElement(react_components_1.Text, null,
data.coordinates[1].toFixed(2),
ControlStrings_1.default.worldMapN),
React.createElement(react_components_1.Text, null,
data.coordinates[0].toFixed(2),
ControlStrings_1.default.worldMapE))));
};
exports.TooltipContent = TooltipContent;
exports.default = exports.TooltipContent;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
//# sourceMappingURL=TooltipContent.js.map