Commit 48114edc by Torkel Ödegaard

Minor refactoring of new react text panel

parent 90f8179b
// Libraries
import React, { PureComponent } from 'react';
import Remarkable from 'remarkable';
import { debounce } from 'lodash';
// Utils
import { sanitize } from 'app/core/utils/text';
import config from 'app/core/config';
import { debounce } from 'lodash';
// Types
import { TextOptions } from './types';
......@@ -42,13 +44,8 @@ export class TextPanel extends PureComponent<Props, State> {
const { replaceVariables } = this.props;
html = config.disableSanitizeHtml ? html : sanitize(html);
try {
return replaceVariables(html);
} catch (e) {
// TODO -- put the error in the header window
console.log('Text panel error: ', e);
return html;
}
return replaceVariables(html);
}
prepareText(content: string): string {
......
import React, { PureComponent } from 'react';
// Libraries
import React, { PureComponent, ChangeEvent } from 'react';
// Components
import { PanelEditorProps, PanelOptionsGroup, Select, SelectOptionItem } from '@grafana/ui';
// Types
import { TextOptions } from './types';
export class TextPanelEditor extends PureComponent<PanelEditorProps<TextOptions>> {
......@@ -12,19 +16,21 @@ export class TextPanelEditor extends PureComponent<PanelEditorProps<TextOptions>
onModeChange = (item: SelectOptionItem) => this.props.onOptionsChange({ ...this.props.options, mode: item.value });
onContentChange = evt => this.props.onOptionsChange({ ...this.props.options, content: (event.target as any).value });
onContentChange = (evt: ChangeEvent<HTMLTextAreaElement>) => {
this.props.onOptionsChange({ ...this.props.options, content: (event.target as any).value });
};
render() {
const { mode, content } = this.props.options;
return (
<PanelOptionsGroup title="Text">
<div className="gf-form">
<span className="gf-form-label">Mode</span>
<Select onChange={this.onModeChange} value={this.modes.find(e => mode === e.value)} options={this.modes} />
<div className="gf-form-inline">
<div className="gf-form">
<span className="gf-form-label">Mode</span>
<Select onChange={this.onModeChange} value={this.modes.find(e => mode === e.value)} options={this.modes} />
</div>
</div>
{/* TODO: <code-editor */}
<textarea value={content} onChange={this.onContentChange} className="gf-form-input" rows={10} />
</PanelOptionsGroup>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment