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

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var dnd = require('@hello-pangea/dnd');
var lodash = require('lodash');
var React = require('react');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../../themes/ThemeContext.cjs');
var Button = require('../../Button/Button.cjs');
var Modal = require('../../Modal/Modal.cjs');
var DataLinksListItemBase = require('./DataLinksListItemBase.cjs');

"use strict";
function DataLinksInlineEditorBase({
  type,
  items,
  onChange,
  data,
  children,
  "data-testid": testId
}) {
  const [editIndex, setEditIndex] = React.useState(null);
  const [isNew, setIsNew] = React.useState(false);
  const [itemsSafe, setItemsSafe] = React.useState([]);
  React.useEffect(() => {
    setItemsSafe(items != null ? items : []);
  }, [items]);
  const styles = ThemeContext.useStyles2(getDataLinksInlineEditorStyles);
  const isEditing = editIndex !== null;
  const _onChange = (index, item) => {
    var _a, _b, _c;
    if (isNew) {
      const title = item.title;
      const url = (_c = (_b = item.url) != null ? _b : (_a = item.fetch) == null ? void 0 : _a.url) != null ? _c : "";
      if (title.trim() === "" && url.trim() === "") {
        setIsNew(false);
        setEditIndex(null);
        return;
      } else {
        setEditIndex(null);
        setIsNew(false);
      }
    }
    if (item.oneClick === true) {
      itemsSafe.forEach((item2) => {
        if (item2.oneClick) {
          item2.oneClick = false;
        }
      });
    }
    const update = lodash.cloneDeep(itemsSafe);
    update[index] = item;
    onChange(update);
    setEditIndex(null);
  };
  const _onCancel = (index) => {
    if (isNew) {
      setIsNew(false);
    }
    setEditIndex(null);
  };
  const onDataLinkAdd = () => {
    let update = lodash.cloneDeep(itemsSafe);
    setEditIndex(update.length);
    setIsNew(true);
  };
  const onDataLinkRemove = (index) => {
    const update = lodash.cloneDeep(itemsSafe);
    update.splice(index, 1);
    onChange(update);
  };
  const onDragEnd = (result) => {
    if (items == null || result.destination == null) {
      return;
    }
    const update = lodash.cloneDeep(itemsSafe);
    const link = update[result.source.index];
    update.splice(result.source.index, 1);
    update.splice(result.destination.index, 0, link);
    setItemsSafe(update);
    onChange(update);
  };
  const getItemText = (action) => {
    let text = "";
    switch (type) {
      case "link":
        text = action === "edit" ? i18n.t("grafana-ui.data-links-inline-editor.edit-link", "Edit link") : i18n.t("grafana-ui.data-links-inline-editor.add-link", "Add link");
        break;
      case "action":
        text = action === "edit" ? i18n.t("grafana-ui.action-editor.inline.edit-action", "Edit action") : i18n.t("grafana-ui.action-editor.inline.add-action", "Add action");
        break;
    }
    return text;
  };
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, "data-testid": testId, children: [
    /* @__PURE__ */ jsxRuntime.jsx(dnd.DragDropContext, { onDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(dnd.Droppable, { droppableId: "sortable-links", direction: "vertical", children: (provided) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.wrapper, ref: provided.innerRef, ...provided.droppableProps, children: [
      itemsSafe.map((item, idx) => {
        const key = `${item.title}/${idx}`;
        return /* @__PURE__ */ jsxRuntime.jsx(
          DataLinksListItemBase.DataLinksListItemBase,
          {
            index: idx,
            item,
            onChange: _onChange,
            onEdit: () => setEditIndex(idx),
            onRemove: () => onDataLinkRemove(idx),
            data,
            itemKey: key
          },
          key
        );
      }),
      provided.placeholder
    ] }) }) }),
    isEditing && editIndex !== null && /* @__PURE__ */ jsxRuntime.jsx(
      Modal.Modal,
      {
        title: getItemText(isNew ? "add" : "edit"),
        isOpen: true,
        closeOnBackdropClick: false,
        onDismiss: () => {
          _onCancel(editIndex);
        },
        children: children(itemsSafe[editIndex], editIndex, _onChange, _onCancel)
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { size: "sm", icon: "plus", onClick: onDataLinkAdd, variant: "secondary", className: styles.button, children: getItemText("add") })
  ] });
}
const getDataLinksInlineEditorStyles = (theme) => ({
  container: css.css({
    position: "relative"
  }),
  wrapper: css.css({
    marginBottom: theme.spacing(2),
    display: "flex",
    flexDirection: "column"
  }),
  button: css.css({
    marginLeft: theme.spacing(1)
  })
});

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