@grafana/ui/dist/cjs/components/DataLinks/FieldLinkList.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Icon = require('../Icon/Icon.cjs');
var DataLinkButton = require('./DataLinkButton.cjs');

"use strict";
function FieldLinkList({ links }) {
  const styles = ThemeContext.useStyles2(getStyles);
  if (links.length === 1) {
    return /* @__PURE__ */ jsxRuntime.jsx(DataLinkButton.DataLinkButton, { link: links[0] });
  }
  const externalLinks = links.filter((link) => link.target === "_blank");
  const internalLinks = links.filter((link) => link.target === "_self");
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    internalLinks.map((link, i) => {
      return /* @__PURE__ */ jsxRuntime.jsx(DataLinkButton.DataLinkButton, { link }, i);
    }),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.wrapper, children: [
      /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.externalLinksHeading, children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.field-link-list.external-links-heading", children: "External links" }) }),
      externalLinks.map((link, i) => /* @__PURE__ */ jsxRuntime.jsxs("a", { href: link.href, target: link.target, className: styles.externalLink, children: [
        /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "external-link-alt" }),
        link.title
      ] }, i))
    ] })
  ] });
}
const getStyles = (theme) => ({
  wrapper: css.css({
    flexBasis: "150px",
    width: "100px",
    marginTop: theme.spacing(1)
  }),
  externalLinksHeading: css.css({
    color: theme.colors.text.secondary,
    fontWeight: theme.typography.fontWeightRegular,
    fontSize: theme.typography.size.sm,
    margin: 0
  }),
  externalLink: css.css({
    color: theme.colors.text.link,
    fontWeight: theme.typography.fontWeightRegular,
    display: "block",
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis",
    "&:hover": {
      textDecoration: "underline"
    },
    div: {
      marginRight: theme.spacing(1)
    }
  })
});

exports.FieldLinkList = FieldLinkList;
//# sourceMappingURL=FieldLinkList.cjs.map