Rebuilt package

Author: rohan-deshpande

build/react-dat-gui.css

@@ -4656,6 +4656,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;
+};
+
 /***/ }),
 /* 48 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -6735,6 +6746,8 @@ var _react = __webpack_require__(0);
 
 var _react2 = _interopRequireDefault(_react);
 
+var _utils = __webpack_require__(47);
+
 var _propTypes = __webpack_require__(1);
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
@@ -6755,8 +6768,6 @@ var _lodash5 = __webpack_require__(13);
 
 var _lodash6 = _interopRequireDefault(_lodash5);
 
-var _utils = __webpack_require__(47);
-
 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"); } }
@@ -6837,6 +6848,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;
 
@@ -6859,7 +6872,7 @@ var DatNumber = function (_Component) {
         }
       }
 
-      return value;
+      return value.toFixed(decimalPlaces);
     }
   }, {
     key: 'update',
@@ -6895,7 +6908,8 @@ var DatNumber = function (_Component) {
           max = _props3.max,
           path = _props3.path,
           label = _props3.label,
-          labelWidth = _props3.labelWidth;
+          labelWidth = _props3.labelWidth,
+          step = _props3.step;
 
       var labelText = (0, _lodash4.default)(label) ? label : path;
       var hasSlider = (0, _lodash2.default)(min) && (0, _lodash2.default)(max);
@@ -6917,6 +6931,7 @@ var DatNumber = function (_Component) {
           hasSlider ? this.renderSlider(sliderWidth) : null,
           _react2.default.createElement('input', {
             type: 'number',
+            step: step,
             inputMode: 'numeric',
             value: this.state.value,
             style: { width: inputWidth + '%' },
@@ -6940,6 +6955,7 @@ DatNumber.propTypes = {
   path: _propTypes2.default.string,
   label: _propTypes2.default.string,
   labelWidth: _propTypes2.default.number,
+  customLabelWidth: _propTypes2.default.number,
   liveUpdate: _propTypes2.default.bool,
   onUpdate: _propTypes2.default.func,
   _onUpdateValue: _propTypes2.default.func

build/react-dat-gui.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}%` }}

build/react-dat-gui.js.map

@@ -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;
+};

src/components/DatNumber.js

@@ -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;

src/components/utils.js

@@ -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;
   }
 }

src/style/_main.scss

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

src/style/_number.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;

src/style/_string.scss

@@ -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; }