@redocly/theme/lib/components/Banner/Banner.js

Shared UI components lib

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.Banner = Banner;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importStar(require("styled-components"));
const hooks_1 = require("../../core/hooks");
const utils_1 = require("../../core/utils");
const Markdown_1 = require("../../components/Markdown/Markdown");
const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
const Button_1 = require("../../components/Button/Button");
const ANIMATION_DURATION = 0.4;
function setBannerHeight(height) {
    document.documentElement.style.setProperty('--banner-height', `${height}px`);
}
function Banner({ className }) {
    const { useBanner, useMarkdownText } = (0, hooks_1.useThemeHooks)();
    const { banner, dismissBanner } = useBanner();
    const [displayBanner, setDisplayBanner] = (0, react_1.useState)(undefined);
    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
    const markdownContent = useMarkdownText((displayBanner === null || displayBanner === void 0 ? void 0 : displayBanner.content) || '');
    const bannerRef = (0, react_1.useRef)(null);
    (0, react_1.useEffect)(() => {
        if (banner) {
            setDisplayBanner(banner);
            requestAnimationFrame(() => {
                requestAnimationFrame(() => {
                    setIsVisible(true);
                });
            });
        }
        else {
            setIsVisible(false);
            const timer = setTimeout(() => {
                setDisplayBanner(undefined);
            }, 400);
            return () => clearTimeout(timer);
        }
    }, [banner]);
    (0, react_1.useEffect)(() => {
        if (!displayBanner) {
            const timer = setTimeout(() => {
                setBannerHeight(0);
            }, 400);
            return () => clearTimeout(timer);
        }
        const bannerElement = bannerRef.current;
        if (!bannerElement)
            return;
        if (!isVisible) {
            setBannerHeight(0);
            return;
        }
        const updateHeight = () => {
            const height = bannerElement.getBoundingClientRect().height;
            setBannerHeight(height);
        };
        updateHeight();
        if (window.location.hash) {
            setTimeout(() => {
                var _a;
                const hash = window.location.hash;
                const el = document.getElementById(hash.slice(1));
                if (el) {
                    const navbar = (0, utils_1.getNavbarElement)();
                    const navbarHeight = (_a = navbar === null || navbar === void 0 ? void 0 : navbar.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 0;
                    const elementTop = el.getBoundingClientRect().top + window.scrollY;
                    const scrollPosition = elementTop - navbarHeight;
                    if (Math.abs(window.scrollY - scrollPosition) > 1) {
                        window.scrollTo({ top: scrollPosition });
                    }
                }
            }, ANIMATION_DURATION * 1000 + 100);
        }
        const resizeObserver = new ResizeObserver(updateHeight);
        resizeObserver.observe(bannerElement);
        return () => {
            resizeObserver.disconnect();
        };
    }, [displayBanner, isVisible]);
    if (!displayBanner) {
        return null;
    }
    const bannerColor = displayBanner.color || 'info';
    return (react_1.default.createElement(BannerWrapper, { ref: bannerRef, "data-component-name": "Banner/Banner", className: className, "$color": bannerColor, "$isVisible": isVisible },
        react_1.default.createElement(BannerContent, null,
            react_1.default.createElement(Markdown_1.Markdown, { compact: true }, markdownContent)),
        displayBanner.dismissible && (react_1.default.createElement(DismissButton, { variant: "ghost", size: "var(--banner-button-size)", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, { color: `var(--banner-${bannerColor}-icon-color)`, size: "16px" }), onClick: () => dismissBanner(displayBanner.content), "aria-label": "Dismiss banner" }))));
}
const BannerContent = styled_components_1.default.div `
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  p {
    margin: 0;
    color: var(--banner-text-color);
    text-align: center;

    a:not([role='button']) {
      color: var(--banner-link-color);
      text-decoration: var(--banner-link-decoration);
    }

    [data-component-name='Button/Button'] {
      --button-font-size: var(--banner-button-font-size);
      --button-border-radius: var(--banner-button-border-radius);
      --button-padding: var(--banner-button-padding-inline);
      --button-line-height: var(--banner-button-line-height);
      --button-icon-size: var(--banner-button-icon-size);
      --button-icon-padding: var(--banner-button-icon-padding);
      --button-icon-left-padding: var(--banner-button-icon-left-padding);
      --button-icon-right-padding: var(--banner-button-icon-right-padding);
      margin: var(--banner-button-margin);
    }
  }

  p > * {
    vertical-align: bottom;
  }
`;
const BannerWrapper = styled_components_1.default.div `
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--banner-padding);
  color: var(--banner-text-color);
  min-height: var(--banner-min-height);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: var(--z-index-overlay);
  transform: ${({ $isVisible }) => ($isVisible ? 'translateY(0)' : 'translateY(-100%)')};
  transition: transform ${ANIMATION_DURATION}s ease-out;
  ${({ $color }) => $color &&
    (0, styled_components_1.css) `
      background-color: var(--banner-${$color}-bg-color);

      ${BannerContent} {
        p {
          color: var(--banner-${$color}-text-color);
        }

        a:not([role='button']) {
          color: var(--banner-${$color}-link-color);
        }
      }
    `}
`;
const DismissButton = (0, styled_components_1.default)(Button_1.Button) `
  width: var(--banner-button-size);
  height: var(--banner-button-size);
  padding: var(--banner-button-padding);
`;
//# sourceMappingURL=Banner.js.map