@grafana/ui
Version:
Grafana Components Library
81 lines (76 loc) • 3.69 kB
JavaScript
'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 Field = require('../Forms/Field.cjs');
var Label = require('../Forms/Label.cjs');
var Input = require('../Input/Input.cjs');
var Switch = require('../Switch/Switch.cjs');
var DataLinkInput = require('./DataLinkInput.cjs');
"use strict";
const DataLinkEditor = React.memo(
({ index, value, onChange, suggestions, isLast, showOneClick = false }) => {
const styles = ThemeContext.useStyles2(getStyles);
const labelStyles = ThemeContext.useStyles2(Label.getLabelStyles);
const id = React.useId();
const onUrlChange = (url, callback) => {
onChange(index, { ...value, url }, callback);
};
const onTitleChange = (event) => {
onChange(index, { ...value, title: event.target.value });
};
const onOpenInNewTabChanged = () => {
onChange(index, { ...value, targetBlank: !value.targetBlank });
};
const onOneClickChanged = () => {
onChange(index, { ...value, oneClick: !value.oneClick });
};
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.listItem, children: [
/* @__PURE__ */ jsxRuntime.jsx(Field.Field, { label: i18n.t("grafana-ui.data-link-editor.title-label", "Title"), children: /* @__PURE__ */ jsxRuntime.jsx(
Input.Input,
{
id: "link-title",
value: value.title,
onChange: onTitleChange,
placeholder: i18n.t("grafana-ui.data-link-editor.title-placeholder", "Show details")
}
) }),
/* @__PURE__ */ jsxRuntime.jsx(
Field.Field,
{
label: /* @__PURE__ */ jsxRuntime.jsx("div", { className: labelStyles.label, id, children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.data-link-editor.url-label", children: "URL" }) }),
children: /* @__PURE__ */ jsxRuntime.jsx(DataLinkInput.DataLinkInput, { "aria-labelledby": id, value: value.url, onChange: onUrlChange, suggestions })
}
),
/* @__PURE__ */ jsxRuntime.jsx(Field.Field, { label: i18n.t("grafana-ui.data-link-editor.new-tab-label", "Open in new tab"), children: /* @__PURE__ */ jsxRuntime.jsx(Switch.Switch, { id: "new-tab-toggle", value: value.targetBlank || false, onChange: onOpenInNewTabChanged }) }),
showOneClick && /* @__PURE__ */ jsxRuntime.jsx(
Field.Field,
{
label: i18n.t("grafana-ui.data-link-inline-editor.one-click", "One click"),
description: i18n.t(
"grafana-ui.data-link-editor-modal.one-click-description",
"Only one link can have one click enabled at a time"
),
children: /* @__PURE__ */ jsxRuntime.jsx(Switch.Switch, { id: "one-click-toggle", value: value.oneClick || false, onChange: onOneClickChanged })
}
),
isLast && /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.data-link-editor.info", className: styles.infoText, children: "With data links you can reference data variables like series name, labels and values. Type CMD+Space, CTRL+Space, or $ to open variable suggestions." })
] });
}
);
DataLinkEditor.displayName = "DataLinkEditor";
const getStyles = (theme) => ({
listItem: css.css({
marginBottom: theme.spacing()
}),
infoText: css.css({
paddingBottom: theme.spacing(2),
marginLeft: "66px",
color: theme.colors.text.secondary
})
});
exports.DataLinkEditor = DataLinkEditor;
//# sourceMappingURL=DataLinkEditor.cjs.map