@grafana/ui/dist/cjs/components/Table/TableCellInspector.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var ClipboardButton = require('../ClipboardButton/ClipboardButton.cjs');
var Drawer = require('../Drawer/Drawer.cjs');
var Stack = require('../Layout/Stack/Stack.cjs');
var CodeEditor = require('../Monaco/CodeEditor.cjs');
var Tab = require('../Tabs/Tab.cjs');
var TabsBar = require('../Tabs/TabsBar.cjs');

"use strict";
var TableCellInspectorMode = /* @__PURE__ */ ((TableCellInspectorMode2) => {
  TableCellInspectorMode2["code"] = "code";
  TableCellInspectorMode2["text"] = "text";
  return TableCellInspectorMode2;
})(TableCellInspectorMode || {});
const toString = (value) => {
  var _a, _b;
  if (typeof value === "string") {
    return value;
  }
  return (_b = (_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) != null ? _b : "";
};
function TableCellInspector({ value, onDismiss, mode }) {
  const [currentMode, setMode] = React.useState(mode);
  const text = toString(value).trim();
  const styles = ThemeContext.useStyles2(getStyles);
  const tabs = [
    {
      label: "Plain text",
      value: "text"
    },
    {
      label: "Code editor",
      value: "code"
    }
  ];
  const changeTabs = () => {
    setMode(currentMode === "text" /* text */ ? "code" /* code */ : "text" /* text */);
  };
  const tabBar = /* @__PURE__ */ jsxRuntime.jsx(TabsBar.TabsBar, { children: tabs.map((t2, index) => /* @__PURE__ */ jsxRuntime.jsx(Tab.Tab, { label: t2.label, active: t2.value === currentMode, onChangeTab: changeTabs }, `${t2.value}-${index}`)) });
  return /* @__PURE__ */ jsxRuntime.jsx(Drawer.Drawer, { onClose: onDismiss, title: i18n.t("grafana-ui.table.inspect-drawer-title", "Inspect value"), tabs: tabBar, children: /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { direction: "column", gap: 2, children: [
    /* @__PURE__ */ jsxRuntime.jsx(ClipboardButton.ClipboardButton, { icon: "copy", getText: () => text, style: { marginLeft: "auto", width: "200px" }, children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.table.copy", children: "Copy to Clipboard" }) }),
    currentMode === "code" ? /* @__PURE__ */ jsxRuntime.jsx(
      CodeEditor.CodeEditor,
      {
        width: "100%",
        height: 500,
        language: "json",
        showLineNumbers: true,
        showMiniMap: (text ? text.length : 0) > 100,
        value: text,
        readOnly: true,
        wordWrap: true
      }
    ) : /* @__PURE__ */ jsxRuntime.jsx("pre", { className: styles.textContainer, children: text })
  ] }) });
}
const getStyles = (theme) => ({
  textContainer: css.css({
    color: theme.colors.text.secondary,
    minHeight: 42
  })
});

exports.TableCellInspector = TableCellInspector;
exports.TableCellInspectorMode = TableCellInspectorMode;
//# sourceMappingURL=TableCellInspector.cjs.map