terriajs
Version:
Geospatial data visualization platform.
103 lines • 3.99 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { action, runInAction } from "mobx";
import { observer } from "mobx-react";
import { Component, useEffect } from "react";
import styled from "styled-components";
import Button from "../../Styled/Button";
import Icon, { StyledIcon } from "../../Styled/Icon";
import { scrollBars } from "../../Styled/mixins";
import Text from "../../Styled/Text";
import { PortalChild } from "../StandardUserInterface/Portal";
import { PanelButton } from "./Panel";
export const WorkflowPanelPortalId = "workflow-panel-portal";
/** Wraps component in Portal, adds TitleBar, ErrorBoundary and Footer (PanelButton) */
const WorkflowPanel = observer((props) => {
const viewState = props.viewState;
useEffect(function hideTerriaSidePanelOnMount() {
runInAction(() => {
viewState.terria.isWorkflowPanelActive = true;
});
return () => {
runInAction(() => {
viewState.terria.isWorkflowPanelActive = false;
});
};
/* eslint-disable-next-line react-hooks/exhaustive-deps */
}, []);
return (_jsx(PortalChild, { viewState: viewState, portalId: WorkflowPanelPortalId, children: _jsxs(Container, { className: viewState.topElement === "WorkflowPanel" ? "top-element" : "", onClick: action(() => {
viewState.topElement = "WorkflowPanel";
}), children: [_jsxs(TitleBar, { children: [_jsx(TitleIcon, { glyph: props.icon }), _jsx(Title, { children: props.title }), !props.closeButtonText && (_jsx(CloseIconButton, { onClick: props.onClose })), props.closeButtonText && (_jsx(CloseTextButton, { onClick: props.onClose, children: props.closeButtonText }))] }), _jsx(Content, { children: _jsx(ErrorBoundary, { viewState: viewState, children: props.children }) }), props.footer ? (_jsx(PanelButton, { css: { marginBottom: "15px" }, onClick: props.footer.onClick, title: props.footer.buttonText })) : null] }) }));
});
class ErrorBoundary extends Component {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error) {
this.props.viewState.terria.raiseErrorToUser(error);
}
render() {
return this.state.hasError ? (_jsx(Error, { children: "An error occurred when running the workflow. Please try re-loading the app if the error persists." })) : (this.props.children);
}
}
const Container = styled.div `
position: relative;
display: flex;
flex-direction: column;
font-family: ${(p) => p.theme.fontPop}px;
width: ${(p) => p.theme.workflowPanelWidth}px;
height: calc(100vh - 2 * ${(p) => p.theme.workbenchMargin}px);
max-width: ${(p) => p.theme.workflowPanelWidth}px;
box-sizing: border-box;
padding: 0 0 5px;
`;
const TitleBar = styled.div `
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0.7em;
border-bottom: 1px solid ${(p) => p.theme.darkLighter};
`;
const Title = styled(Text).attrs({
textLight: true,
extraExtraLarge: true
}) `
flex-grow: 1;
padding: 0 1em;
`;
const TitleIcon = styled(StyledIcon).attrs({
styledWidth: "24px",
styledHeight: "24px",
light: true
}) ``;
const Content = styled.div `
flex-grow: 1;
overflow: auto;
display: flex;
flex-direction: column;
min-height: 0;
${(p) => scrollBars(p)}
`;
const CloseIconButton = styled(Button).attrs({
renderIcon: () => (_jsx(StyledIcon, { light: true, styledWidth: "20px", styledHeight: "20px", glyph: Icon.GLYPHS.closeLight }))
}) `
background: none;
border: none;
`;
const CloseTextButton = styled(Button).attrs({
primary: true
}) `
font-size: 14px;
`;
const Error = styled.div `
display: flex;
height: 100%;
align-items: center;
justify-content: center;
text-align: center;
color: ${(p) => p.theme.textLight};
font-size: 14px;
`;
export default WorkflowPanel;
//# sourceMappingURL=WorkflowPanel.js.map