terriajs
Version:
Geospatial data visualization platform.
78 lines • 4.37 kB
JavaScript
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component } from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import { observer } from "mobx-react";
import { withTranslation } from "react-i18next";
import { Category, ViewAction } from "../../Core/AnalyticEvents/analyticEvents";
import Icon, { StyledIcon } from "../../Styled/Icon";
import withControlledVisibility from "../HOCs/withControlledVisibility";
import { withViewState } from "../Context";
import Styles from "./full_screen_button.scss";
import Button from "../../Styled/Button";
import Branding from "./Branding";
// The button to make the map full screen and hide the workbench.
let FullScreenButton = class FullScreenButton extends Component {
static propTypes = {
viewState: PropTypes.object.isRequired,
btnText: PropTypes.string,
minified: PropTypes.bool,
animationDuration: PropTypes.number, // Defaults to 1 millisecond.
t: PropTypes.func.isRequired
};
constructor(props) {
super(props);
this.state = {
isActive: false
};
}
toggleFullScreen() {
this.props.viewState.setIsMapFullScreen(!this.props.viewState.isMapFullScreen);
// log a GA event
this.props.viewState.terria.analytics?.logEvent(Category.view, this.props.viewState.isMapFullScreen
? ViewAction.exitFullScreen
: ViewAction.enterFullScreen);
}
renderButtonText() {
const btnText = this.props.btnText ? this.props.btnText : null;
if (this.props.viewState.isMapFullScreen) {
return _jsx("span", { children: btnText });
}
}
render() {
const { t } = this.props;
return (_jsxs("div", { className: classNames(Styles.fullScreen, {
[Styles.minifiedFullscreenBtnWrapper]: this.props.minified,
[Styles.trainerBarVisible]: this.props.viewState.trainerBarVisible,
[Styles.fullScreenWrapper]: this.props.viewState.isMapFullScreen && !this.props.minified
}), children: [this.props.minified && (_jsx("label", { className: Styles.toggleWorkbench, htmlFor: "toggle-workbench", children: this.props.btnText })), this.props.viewState.isMapFullScreen && !this.props.minified && (_jsx(Branding, {})), _jsx(Button, { id: "toggle-workbench", css: `
border-radius: 0 4px 4px 0;
${this.props.viewState.isMapFullScreen === false
? `width: 16px;
padding: 0px;`
: `width: 100%; border-radius: 0;`}
`, primary: true, textProps: {
medium: true
}, onClick: () => this.toggleFullScreen(), "aria-label": this.props.viewState.isMapFullScreen
? t("sui.showWorkbench", {
count: this.props.viewState.terria.workbench.items.length
})
: t("sui.hideWorkbench"), title: this.props.viewState.isMapFullScreen
? t("sui.showWorkbench", {
count: this.props.viewState.terria.workbench.items.length
})
: t("sui.hideWorkbench"), renderIcon: () => this.props.viewState.isMapFullScreen ? (_jsx(StyledIcon, { styledWidth: "12px", light: true, glyph: Icon.GLYPHS.right })) : (_jsx(StyledIcon, { css: "margin-right: 2px;", light: true, styledWidth: "12px", glyph: Icon.GLYPHS.left })), children: this.renderButtonText() })] }));
}
};
FullScreenButton = __decorate([
observer
], FullScreenButton);
export default withTranslation()(withViewState(withControlledVisibility(FullScreenButton)));
//# sourceMappingURL=FullScreenButton.js.map