IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

DataLinks: fix syntax highlighting not being applied on first render (#20199)

Browse Source 
* Enable prism syntax for data links outside of effect

* Retrieve theme with useTheme hook
This commit is contained in:
Dominik Prokop 2019-11-06 12:41:41 +01:00 committed by GitHub
parent 54602f16a8
commit 46a4118461
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/grafana-ui/src/components/DataLinks/DataLinksEditor.tsx
View File

@ -1,14 +1,14 @@
// Libraries // Libraries
import React, { FC, useContext, useEffect } from 'react'; import React, { FC } from 'react';
// @ts-ignore // @ts-ignore
import Prism from 'prismjs'; import Prism from 'prismjs';
// Components // Components
import { css } from 'emotion'; import { css } from 'emotion';
import { DataLink } from '@grafana/data'; import { DataLink } from '@grafana/data';
import { ThemeContext } from '../../index';
import { Button } from '../index'; import { Button } from '../index';
import { DataLinkEditor } from './DataLinkEditor'; import { DataLinkEditor } from './DataLinkEditor';
import { VariableSuggestion } from './DataLinkSuggestions'; import { VariableSuggestion } from './DataLinkSuggestions';
import { useTheme } from '../../themes/ThemeContext';
interface DataLinksEditorProps { interface DataLinksEditorProps {
value: DataLink[]; value: DataLink[];
@ -26,11 +26,8 @@ export const enableDatalinksPrismSyntax = () => {
}; };
export const DataLinksEditor: FC<DataLinksEditorProps> = React.memo(({ value, onChange, suggestions, maxLinks }) => { export const DataLinksEditor: FC<DataLinksEditorProps> = React.memo(({ value, onChange, suggestions, maxLinks }) => {
const theme = useContext(ThemeContext); const theme = useTheme();
enableDatalinksPrismSyntax();
useEffect(() => {
enableDatalinksPrismSyntax();
});
const onAdd = () => { const onAdd = () => {
onChange(value ? [...value, { url: '', title: '' }] : [{ url: '', title: '' }]); onChange(value ? [...value, { url: '', title: '' }] : [{ url: '', title: '' }]);