@backstage/plugin-home-react/dist/extensions.esm.js

A Backstage plugin that contains react components helps you build a home page

import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, Suspense } from 'react';
import IconButton from '@material-ui/core/IconButton';
import SettingsIcon from '@material-ui/icons/Settings';
import { InfoCard } from '@backstage/core-components';
import { SettingsModal } from './components/SettingsModal.esm.js';
import './components/ContentModal.esm.js';
import { useApp, createReactExtension } from '@backstage/core-plugin-api';
import { useTranslationRef } from '@backstage/frontend-plugin-api';
import { homeReactTranslationRef } from './translation.esm.js';

function createCardExtension(options) {
  const { title, components, name, description, layout, settings } = options;
  const isCustomizable = settings?.schema !== void 0;
  return createReactExtension({
    name,
    data: { title, description, "home.widget.config": { layout, settings } },
    component: {
      lazy: () => components().then((componentParts) => {
        return (props) => {
          return /* @__PURE__ */ jsx(
            CardExtension,
            {
              ...props,
              ...componentParts,
              title: props.title || title,
              isCustomizable
            }
          );
        };
      })
    }
  });
}
function CardExtension(props) {
  const {
    Renderer,
    Content,
    Settings,
    Actions,
    ContextProvider,
    isCustomizable,
    title,
    ...childProps
  } = props;
  const app = useApp();
  const { Progress } = app.getComponents();
  const [settingsOpen, setSettingsOpen] = useState(false);
  const { t } = useTranslationRef(homeReactTranslationRef);
  if (Renderer) {
    return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Progress, {}), children: /* @__PURE__ */ jsx(
      Renderer,
      {
        ...title && { title },
        ...{
          Content,
          ...Actions ? { Actions } : {},
          ...Settings && !isCustomizable ? { Settings } : {},
          ...ContextProvider ? { ContextProvider } : {},
          ...childProps
        }
      }
    ) });
  }
  const cardProps = {
    divider: !!title,
    ...title && { title },
    ...Settings && !isCustomizable ? {
      action: /* @__PURE__ */ jsx(IconButton, { onClick: () => setSettingsOpen(true), children: /* @__PURE__ */ jsx(SettingsIcon, { children: t("cardExtension.settingsButtonTitle") }) })
    } : {},
    ...Actions ? {
      actions: /* @__PURE__ */ jsx(Actions, {})
    } : {}
  };
  const innerContent = /* @__PURE__ */ jsxs(InfoCard, { ...cardProps, children: [
    Settings && !isCustomizable && /* @__PURE__ */ jsx(
      SettingsModal,
      {
        open: settingsOpen,
        componentName: title,
        close: () => setSettingsOpen(false),
        children: /* @__PURE__ */ jsx(Settings, {})
      }
    ),
    /* @__PURE__ */ jsx(Content, { ...childProps })
  ] });
  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Progress, {}), children: ContextProvider ? /* @__PURE__ */ jsx(ContextProvider, { ...childProps, children: innerContent }) : innerContent });
}

export { CardExtension, createCardExtension };
//# sourceMappingURL=extensions.esm.js.map