Commit da80286f by Hugo Häggmark

Fixes #15372 with number input and parseFloat

parent 1407691d
import React from 'react'; import React, { ChangeEvent } from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import { ThresholdsEditor, Props } from './ThresholdsEditor'; import { ThresholdsEditor, Props } from './ThresholdsEditor';
...@@ -118,7 +118,7 @@ describe('change threshold value', () => { ...@@ -118,7 +118,7 @@ describe('change threshold value', () => {
]; ];
const instance = setup({ thresholds }); const instance = setup({ thresholds });
const mockEvent = { target: { value: 12 } }; const mockEvent = ({ target: { value: '12' } } as any) as ChangeEvent<HTMLInputElement>;
instance.onChangeThresholdValue(mockEvent, thresholds[0]); instance.onChangeThresholdValue(mockEvent, thresholds[0]);
...@@ -137,7 +137,7 @@ describe('change threshold value', () => { ...@@ -137,7 +137,7 @@ describe('change threshold value', () => {
thresholds, thresholds,
}; };
const mockEvent = { target: { value: 78 } }; const mockEvent = ({ target: { value: '78' } } as any) as ChangeEvent<HTMLInputElement>;
instance.onChangeThresholdValue(mockEvent, thresholds[1]); instance.onChangeThresholdValue(mockEvent, thresholds[1]);
......
import React, { PureComponent } from 'react'; import React, { PureComponent, ChangeEvent } from 'react';
import { Threshold } from '../../types'; import { Threshold } from '../../types';
import { ColorPicker } from '../ColorPicker/ColorPicker'; import { ColorPicker } from '../ColorPicker/ColorPicker';
import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup'; import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
...@@ -94,14 +94,15 @@ export class ThresholdsEditor extends PureComponent<Props, State> { ...@@ -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) { if (threshold.index === 0) {
return; return;
} }
const { thresholds } = this.state; const { thresholds } = this.state;
const parsedValue = parseInt(event.target.value, 10); const cleanValue = event.target.value.replace(/,/g, '.');
const value = isNaN(parsedValue) ? null : parsedValue; const parsedValue = parseFloat(cleanValue);
const value = isNaN(parsedValue) ? '' : parsedValue;
const newThresholds = thresholds.map(t => { const newThresholds = thresholds.map(t => {
if (t === threshold && t.index !== 0) { if (t === threshold && t.index !== 0) {
...@@ -164,16 +165,14 @@ export class ThresholdsEditor extends PureComponent<Props, State> { ...@@ -164,16 +165,14 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
<div className="thresholds-row-input-inner-color"> <div className="thresholds-row-input-inner-color">
{threshold.color && ( {threshold.color && (
<div className="thresholds-row-input-inner-color-colorpicker"> <div className="thresholds-row-input-inner-color-colorpicker">
<ColorPicker <ColorPicker color={threshold.color} onChange={color => this.onChangeThresholdColor(threshold, color)} />
color={threshold.color}
onChange={color => this.onChangeThresholdColor(threshold, color)}
/>
</div> </div>
)} )}
</div> </div>
<div className="thresholds-row-input-inner-value"> <div className="thresholds-row-input-inner-value">
<input <input
type="text" type="number"
step="0.0001"
onChange={event => this.onChangeThresholdValue(event, threshold)} onChange={event => this.onChangeThresholdValue(event, threshold)}
value={value} value={value}
onBlur={this.onBlur} onBlur={this.onBlur}
......
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