Merge pull request #13 from rohan-deshpande/master

Better support for floats

Author: rohan-deshpande

README.md

@@ -181,6 +181,8 @@ A number component for updating numeric values. Will render a slider if `min`, `
 * `max: number` - The maximum range for the number  
 * `step: number` - The amount the number should increment each tick
 
+If your `step` prop is a float, `DatNumber` will ensure that your number field steps to the correct number of decimal places to align with the step that you've set.
+
 #### `DatPresets`
 
 Presets for the object which your `DatGui` is controlling can be supplied to this component as items in its `options` prop. A select field will be rendered which will allow you to easily switch between the presets.
@@ -195,7 +197,7 @@ Each item in this array will need to be in the format `{ 'presetName': ...data,
 
 #### `DatSelect`
 
-A select component for updating a value with one of the options supplied via the `options` prop. The original value from the `path` will always be added to the passed options array as the first item.
+A select component for updating a value with one of the options supplied via the `options` prop. The initial selected value will be taken from the mapped `path` prop.
 
 ##### props
 

build/react-dat-gui.css

@@ -4794,6 +4794,17 @@ function toNumber(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}
+ */
+var isInteger = exports.isInteger = Number.isInteger || function (value) {
+  return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
+};
+
 /***/ }),
 /* 53 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -6537,6 +6548,8 @@ var _react = __webpack_require__(0);
 
 var _react2 = _interopRequireDefault(_react);
 
+var _utils = __webpack_require__(52);
+
 var _propTypes = __webpack_require__(2);
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
@@ -6557,8 +6570,6 @@ var _lodash5 = __webpack_require__(12);
 
 var _lodash6 = _interopRequireDefault(_lodash5);
 
-var _utils = __webpack_require__(52);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -6639,6 +6650,8 @@ var DatNumber = function (_Component) {
           hasMin = _ref2[0],
           hasMax = _ref2[1],
           hasStep = _ref2[2];
+
+      var decimalPlaces = hasStep && !(0, _utils.isInteger)(step) ? step.toString().split('.')[1].length : 0;
       var isMin = false,
           isMax = false;
 
@@ -6661,16 +6674,22 @@ var DatNumber = function (_Component) {
         }
       }
 
-      return value;
+      return value.toFixed(decimalPlaces);
     }
+
+    /**
+     * @deprecated This has been deprecated for now and is no longer applied to the
+     * component onBlur.
+     */
+
   }, {
     key: 'update',
     value: function update() {
       var value = this.state.value;
 
 
-      this.props._onUpdateValue && this.props._onUpdateValue(this.props.path, value);
-      this.props.onUpdate && this.props.onUpdate(value);
+      this.props._onUpdateValue && this.props._onUpdateValue(this.props.path, (0, _utils.toNumber)(value));
+      this.props.onUpdate && this.props.onUpdate((0, _utils.toNumber)(value));
     }
   }, {
     key: 'renderSlider',
@@ -6697,12 +6716,14 @@ var DatNumber = function (_Component) {
           max = _props3.max,
           path = _props3.path,
           label = _props3.label,
-          labelWidth = _props3.labelWidth;
+          labelWidth = _props3.labelWidth,
+          step = _props3.step,
+          disableSlider = _props3.disableSlider;
 
       var labelText = (0, _lodash4.default)(label) ? label : path;
       var hasSlider = (0, _lodash2.default)(min) && (0, _lodash2.default)(max);
       var controlsWidth = 100 - labelWidth;
-      var inputWidth = hasSlider ? Math.round(controlsWidth / 3) : controlsWidth;
+      var inputWidth = hasSlider && disableSlider !== true ? Math.round(controlsWidth / 3) : controlsWidth;
       var sliderWidth = controlsWidth - inputWidth;
 
       return _react2.default.createElement(
@@ -6716,15 +6737,17 @@ var DatNumber = function (_Component) {
             { className: 'label-text', style: { width: labelWidth + '%' } },
             labelText
           ),
-          hasSlider ? this.renderSlider(sliderWidth) : null,
+          hasSlider && disableSlider !== true ? this.renderSlider(sliderWidth) : null,
           _react2.default.createElement('input', {
             type: 'number',
+            step: step,
+            min: min,
+            max: max,
             inputMode: 'numeric',
             value: this.state.value,
             style: { width: inputWidth + '%' },
             onChange: this.handleChange,
-            onFocus: this.handleFocus,
-            onBlur: this.handleBlur
+            onFocus: this.handleFocus
           })
         )
       );
@@ -6744,7 +6767,8 @@ DatNumber.propTypes = {
   labelWidth: _propTypes2.default.number,
   liveUpdate: _propTypes2.default.bool,
   onUpdate: _propTypes2.default.func,
-  _onUpdateValue: _propTypes2.default.func
+  _onUpdateValue: _propTypes2.default.func,
+  disableSlider: _propTypes2.default.bool
 };
 exports.default = DatNumber;
 module.exports = exports['default'];
@@ -6930,8 +6954,6 @@ var _lodash4 = _interopRequireDefault(_lodash3);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -6953,8 +6975,8 @@ var DatSelect = function (_Component) {
     }
 
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DatSelect.__proto__ || Object.getPrototypeOf(DatSelect)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      value: '',
-      options: [_this.getValue()].concat(_toConsumableArray(_this.props.options))
+      value: _this.getValue(),
+      options: _this.props.options
     }, _this.handleChange = function (event) {
       var value = event.target.value;
 

build/react-dat-gui.js

@@ -19,7 +19,7 @@ class App extends Component {
       minMaxNumber: 66,
       number: 80,
       boolean: true,
-      select: 'one',
+      select: 'three',
       color: '#2FA1D6',
       random: Math.random(),
       nested: {
@@ -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,12 @@ class App extends Component {
           <div>
             <b>Number value:</b> {data.number}
           </div>
+          <div>
+            <b>Number value is a string:</b> {(typeof data.number === 'string') ? 'true' : 'false'}
+          </div>
+          <div>
+            <b>Float value:</b> {data.float}
+          </div>
           <div>
             <b>Checkbox value:</b> {(data.boolean) ? 'true' : 'false'}
           </div>
@@ -102,6 +109,9 @@ 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} />
+          <DatNumber path="float" label="Min Max No Slider" min={0} max={100} step={0.01} disableSlider={true} />
           <DatBoolean path="boolean" label="Boolean" />
           <DatButton label="Button" onClick={this.handleClick} />
           <DatSelect label="Select" path='select' options={['two', 'three', 'four']}/>

build/react-dat-gui.js.map

@@ -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 = {
@@ -19,11 +19,12 @@ export default class DatNumber extends Component {
     liveUpdate: PropTypes.bool,
     onUpdate: PropTypes.func,
     _onUpdateValue: PropTypes.func,
+    disableSlider: PropTypes.bool
   };
 
   state = {
-    value: this.getValue(),
-  }
+    value: this.getValue()
+  };
 
   componentWillReceiveProps(nextProps) {
     this.setState({
@@ -37,8 +38,14 @@ export default class DatNumber extends Component {
 
   applyConstraints(value) {
     const { min, max, step } = this.props;
-    const [ hasMin, hasMax, hasStep ] = [ isFinite(min), isFinite(max), isFinite(step) ];
-    let [ isMin, isMax ] = [ false, false ];
+    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,25 +65,29 @@ export default class DatNumber extends Component {
       }
     }
 
-    return value;
+    return value.toFixed(decimalPlaces);
   }
 
   handleChange = event => {
     this.setState({ value: event.target.value }, this.update);
-  }
+  };
 
   handleFocus = () => {
     document.addEventListener('keydown', this.handleKeyDown);
-  }
+  };
 
+  /**
+   * @deprecated This has been deprecated for now and is no longer applied to the
+   * component onBlur.
+   */
   handleBlur = event => {
     const value = this.applyConstraints(event.target.value);
 
     document.removeEventListener('keydown', this.handleKeyDown);
     window.getSelection().removeAllRanges();
 
     this.setState({ value }, this.update);
-  }
+  };
 
   handleKeyDown = event => {
     const key = event.keyCode || event.which;
@@ -86,24 +97,25 @@ export default class DatNumber extends Component {
 
       this.setState({ value }, this.update);
     }
-  }
+  };
 
   handleSliderUpdate = (value, isLive) => {
     const constrained = this.applyConstraints(value);
-    const shouldUpdate = (!isLive || this.props.liveUpdate);
+    const shouldUpdate = !isLive || this.props.liveUpdate;
 
     this.setState({ value: constrained }, () => {
       if (shouldUpdate) {
         this.update();
       }
     });
-  }
+  };
 
   update() {
     const { value } = this.state;
 
-    this.props._onUpdateValue && this.props._onUpdateValue(this.props.path, value);
-    this.props.onUpdate && this.props.onUpdate(value);
+    this.props._onUpdateValue &&
+      this.props._onUpdateValue(this.props.path, toNumber(value));
+    this.props.onUpdate && this.props.onUpdate(toNumber(value));
   }
 
   renderSlider(width) {
@@ -122,26 +134,43 @@ export default class DatNumber extends Component {
   }
 
   render() {
-    const { min, max, path, label, labelWidth } = this.props;
+    const {
+      min,
+      max,
+      path,
+      label,
+      labelWidth,
+      step,
+      disableSlider
+    } = this.props;
     const labelText = isString(label) ? label : path;
     const hasSlider = isFinite(min) && isFinite(max);
     const controlsWidth = 100 - labelWidth;
-    const inputWidth = hasSlider ? Math.round(controlsWidth / 3) : controlsWidth;
+    const inputWidth =
+      hasSlider && disableSlider !== true
+        ? Math.round(controlsWidth / 3)
+        : controlsWidth;
     const sliderWidth = controlsWidth - inputWidth;
 
     return (
       <li className="cr number">
         <label>
-          <span className="label-text" style={{ width: `${labelWidth}%` }}>{labelText}</span>
-          {hasSlider ? this.renderSlider(sliderWidth) : null}
+          <span className="label-text" style={{ width: `${labelWidth}%` }}>
+            {labelText}
+          </span>
+          {hasSlider && disableSlider !== true
+            ? this.renderSlider(sliderWidth)
+            : null}
           <input
             type="number"
+            step={step}
+            min={min}
+            max={max}
             inputMode="numeric"
             value={this.state.value}
             style={{ width: `${inputWidth}%` }}
             onChange={this.handleChange}
             onFocus={this.handleFocus}
-            onBlur={this.handleBlur}
           />
         </label>
       </li>

dev/src/App.js

@@ -17,8 +17,8 @@ export default class DatSelect extends Component {
   };
 
   state = {
-    value: '',
-    options: [this.getValue(), ...this.props.options],
+    value: this.getValue(),
+    options: this.props.options,
   }
 
   componentWillReceiveProps(nextProps) {