IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-25 02:10:45 -06:00
Code Issues Packages Projects Releases Wiki Activity

Templating: Made default template variable query editor field a text area with dynamic automatic height (#20288)

Browse Source
This commit is contained in:
Torkel Ödegaard 2019-11-11 10:04:22 +01:00 committed by GitHub
parent 8430a182ef
commit dd6f5efabe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/app/features/templating/DefaultVariableQueryEditor.tsx
View File

@ -1,5 +1,4 @@
import React, { PureComponent } from 'react';
import { Input } from '@grafana/ui';
import { VariableQueryProps } from 'app/types/plugins';
export default class DefaultVariableQueryEditor extends PureComponent<VariableQueryProps, any> {
@ -8,20 +7,30 @@ export default class DefaultVariableQueryEditor extends PureComponent<VariableQu
this.state = { value: props.query };
}
onChange = (event: React.FormEvent<HTMLInputElement>) => {
onChange = (event: React.FormEvent<HTMLTextAreaElement>) => {
this.setState({ value: event.currentTarget.value });
};
onBlur = (event: React.FormEvent<HTMLInputElement>) => {
onBlur = (event: React.FormEvent<HTMLTextAreaElement>) => {
this.props.onChange(event.currentTarget.value, event.currentTarget.value);
};
getLineCount() {
const { value } = this.state;
if (typeof value === 'string') {
return value.split('\n').length;
}
return 1;
}
render() {
return (
<div className="gf-form">
<span className="gf-form-label width-10">Query</span>
<Input
type="text"
<textarea
rows={this.getLineCount()}
className="gf-form-input"
value={this.state.value}
onChange={this.onChange}