UNPKG

@grafana/ui

Version:
1 lines 5.64 kB
{"version":3,"file":"DataLinkEditor.mjs","sources":["../../../../src/components/DataLinks/DataLinkEditor.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { memo, ChangeEvent } from 'react';\n\nimport { VariableSuggestion, GrafanaTheme2, DataLink } from '@grafana/data';\nimport { t, Trans } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Field } from '../Forms/Field';\nimport { Input } from '../Input/Input';\nimport { Switch } from '../Switch/Switch';\n\nimport { DataLinkInput } from './DataLinkInput';\n\ninterface DataLinkEditorProps {\n index: number;\n isLast: boolean;\n value: DataLink;\n suggestions: VariableSuggestion[];\n onChange: (index: number, link: DataLink, callback?: () => void) => void;\n showOneClick?: boolean;\n}\n\nexport const DataLinkEditor = memo(\n ({ index, value, onChange, suggestions, isLast, showOneClick = false }: DataLinkEditorProps) => {\n const styles = useStyles2(getStyles);\n\n const onUrlChange = (url: string, callback?: () => void) => {\n onChange(index, { ...value, url }, callback);\n };\n\n const onTitleChange = (event: ChangeEvent<HTMLInputElement>) => {\n onChange(index, { ...value, title: event.target.value });\n };\n\n const onOpenInNewTabChanged = () => {\n onChange(index, { ...value, targetBlank: !value.targetBlank });\n };\n\n const onOneClickChanged = () => {\n onChange(index, { ...value, oneClick: !value.oneClick });\n };\n\n return (\n <div className={styles.listItem}>\n <Field label={t('grafana-ui.data-link-editor.title-label', 'Title')}>\n <Input\n id=\"link-title\"\n value={value.title}\n onChange={onTitleChange}\n placeholder={t('grafana-ui.data-link-editor.title-placeholder', 'Show details')}\n />\n </Field>\n\n <Field label={t('grafana-ui.data-link-editor.url-label', 'URL')}>\n <DataLinkInput value={value.url} onChange={onUrlChange} suggestions={suggestions} />\n </Field>\n\n <Field label={t('grafana-ui.data-link-editor.new-tab-label', 'Open in new tab')}>\n <Switch id=\"new-tab-toggle\" value={value.targetBlank || false} onChange={onOpenInNewTabChanged} />\n </Field>\n\n {showOneClick && (\n <Field\n label={t('grafana-ui.data-link-inline-editor.one-click', 'One click')}\n description={t(\n 'grafana-ui.data-link-editor-modal.one-click-description',\n 'Only one link can have one click enabled at a time'\n )}\n >\n <Switch id=\"one-click-toggle\" value={value.oneClick || false} onChange={onOneClickChanged} />\n </Field>\n )}\n\n {isLast && (\n <Trans i18nKey=\"grafana-ui.data-link-editor.info\" className={styles.infoText}>\n With data links you can reference data variables like series name, labels and values. Type CMD+Space,\n CTRL+Space, or $ to open variable suggestions.\n </Trans>\n )}\n </div>\n );\n }\n);\n\nDataLinkEditor.displayName = 'DataLinkEditor';\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n listItem: css({\n marginBottom: theme.spacing(),\n }),\n infoText: css({\n paddingBottom: theme.spacing(2),\n marginLeft: '66px',\n color: theme.colors.text.secondary,\n }),\n});\n"],"names":[],"mappings":"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"}