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

Fixes #15372 with number input and parseFloat

Browse Source
This commit is contained in:
Hugo Häggmark 2019-02-12 11:10:31 +01:00
parent 1407691de2
commit da80286f97
2 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { ChangeEvent } from 'react';
import { shallow } from 'enzyme';
import { ThresholdsEditor, Props } from './ThresholdsEditor';
@ -118,7 +118,7 @@ describe('change threshold value', () => {
];
const instance = setup({ thresholds });
const mockEvent = { target: { value: 12 } };
const mockEvent = ({ target: { value: '12' } } as any) as ChangeEvent<HTMLInputElement>;
instance.onChangeThresholdValue(mockEvent, thresholds[0]);
@ -137,7 +137,7 @@ describe('change threshold value', () => {
thresholds,
};
const mockEvent = { target: { value: 78 } };
const mockEvent = ({ target: { value: '78' } } as any) as ChangeEvent<HTMLInputElement>;
instance.onChangeThresholdValue(mockEvent, thresholds[1]);

17
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
View File

@ -1,4 +1,4 @@
import React, { PureComponent } from 'react';
import React, { PureComponent, ChangeEvent } from 'react';
import { Threshold } from '../../types';
import { ColorPicker } from '../ColorPicker/ColorPicker';
import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
@ -94,14 +94,15 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
);
};
onChangeThresholdValue = (event: any, threshold: Threshold) => {
onChangeThresholdValue = (event: ChangeEvent<HTMLInputElement>, threshold: Threshold) => {
if (threshold.index === 0) {
return;
}
const { thresholds } = this.state;
const parsedValue = parseInt(event.target.value, 10);
const value = isNaN(parsedValue) ? null : parsedValue;
const cleanValue = event.target.value.replace(/,/g, '.');
const parsedValue = parseFloat(cleanValue);
const value = isNaN(parsedValue) ? '' : parsedValue;
const newThresholds = thresholds.map(t => {
if (t === threshold && t.index !== 0) {
@ -164,16 +165,14 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
<div className="thresholds-row-input-inner-color">
{threshold.color && (
<div className="thresholds-row-input-inner-color-colorpicker">
<ColorPicker
color={threshold.color}
onChange={color => this.onChangeThresholdColor(threshold, color)}
/>
<ColorPicker color={threshold.color} onChange={color => this.onChangeThresholdColor(threshold, color)} />
</div>
)}
</div>
<div className="thresholds-row-input-inner-value">
<input
type="text"
type="number"
step="0.0001"
onChange={event => this.onChangeThresholdValue(event, threshold)}
value={value}
onBlur={this.onBlur}