@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
42 lines • 3.83 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MapNavigation = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_icons_1 = require("@fluentui/react-icons");
var react_components_1 = require("@fluentui/react-components");
var css_1 = require("@emotion/css");
var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
var navStyle = (0, css_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n position: absolute;\n top: 16px;\n right: 16px;\n z-index: 2;\n background: tokens.colorNeutralBackground1;\n border-radius: 8px;\n box-shadow: tokens.shadow4;\n padding: 4px;\n display: flex;\n gap: 8px;\n"], ["\n position: absolute;\n top: 16px;\n right: 16px;\n z-index: 2;\n background: tokens.colorNeutralBackground1;\n border-radius: 8px;\n box-shadow: tokens.shadow4;\n padding: 4px;\n display: flex;\n gap: 8px;\n"])));
var navStyleVertical = (0, css_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n flex-direction: column;\n"], ["\n flex-direction: column;\n"])));
var buttonStyle = (0, css_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n min-width: 32px;\n min-height: 32px;\n ", "\n"], ["\n min-width: 32px;\n min-height: 32px;\n ", "\n"])), react_components_1.shorthands.padding('4px'));
var MapNavigation = function (_a) {
var mapRef = _a.mapRef, _b = _a.initialViewState, initialViewState = _b === void 0 ? { longitude: 0, latitude: 20, zoom: 1 } : _b, _c = _a.vertical, vertical = _c === void 0 ? true : _c;
var handleZoomIn = React.useCallback(function () {
var _a;
(_a = mapRef.current) === null || _a === void 0 ? void 0 : _a.getMap().zoomIn();
}, [mapRef]);
var handleZoomOut = React.useCallback(function () {
var _a;
(_a = mapRef.current) === null || _a === void 0 ? void 0 : _a.getMap().zoomOut();
}, [mapRef]);
var handleReset = React.useCallback(function () {
var _a;
(_a = mapRef.current) === null || _a === void 0 ? void 0 : _a.flyTo({
center: [initialViewState.longitude, initialViewState.latitude],
zoom: initialViewState.zoom,
essential: true,
});
}, [mapRef, initialViewState]);
return (React.createElement("div", { className: vertical ? "".concat(navStyle, " ").concat(navStyleVertical) : navStyle },
React.createElement(react_components_1.Tooltip, { content: ControlStrings_1.default.worldMapZoomContent, relationship: "label" },
React.createElement(react_components_1.Button, { appearance: "subtle", icon: React.createElement(react_icons_1.ZoomIn24Regular, null), "aria-label": ControlStrings_1.default.worldMapZoomIn, className: buttonStyle, onClick: handleZoomIn })),
React.createElement(react_components_1.Tooltip, { content: ControlStrings_1.default.worldMapZoomOut, relationship: "label" },
React.createElement(react_components_1.Button, { appearance: "subtle", icon: React.createElement(react_icons_1.ZoomOut24Regular, null), "aria-label": ControlStrings_1.default.worldMapZoomOut, className: buttonStyle, onClick: handleZoomOut })),
React.createElement(react_components_1.Tooltip, { content: ControlStrings_1.default.worldMapResetMap, relationship: "label" },
React.createElement(react_components_1.Button, { appearance: "subtle", icon: React.createElement(react_icons_1.ArrowReset24Regular, null), "aria-label": ControlStrings_1.default.worldMapReset, className: buttonStyle, onClick: handleReset }))));
};
exports.MapNavigation = MapNavigation;
exports.default = exports.MapNavigation;
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=MapNavigation.js.map