You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.3 KiB
43 lines
1.3 KiB
import React, { PureComponent } from 'react';
|
|
import { NavigationKey } from '../types';
|
|
|
|
export interface Props extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'value'> {
|
|
onChange: (value: string) => void;
|
|
onNavigate: (key: NavigationKey, clearOthers: boolean) => void;
|
|
value: string | null;
|
|
}
|
|
|
|
export class VariableInput extends PureComponent<Props> {
|
|
onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (NavigationKey[event.keyCode]) {
|
|
const clearOthers = event.ctrlKey || event.metaKey || event.shiftKey;
|
|
this.props.onNavigate(event.keyCode as NavigationKey, clearOthers);
|
|
event.preventDefault();
|
|
}
|
|
};
|
|
|
|
onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
this.props.onChange(event.target.value);
|
|
};
|
|
|
|
render() {
|
|
const { value, id, onNavigate, ...restProps } = this.props;
|
|
return (
|
|
<input
|
|
{...restProps}
|
|
ref={(instance) => {
|
|
if (instance) {
|
|
instance.focus();
|
|
instance.setAttribute('style', `width:${Math.max(instance.width, 150)}px`);
|
|
}
|
|
}}
|
|
type="text"
|
|
className="gf-form-input"
|
|
value={value ?? ''}
|
|
onChange={this.onChange}
|
|
onKeyDown={this.onKeyDown}
|
|
placeholder="Enter variable value"
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|