terriajs/dist/ReactViews/SidePanel/Branding.js

Geospatial data visualization platform.

import { jsx as _jsx } from "react/jsx-runtime";
import { observer } from "mobx-react";
import { Fragment } from "react";
import isDefined from "../../Core/isDefined";
import parseCustomHtmlToReact from "../Custom/parseCustomHtmlToReact";
import { useViewState, withViewState } from "../Context";
import { useTheme } from "styled-components";
const DEFAULT_BRANDING = '<a target="_blank" href="http://terria.io"><img src="images/terria_logo.png" height="52" title="Version: {{ version }}" /></a>';
export default withViewState(observer((props) => {
    // Set brandingHtmlElements to brandBarElements or default Terria branding as default
    let brandingHtmlElements = props.viewState.terria.configParameters
        .brandBarElements ?? [DEFAULT_BRANDING];
    if (props.viewState.useSmallScreenInterface) {
        const brandBarSmallElements = props.viewState.terria.configParameters.brandBarSmallElements;
        const displayOne = props.viewState.terria.configParameters.displayOneBrand;
        // Use brandBarSmallElements if it exists
        if (brandBarSmallElements)
            brandingHtmlElements = brandBarSmallElements;
        // If no brandBarSmallElements, but displayOne parameter is selected
        // Try to find brand element based on displayOne index - OR find the first item that isn't an empty string (for backward compatability of old terriamap defaults)
        else if (isDefined(displayOne))
            brandingHtmlElements = [
                (brandingHtmlElements[displayOne] ||
                    brandingHtmlElements.find((item) => item.length > 0)) ??
                    DEFAULT_BRANDING
            ];
    }
    const theme = useTheme();
    const viewState = useViewState();
    const logoHeight = viewState.useSmallScreenInterface
        ? theme.logoSmallHeight
        : theme.logoHeight;
    const version = props.version ?? "Unknown";
    return (_jsx("div", { css: `
          display: flex;
          justify-content: center;

          box-sizing: border-box;

          width: 100%;
          min-height: ${logoHeight};

          overflow: hidden;

          a {
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: center;
            justify-content: center;
          }
          span {
            display: block;
          }
          img {
            max-height: 100%;
            max-width: 100%;
          }

          font-family: ${(p) => p.theme.fontPop};

          padding: ${(p) => p.theme.logoPaddingHorizontal}
            ${(p) => p.theme.logoPaddingVertical};

          @media (max-width: ${(p) => p.theme.sm}px) {
            height: ${(p) => p.theme.logoSmallHeight};

            padding: ${(p) => p.theme.logoSmallPaddingHorizontal}
              ${(p) => p.theme.logoSmallPaddingVertical};

            // Remove a "display: flex" on small screen if only showing one brandingHtmlElement
            a {
              ${brandingHtmlElements.length > 0 ? "display: unset;" : ""}
            }
          }
        `, children: brandingHtmlElements.map((element, idx) => (_jsx(Fragment, { children: parseCustomHtmlToReact(element.replace(/\{\{\s*version\s*\}\}/g, version), { disableExternalLinkIcon: true }) }, idx))) }));
}));
//# sourceMappingURL=Branding.js.map