terriajs/dist/ReactViews/Workflow/WorkflowPanelPortal.js

Geospatial data visualization platform.

import { jsx as _jsx } from "react/jsx-runtime";
import styled from "styled-components";
import { Portal } from "../StandardUserInterface/Portal";
import { useViewState } from "../Context";
import { WorkflowPanelPortalId } from "./WorkflowPanel";
const WorkflowPanelPortal = ({ show }) => {
    const viewState = useViewState();
    return (_jsx(Container, { show: show, onTransitionEnd: () => viewState.triggerResizeEvent(), children: _jsx(Portal, { id: WorkflowPanelPortalId }) }));
};
const Container = styled.div `
  width: ${(p) => p.theme.workflowPanelWidth}px;
  max-width: ${(p) => p.theme.workflowPanelWidth}px;
  position: absolute;
  left: ${(p) => p.theme.workbenchMargin}px;
  top: ${(p) => p.theme.workbenchMargin}px;
  max-height: calc(100% - 2 * ${(p) => p.theme.workbenchMargin}px);
  z-index: 100;
  background: ${(p) => p.theme.transparentDark};
  backdrop-filter: ${(p) => p.theme.blur};
  transition: all 0.25s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  visibility: ${(p) => (p.show ? "visible" : "hidden")};
  margin-left: ${(p) => (p.show ? "0px" : `-${p.theme.workflowPanelWidth}px`)};
  opacity: ${(p) => (p.show ? 1 : 0)};
  border-radius: ${(p) => p.theme.radiusXL};
`;
export default WorkflowPanelPortal;
//# sourceMappingURL=WorkflowPanelPortal.js.map