Remove decimal option and use type=text

src/components/slider-prompt/slider-prompt.css

@@ -26,12 +26,6 @@
     font-size: .875rem;
 }
 
-.decimal-option {
-    font-weight: 500;
-    margin: 0 0 0.75rem;
-    padding-bottom: 1rem;
-}
-
 .button-row {
     font-weight: bolder;
     text-align: right;

src/components/slider-prompt/slider-prompt.jsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import {defineMessages, FormattedMessage, intlShape, injectIntl} from 'react-intl';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -24,11 +23,6 @@ const messages = defineMessages({
         defaultMessage: 'Change slider range',
         description: 'Title of slider modal',
         id: 'gui.sliderModal.title'
-    },
-    decimal: {
-        defaultMessage: 'Handle as decimal value',
-        description: 'Label of a checkbox which is checked when it should handle decimal values.',
-        id: 'gui.sliderModal.decimal'
     }
 });
 
@@ -45,12 +39,11 @@ const SliderPromptComponent = props => (
             </Box>
             <Box>
                 <input
-                    autoFocus
                     className={styles.minInput}
                     defaultValue={props.defaultMinValue}
                     name={props.intl.formatMessage(messages.minValue)}
-                    step="0.01"
-                    type="number"
+                    pattern="-?[0-9]*(\.[0-9]+)?"
+                    type="text"
                     onChange={props.onChangeMin}
                     onFocus={props.onFocus}
                     onKeyPress={props.onKeyPress}
@@ -64,27 +57,13 @@ const SliderPromptComponent = props => (
                     className={styles.maxInput}
                     defaultValue={props.defaultMaxValue}
                     name={props.intl.formatMessage(messages.maxValue)}
-                    step="0.01"
-                    type="number"
+                    pattern="-?[0-9]*(\.[0-9]+)?"
+                    type="text"
                     onChange={props.onChangeMax}
                     onFocus={props.onFocus}
                     onKeyPress={props.onKeyPress}
                 />
             </Box>
-            <Box className={classNames(styles.decimalOption)}>
-                <label
-                    className={classNames({[styles.disabledLabel]: props.mustDecimal})}
-                >
-                    <input
-                        checked={props.decimalSelected || props.mustDecimal}
-                        defaultValue={props.defaultDecimal}
-                        disabled={props.mustDecimal}
-                        type="checkbox"
-                        onChange={props.onDecimalOptionChange}
-                    />
-                    {props.intl.formatMessage(messages.decimal)}
-                </label>
-            </Box>
             <Box className={styles.buttonRow}>
                 <button
                     className={styles.cancelButton}
@@ -112,16 +91,12 @@ const SliderPromptComponent = props => (
 );
 
 SliderPromptComponent.propTypes = {
-    decimalSelected: PropTypes.bool.isRequired,
-    defaultDecimal: PropTypes.bool,
-    defaultMaxValue: PropTypes.number,
-    defaultMinValue: PropTypes.number,
+    defaultMaxValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    defaultMinValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     intl: intlShape,
-    mustDecimal: PropTypes.bool.isRequired,
     onCancel: PropTypes.func.isRequired,
     onChangeMax: PropTypes.func.isRequired,
     onChangeMin: PropTypes.func.isRequired,
-    onDecimalOptionChange: PropTypes.func.isRequired,
     onFocus: PropTypes.func.isRequired,
     onKeyPress: PropTypes.func.isRequired,
     onOk: PropTypes.func.isRequired

src/containers/monitor.jsx

@@ -149,14 +149,14 @@ class Monitor extends React.Component {
         this.setState({sliderPrompt: true});
     }
     handleSliderPromptOk (min, max, decimal) {
-        if (min < max) {
-            this.props.vm.runtime.requestUpdateMonitor(Map({
-                id: this.props.id,
-                sliderMin: min,
-                sliderMax: max,
-                isDiscrete: !decimal
-            }));
-        }
+        const realMin = Math.min(parseFloat(min), parseFloat(max));
+        const realMax = Math.max(parseFloat(min), parseFloat(max));
+        this.props.vm.runtime.requestUpdateMonitor(Map({
+            id: this.props.id,
+            sliderMin: realMin,
+            sliderMax: realMax,
+            isDiscrete: !decimal
+        }));
         this.handleSliderPromptClose();
     }
     setElement (monitorElt) {
@@ -190,9 +190,9 @@ class Monitor extends React.Component {
         return (
             <React.Fragment>
                 {this.state.sliderPrompt && <SliderPrompt
-                    defaultDecimal={!this.props.isDiscrete}
                     defaultMaxValue={parseFloat(this.props.max)}
                     defaultMinValue={parseFloat(this.props.min)}
+                    isDiscrete={this.props.isDiscrete}
                     onCancel={this.handleSliderPromptClose}
                     onOk={this.handleSliderPromptOk}
                 />}

src/containers/slider-prompt.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import bindAll from 'lodash.bindall';
 import SliderPromptComponent from '../components/slider-prompt/slider-prompt.jsx';
+import log from '../lib/log';
 
 class SliderPrompt extends React.Component {
     constructor (props) {
@@ -11,15 +12,16 @@ class SliderPrompt extends React.Component {
             'handleCancel',
             'handleChangeMin',
             'handleChangeMax',
-            'handleChangeDecimalOption',
-            'handleKeyPress'
+            'handleKeyPress',
+            'validate',
+            'checkMustDecimal',
+            'floaty'
         ]);
         this.state = {
-            decimalSelected: this.props.defaultDecimal,
             minValue: this.props.defaultMinValue,
-            maxValue: this.props.defaultMaxValue,
-            mustDecimal: this.checkMustDecimal(this.props.defaultMinValue, this.props.defaultMaxValue)
+            maxValue: this.props.defaultMaxValue
         };
+        this.decimal = false;
     }
     handleKeyPress (event) {
         if (event.key === 'Enter') this.handleOk();
@@ -28,43 +30,46 @@ class SliderPrompt extends React.Component {
         event.target.select();
     }
     handleOk () {
+        if (!this.validate()) {
+            this.props.onCancel();
+            return;
+        }
         this.props.onOk(this.state.minValue, this.state.maxValue,
-            (this.state.decimalSelected || this.state.mustDecimal));
+            this.checkMustDecimal(this.state.minValue, this.state.maxValue));
     }
     handleCancel () {
         this.props.onCancel();
     }
+    floaty (value) {
+        const decimal = this.checkMustDecimal(this.state.minValue, this.state.maxValue) || !this.props.isDiscrete;
+        return `${value}${Number.isInteger(parseFloat(value)) && decimal ? '.0' : ''}`;
+    }
+    validate () {
+        log.log(`${this.state.minValue} ${this.state.maxValue}`);
+        return isFinite(this.state.minValue) && isFinite(this.state.maxValue);
+    }
     checkMustDecimal (min, max) {
         if (min === '' || max === '') return false;
-        return !Number.isInteger(parseFloat(min)) || !Number.isInteger(parseFloat(max));
+        return this.decimal ||
+               !Number.isInteger(parseFloat(min)) ||
+               !Number.isInteger(parseFloat(max));
     }
     handleChangeMin (e) {
-        this.setState({
-            minValue: parseFloat(e.target.value),
-            mustDecimal: this.checkMustDecimal(e.target.value, this.state.maxValue)
-        });
+        this.decimal = e.target.value.includes('.');
+        this.setState({minValue: e.target.value ? e.target.value : 0});
     }
     handleChangeMax (e) {
-        this.setState({
-            maxValue: parseFloat(e.target.value),
-            mustDecimal: this.checkMustDecimal(this.state.minValue, e.target.value)
-        });
-    }
-    handleChangeDecimalOption (e) {
-        this.setState({decimalSelected: e.target.checked});
+        this.decimal = e.target.value.includes('.');
+        this.setState({maxValue: e.target.value ? e.target.value : 0});
     }
     render () {
         return (
             <SliderPromptComponent
-                decimalSelected={this.state.decimalSelected}
-                defaultDecimal={this.props.defaultDecimal}
-                defaultMaxValue={this.props.defaultMaxValue}
-                defaultMinValue={this.props.defaultMinValue}
-                mustDecimal={this.state.mustDecimal}
+                defaultMaxValue={this.floaty(this.props.defaultMaxValue)}
+                defaultMinValue={this.floaty(this.props.defaultMinValue)}
                 onCancel={this.handleCancel}
                 onChangeMax={this.handleChangeMax}
                 onChangeMin={this.handleChangeMin}
-                onDecimalOptionChange={this.handleChangeDecimalOption}
                 onFocus={this.handleFocus}
                 onKeyPress={this.handleKeyPress}
                 onOk={this.handleOk}
@@ -74,9 +79,9 @@ class SliderPrompt extends React.Component {
 }
 
 SliderPrompt.propTypes = {
-    defaultDecimal: PropTypes.bool,
     defaultMaxValue: PropTypes.number,
     defaultMinValue: PropTypes.number,
+    isDiscrete: PropTypes.bool,
     onCancel: PropTypes.func.isRequired,
     onOk: PropTypes.func.isRequired
 };