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

The Backstage plugin that renders technical documentation for your components

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useState, useCallback } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
import Toolbar from '@material-ui/core/Toolbar';
import Tooltip from '@material-ui/core/Tooltip';
import Menu from '@material-ui/core/Menu';
import Box from '@material-ui/core/Box';
import SettingsIcon from '@material-ui/icons/Settings';
import { useTechDocsReaderPage, useTechDocsAddons, TechDocsAddonLocations } from '@backstage/plugin-techdocs-react';
import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
import { techdocsTranslationRef } from '../../../translation.esm.js';

const useStyles = makeStyles((theme) => ({
  root: {
    gridArea: "pageSubheader",
    flexDirection: "column",
    minHeight: "auto",
    padding: theme.spacing(3, 3, 0),
    "@media print": {
      display: "none"
    }
  }
}));
const TechDocsReaderPageSubheader = (props) => {
  const classes = useStyles();
  const { t } = useTranslationRef(techdocsTranslationRef);
  const [anchorEl, setAnchorEl] = useState(null);
  const handleClick = useCallback((event) => {
    setAnchorEl(event.currentTarget);
  }, []);
  const handleClose = useCallback(() => {
    setAnchorEl(null);
  }, []);
  const {
    entityMetadata: { value: entityMetadata, loading: entityMetadataLoading }
  } = useTechDocsReaderPage();
  const addons = useTechDocsAddons();
  const subheaderAddons = addons.renderComponentsByLocation(
    TechDocsAddonLocations.Subheader
  );
  const settingsAddons = addons.renderComponentsByLocation(TechDocsAddonLocations.Settings);
  if (!subheaderAddons && !settingsAddons) return null;
  if (entityMetadataLoading === false && !entityMetadata) return null;
  return /* @__PURE__ */ jsx(Toolbar, { classes, ...props.toolbarProps, children: /* @__PURE__ */ jsxs(
    Box,
    {
      display: "flex",
      justifyContent: "flex-end",
      width: "100%",
      flexWrap: "wrap",
      children: [
        subheaderAddons,
        settingsAddons ? /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx(Tooltip, { title: t("reader.settings"), children: /* @__PURE__ */ jsx(
            IconButton,
            {
              "aria-controls": "tech-docs-reader-page-settings",
              "aria-haspopup": "true",
              onClick: handleClick,
              children: /* @__PURE__ */ jsx(SettingsIcon, {})
            }
          ) }),
          /* @__PURE__ */ jsx(
            Menu,
            {
              id: "tech-docs-reader-page-settings",
              getContentAnchorEl: null,
              anchorEl,
              anchorOrigin: { vertical: "bottom", horizontal: "right" },
              open: Boolean(anchorEl),
              onClose: handleClose,
              keepMounted: true,
              children: /* @__PURE__ */ jsx("div", { children: settingsAddons })
            }
          )
        ] }) : null
      ]
    }
  ) });
};

export { TechDocsReaderPageSubheader };
//# sourceMappingURL=TechDocsReaderPageSubheader.esm.js.map