@grafana/ui
Version:
Grafana Components Library
63 lines (60 loc) • 2.53 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { useState } from 'react';
import { Trans, t } from '@grafana/i18n';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { ClipboardButton } from '../ClipboardButton/ClipboardButton.mjs';
import { Drawer } from '../Drawer/Drawer.mjs';
import { Stack } from '../Layout/Stack/Stack.mjs';
import { CodeEditor } from '../Monaco/CodeEditor.mjs';
import { Tab } from '../Tabs/Tab.mjs';
import { TabsBar } from '../Tabs/TabsBar.mjs';
"use strict";
var TableCellInspectorMode = /* @__PURE__ */ ((TableCellInspectorMode2) => {
TableCellInspectorMode2["code"] = "code";
TableCellInspectorMode2["text"] = "text";
return TableCellInspectorMode2;
})(TableCellInspectorMode || {});
function TableCellInspector({ value, onDismiss, mode }) {
const [currentMode, setMode] = useState(mode);
const text = value.trim();
const styles = 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__ */ jsx(TabsBar, { children: tabs.map((t2, index) => /* @__PURE__ */ jsx(Tab, { label: t2.label, active: t2.value === currentMode, onChangeTab: changeTabs }, `${t2.value}-${index}`)) });
return /* @__PURE__ */ jsx(Drawer, { onClose: onDismiss, title: t("grafana-ui.table.inspect-drawer-title", "Inspect value"), tabs: tabBar, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 2, children: [
/* @__PURE__ */ jsx(ClipboardButton, { icon: "copy", getText: () => text, style: { marginLeft: "auto", width: "200px" }, children: /* @__PURE__ */ jsx(Trans, { i18nKey: "grafana-ui.table.copy", children: "Copy to Clipboard" }) }),
currentMode === "code" ? /* @__PURE__ */ jsx(
CodeEditor,
{
width: "100%",
height: 500,
language: "json",
showLineNumbers: true,
showMiniMap: (text ? text.length : 0) > 100,
value: text,
readOnly: true,
wordWrap: true
}
) : /* @__PURE__ */ jsx("pre", { className: styles.textContainer, children: text })
] }) });
}
const getStyles = (theme) => ({
textContainer: css({
color: theme.colors.text.secondary,
minHeight: 42
})
});
export { TableCellInspector, TableCellInspectorMode };
//# sourceMappingURL=TableCellInspector.mjs.map