@backstage/plugin-techdocs/dist/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.esm.js

The Backstage plugin that renders technical documentation for your components

import { jsx, jsxs } from 'react/jsx-runtime';
import { useEffect, useCallback } from 'react';
import Grid from '@material-ui/core/Grid';
import { makeStyles } from '@material-ui/core/styles';
import { useTechDocsReaderPage, useShadowDomStylesLoading, useShadowRootElements, TechDocsShadowDom } from '@backstage/plugin-techdocs-react';
import { Content, Progress } from '@backstage/core-components';
import { TechDocsSearch } from '../../../search/components/TechDocsSearch.esm.js';
import { TechDocsStateIndicator } from '../TechDocsStateIndicator.esm.js';
import { useTechDocsReaderDom } from './dom.esm.js';
import { withTechDocsReaderProvider, useTechDocsReader } from '../TechDocsReaderProvider.esm.js';
import { TechDocsReaderPageContentAddons } from './TechDocsReaderPageContentAddons.esm.js';
import { useApp } from '@backstage/core-plugin-api';

const useStyles = makeStyles({
  search: {
    width: "100%",
    "@media (min-width: 76.1875em)": {
      width: "calc(100% - 34.4rem)",
      margin: "0 auto"
    },
    "@media print": {
      display: "none"
    }
  }
});
const TechDocsReaderPageContent = withTechDocsReaderProvider(
  (props) => {
    const { withSearch = true, searchResultUrlMapper, onReady } = props;
    const classes = useStyles();
    const {
      entityMetadata: { value: entityMetadata, loading: entityMetadataLoading },
      entityRef,
      setShadowRoot
    } = useTechDocsReaderPage();
    const { state } = useTechDocsReader();
    const dom = useTechDocsReaderDom(entityRef, props.defaultPath);
    const path = window.location.pathname;
    const hash = window.location.hash;
    const isStyleLoading = useShadowDomStylesLoading(dom);
    const [hashElement] = useShadowRootElements([`[id="${hash.slice(1)}"]`]);
    const app = useApp();
    const { NotFoundErrorPage } = app.getComponents();
    useEffect(() => {
      if (isStyleLoading) return;
      if (hash) {
        if (hashElement) {
          hashElement.scrollIntoView();
        }
      } else {
        document?.querySelector("header")?.scrollIntoView();
      }
    }, [path, hash, hashElement, isStyleLoading]);
    const handleAppend = useCallback(
      (newShadowRoot) => {
        setShadowRoot(newShadowRoot);
        if (onReady instanceof Function) {
          onReady();
        }
      },
      [setShadowRoot, onReady]
    );
    if (entityMetadataLoading === false && !entityMetadata)
      return /* @__PURE__ */ jsx(NotFoundErrorPage, {});
    if (!dom) {
      return /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Grid, { container: true, children: /* @__PURE__ */ jsx(Grid, { xs: 12, item: true, children: /* @__PURE__ */ jsx(TechDocsStateIndicator, {}) }) }) });
    }
    return /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Grid, { container: true, children: [
      /* @__PURE__ */ jsx(Grid, { xs: 12, item: true, children: /* @__PURE__ */ jsx(TechDocsStateIndicator, {}) }),
      withSearch && /* @__PURE__ */ jsx(Grid, { className: classes.search, xs: "auto", item: true, children: /* @__PURE__ */ jsx(
        TechDocsSearch,
        {
          entityId: entityRef,
          entityTitle: entityMetadata?.metadata?.title,
          searchResultUrlMapper
        }
      ) }),
      /* @__PURE__ */ jsxs(Grid, { xs: 12, item: true, children: [
        (state === "CHECKING" || isStyleLoading) && /* @__PURE__ */ jsx(Progress, {}),
        /* @__PURE__ */ jsx(TechDocsShadowDom, { element: dom, onAppend: handleAppend, children: /* @__PURE__ */ jsx(TechDocsReaderPageContentAddons, {}) })
      ] })
    ] }) });
  }
);
const Reader = TechDocsReaderPageContent;

export { Reader, TechDocsReaderPageContent };
//# sourceMappingURL=TechDocsReaderPageContent.esm.js.map