Added better support for floating point numbers in DatNumber

Author: rohan-deshpande

dev/src/App.js

@@ -49,6 +49,7 @@ class App extends Component {
       string: 'Preset A',
       minMaxNumber: 33,
       number: 40,
+      float: 0.001,
       boolean: false,
       select: 'one',
       color: '#e61d5f',
@@ -81,6 +82,9 @@ class App extends Component {
           <div>
             <b>Number value:</b> {data.number}
           </div>
+          <div>
+            <b>Float value:</b> {data.float}
+          </div>
           <div>
             <b>Checkbox value:</b> {(data.boolean) ? 'true' : 'false'}
           </div>
@@ -102,6 +106,8 @@ class App extends Component {
           <DatString path="string" label="String" />
           <DatNumber path="minMaxNumber" label="Number" min={0} max={100} step={1} />
           <DatNumber path="number" label="Number" />
+          <DatNumber path="float" label="Float" min={0} max={100} step={0.001} />
+          <DatNumber path="float" label="Another Float" min={0} max={100} step={0.01} />
           <DatBoolean path="boolean" label="Boolean" />
           <DatButton label="Button" onClick={this.handleClick} />
           <DatSelect label="Select" path='select' options={['two', 'three', 'four']}/>

dev/src/react-dat-gui/components/DatNumber.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
+import { isInteger, toNumber } from './utils';
 
 import PropTypes from 'prop-types';
 import Slider from './Slider';
 import isFinite from 'lodash.isfinite';
 import isString from 'lodash.isstring';
 import result from 'lodash.result';
-import { toNumber } from './utils';
 
 export default class DatNumber extends Component {
   static propTypes = {
@@ -16,6 +16,7 @@ export default class DatNumber extends Component {
     path: PropTypes.string,
     label: PropTypes.string,
     labelWidth: PropTypes.number,
+    customLabelWidth: PropTypes.number,
     liveUpdate: PropTypes.bool,
     onUpdate: PropTypes.func,
     _onUpdateValue: PropTypes.func,
@@ -38,6 +39,7 @@ export default class DatNumber extends Component {
   applyConstraints(value) {
     const { min, max, step } = this.props;
     const [ hasMin, hasMax, hasStep ] = [ isFinite(min), isFinite(max), isFinite(step) ];
+    const decimalPlaces = (hasStep && !isInteger(step)) ? step.toString().split('.')[1].length : 0;
     let [ isMin, isMax ] = [ false, false ];
 
     value = toNumber(value);
@@ -58,7 +60,7 @@ export default class DatNumber extends Component {
       }
     }
 
-    return value;
+    return value.toFixed(decimalPlaces);
   }
 
   handleChange = event => {
@@ -122,7 +124,7 @@ export default class DatNumber extends Component {
   }
 
   render() {
-    const { min, max, path, label, labelWidth } = this.props;
+    const { min, max, path, label, labelWidth, step } = this.props;
     const labelText = isString(label) ? label : path;
     const hasSlider = isFinite(min) && isFinite(max);
     const controlsWidth = 100 - labelWidth;
@@ -136,6 +138,7 @@ export default class DatNumber extends Component {
           {hasSlider ? this.renderSlider(sliderWidth) : null}
           <input
             type="number"
+            step={step}
             inputMode="numeric"
             value={this.state.value}
             style={{ width: `${inputWidth}%` }}

dev/src/react-dat-gui/components/utils.js

@@ -2,3 +2,16 @@ export function toNumber(value) {
   const float = parseFloat(value);
   return isNaN(float) ? 0 : float;
 }
+
+/**
+ * Polyfill for isInteger.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger#Polyfill
+ * @param {number} value
+ * @return {bool}
+ */
+export const isInteger = Number.isInteger || function (value) {
+  return typeof value === 'number' &&
+    isFinite(value) &&
+    Math.floor(value) === value;
+};

dev/src/react-dat-gui/style/_main.scss

@@ -78,7 +78,6 @@
         background: $input-color;
         border: 3px solid $background-color;
         border-radius: 0;
-        padding: 2px 5px;
         margin: 0;
         outline: none;
         font-size: inherit;

dev/src/react-dat-gui/style/_number.scss

@@ -3,6 +3,7 @@
 
   input[type=text], input[type=number] {
     color: $number-color;
+    height: $number-height;
   }
 
   .slider {
@@ -15,6 +16,6 @@
     background-size: 0% 100%;
     background-repeat: no-repeat;
     cursor: ew-resize;
-    height: 25px;
+    height: $number-height;
   }
 }

dev/src/react-dat-gui/style/_string.scss

@@ -3,5 +3,6 @@
 
   input[type=text] {
     color: $string-color;
+    padding: 2px 5px;
   }
 }

dev/src/react-dat-gui/style/_vars.scss

@@ -23,3 +23,4 @@ $folder-closed: #000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////
 $folder-open: #000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 48% no-repeat;
 
 $nest-margin: 4px;
+$number-height: 25px;

dev/src/react-dat-gui/style/dat.css

@@ -65,7 +65,6 @@
   background: #303030;
   border: 3px solid #1a1a1a;
   border-radius: 0;
-  padding: 2px 5px;
   margin: 0;
   outline: none;
   font-size: inherit; }
@@ -132,7 +131,8 @@
   border-left: 5px solid #2FA1D6; }
 
 .react-dat-gui .cr.number input[type=text], .react-dat-gui .cr.number input[type=number] {
-  color: #2FA1D6; }
+  color: #2FA1D6;
+  height: 25px; }
 
 .react-dat-gui .cr.number .slider {
   display: block;
@@ -150,7 +150,8 @@
   border-left: 5px solid #1ed36f; }
 
 .react-dat-gui .cr.string input[type=text] {
-  color: #1ed36f; }
+  color: #1ed36f;
+  padding: 2px 5px; }
 
 .react-dat-gui .cr.select {
   border-left: 5px solid #F4D450; }