@grafana/ui/dist/cjs/components/DataLinks/DataLinksInlineEditor/DataLinksListItemBase.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var css = require('@emotion/css');
var dnd = require('@hello-pangea/dnd');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../../themes/ThemeContext.cjs');
var Badge = require('../../Badge/Badge.cjs');
var Icon = require('../../Icon/Icon.cjs');
var IconButton = require('../../IconButton/IconButton.cjs');

"use strict";
function DataLinksListItemBase({
  item,
  onEdit,
  onRemove,
  index,
  itemKey
}) {
  var _a, _b;
  const styles = ThemeContext.useStyles2(getDataLinkListItemStyles);
  const { title = "", oneClick = false } = item;
  const url = (_b = "type" in item ? (_a = item[item.type]) == null ? void 0 : _a.url : item.url) != null ? _b : "";
  const hasTitle = title.trim() !== "";
  const hasUrl = url.trim() !== "";
  return /* @__PURE__ */ jsxRuntime.jsx(dnd.Draggable, { draggableId: itemKey, index, children: (provided) => /* @__PURE__ */ React.createElement(
    "div",
    {
      className: css.cx(styles.wrapper, styles.dragRow),
      ref: provided.innerRef,
      ...provided.draggableProps,
      key: index
    },
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.linkDetails, children: [
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(styles.url, !hasTitle && styles.notConfigured), children: hasTitle ? title : i18n.t("grafana-ui.data-links-inline-editor.title-not-provided", "Title not provided") }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(styles.url, !hasUrl && styles.notConfigured), title: url, children: hasUrl ? url : i18n.t("grafana-ui.data-links-inline-editor.url-not-provided", "Data link url not provided") })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.icons, children: [
      oneClick && /* @__PURE__ */ jsxRuntime.jsx(
        Badge.Badge,
        {
          color: "blue",
          text: i18n.t("grafana-ui.data-links-inline-editor.one-click", "One click"),
          tooltip: i18n.t("grafana-ui.data-links-inline-editor.one-click-enabled", "One click enabled")
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx(
        IconButton.IconButton,
        {
          name: "pen",
          onClick: onEdit,
          className: styles.icon,
          tooltip: i18n.t("grafana-ui.data-links-inline-editor.tooltip-edit", "Edit")
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx(
        IconButton.IconButton,
        {
          name: "trash-alt",
          onClick: onRemove,
          className: styles.icon,
          tooltip: i18n.t("grafana-ui.data-links-inline-editor.tooltip-remove", "Remove")
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dragIcon, ...provided.dragHandleProps, children: /* @__PURE__ */ jsxRuntime.jsx(
        Icon.Icon,
        {
          name: "draggabledots",
          size: "lg",
          title: i18n.t("grafana-ui.data-links-inline-editor.drag-handle-label", "Reorder data link {{title}}", {
            title: hasTitle ? title : url
          })
        }
      ) })
    ] })
  ) }, itemKey);
}
const getDataLinkListItemStyles = (theme) => {
  return {
    wrapper: css.css({
      display: "flex",
      flexGrow: 1,
      alignItems: "center",
      justifyContent: "space-between",
      padding: "5px 0 5px 10px",
      borderRadius: theme.shape.radius.default,
      background: theme.colors.background.secondary,
      gap: 8
    }),
    linkDetails: css.css({
      display: "flex",
      flexDirection: "column",
      flexGrow: 1,
      maxWidth: `calc(100% - 100px)`
    }),
    errored: css.css({
      color: theme.colors.error.text,
      fontStyle: "italic"
    }),
    notConfigured: css.css({
      fontStyle: "italic"
    }),
    title: css.css({
      color: theme.colors.text.primary,
      fontSize: theme.typography.size.sm,
      fontWeight: theme.typography.fontWeightMedium
    }),
    url: css.css({
      color: theme.colors.text.secondary,
      fontSize: theme.typography.size.sm,
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis"
    }),
    dragRow: css.css({
      position: "relative",
      margin: "8px"
    }),
    icons: css.css({
      display: "flex",
      padding: 6,
      alignItems: "center",
      gap: 8
    }),
    dragIcon: css.css({
      cursor: "grab",
      color: theme.colors.text.secondary,
      margin: theme.spacing(0, 0.5)
    }),
    icon: css.css({
      color: theme.colors.text.secondary
    })
  };
};

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