terriajs
Version:
Geospatial data visualization platform.
119 lines (118 loc) • 5.56 kB
JavaScript
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 { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import classNames from "classnames";
import { observable, reaction, makeObservable, runInAction } from "mobx";
import { observer } from "mobx-react";
import { Component } from "react";
import styled from "styled-components";
import isDefined from "../../Core/isDefined";
import { UIMode } from "../../Models/MapInteractionMode";
import parseCustomHtmlToReact from "../Custom/parseCustomHtmlToReact";
import { withViewState } from "../Context";
import Styles from "./map-interaction-window.scss";
const MapInteractionWindowWrapper = styled.div `
${(props) => props.isDiffTool &&
`
display: none;
top: initial;
bottom: 100px;
min-width: 330px;
width: auto;
box-sizing: border-box;
padding: 10px 15px;
background: ${props.theme.colorSecondary};
color:${props.theme.textLight};
`}
`;
let MapInteractionWindow = class MapInteractionWindow extends Component {
displayName = "MapInteractionWindow";
disposeMapInteractionObserver;
currentInteractionMode;
observableViewState;
constructor(props) {
super(props);
makeObservable(this);
this.observableViewState = props.viewState;
}
componentWillUnmount() {
// this.removeContextItem();
if (typeof this.currentInteractionMode?.onEnable === "function") {
this.currentInteractionMode.onEnable(this.props.viewState);
}
if (this.disposeMapInteractionObserver) {
this.disposeMapInteractionObserver();
}
}
componentDidMount() {
this.disposeMapInteractionObserver = reaction(() => this.observableViewState.terria.mapInteractionModeStack.length > 0 &&
this.observableViewState.terria.mapInteractionModeStack[this.observableViewState.terria.mapInteractionModeStack.length - 1], () => {
const mapInteractionMode = this.observableViewState.terria.mapInteractionModeStack[this.observableViewState.terria.mapInteractionModeStack.length - 1];
if (mapInteractionMode !== this.currentInteractionMode) {
this.currentInteractionMode = mapInteractionMode;
}
if (typeof this.currentInteractionMode?.onEnable === "function") {
this.currentInteractionMode.onEnable(this.props.viewState);
}
});
}
componentDidUpdate() {
runInAction(() => {
this.observableViewState = this.props.viewState;
});
}
// /* eslint-disable-next-line camelcase */
// UNSAFE_componentWillReceiveProps(nextProps: any) {
// // Only enable context item if MapInteractionWindow is rendering
// if (isDefined(this.currentInteractionMode)) {
// this.enableContextItem(nextProps);
// } else {
// this.removeContextItem();
// }
// }
// enableContextItem(props: any) {
// this.removeContextItem();
// if (
// defined(props.viewState.previewedItem) &&
// defined(props.viewState.previewedItem.contextItem)
// ) {
// props.viewState.previewedItem.contextItem.isEnabled = true;
// this._lastContextItem = props.viewState.previewedItem.contextItem;
// }
// }
// removeContextItem() {
// if (defined(this._lastContextItem)) {
// this._lastContextItem.isEnabled = false;
// this._lastContextItem = undefined;
// }
// }
render() {
const isActive = isDefined(this.currentInteractionMode) &&
!this.currentInteractionMode.invisible;
const windowClass = classNames(Styles.window, {
[Styles.isActive]: isActive
});
const isDiffTool = this.currentInteractionMode?.uiMode === UIMode.Difference;
return (_jsxs(MapInteractionWindowWrapper, { className: windowClass, "aria-hidden": !isActive, isDiffTool: isDiffTool, children: [_jsxs("div", { className: classNames({
[Styles.content]: !isDiffTool
}), children: [isDefined(this.currentInteractionMode) &&
parseCustomHtmlToReact(this.currentInteractionMode.message()), isDefined(this.currentInteractionMode) &&
this.currentInteractionMode.messageAsNode()] }), typeof this.currentInteractionMode?.customUi === "function" &&
this.currentInteractionMode.customUi(), this.currentInteractionMode?.onCancel && (_jsx("button", { type: "button", onClick: this.currentInteractionMode.onCancel, className: Styles.btn, children: this.currentInteractionMode.buttonText }))] }));
}
};
__decorate([
observable
], MapInteractionWindow.prototype, "currentInteractionMode", void 0);
__decorate([
observable.ref
], MapInteractionWindow.prototype, "observableViewState", void 0);
MapInteractionWindow = __decorate([
observer
], MapInteractionWindow);
export default withViewState(MapInteractionWindow);
//# sourceMappingURL=MapInteractionWindow.js.map