version 1.2.3

Author: nikolas

CHANGELOG renamed to CHANGELOG.txt

@@ -1,6 +1,10 @@
+1.2.3
+------------------
+* Some minor cleanup and bug fixes.
+
 1.2.2 (2018-12-12)
 ------------------
-* Add isDragging fix to click-hold functionality.
+* Added isDragging fix to click-hold functionality.
 
 1.2.1 (2018-12-12)
 ------------------

build/index.js

@@ -20,11 +20,18 @@ class App extends React.Component {
     render() {
         return <div>
             <p>Here's an example RangeStepInput:</p>
-            <RangeStepInput
-                min={0} max={100}
-                value={this.state.value} step={1}
-                onChange={this.onChange.bind(this)}
-            />
+            <div className="input-group mb-3">
+                <RangeStepInput
+                    min={0} max={100}
+                    value={this.state.value} step={1}
+                    onChange={this.onChange.bind(this)}
+                />
+                <div className="input-group-append">
+                    <span className="input-group-text ml-2">
+                        {this.state.value}
+                    </span>
+                </div>
+            </div>
         </div>;
     };
     onChange(e) {

docs/build/index.js

@@ -46,7 +46,12 @@ export default class RangeStepInput extends React.Component {
         this.setState({isMouseDown: true});
 
         if (this.props.hold) {
+            if (this.holdLoop) {
+                clearInterval(this.holdLoop);
+            }
+
             const oldVal = this.props.value;
+
             const self = this;
             // Add some initial delay on the click-hold functionality.
             setTimeout(function() {
@@ -70,7 +75,7 @@ export default class RangeStepInput extends React.Component {
         }
     }
     onInput(e) {
-        const step = forceNumber(e.target.step);
+        const step = this.props.step;
         const newVal = forceNumber(e.target.value);
         const oldVal = this.props.value;
 
@@ -86,6 +91,9 @@ export default class RangeStepInput extends React.Component {
     }
     makeHoldLoop(oldVal) {
         const self = this;
+        if (this.holdLoop) {
+            clearInterval(this.holdLoop);
+        }
 
         return setInterval(function() {
             if (!self.state.isMouseDown || self.state.isDragging) {
@@ -98,15 +106,21 @@ export default class RangeStepInput extends React.Component {
             }
 
             const input = self.domRef.current;
-
             let newVal = self.props.value;
-            if (oldVal > newVal) {
+
+            if (
+                oldVal > newVal &&
+                (newVal - self.props.step) >= self.props.min
+            ) {
                 newVal -= self.props.step;
-            } else if (oldVal < newVal) {
+            } else if (
+                oldVal < newVal &&
+                (newVal + self.props.step) <= self.props.max
+            ) {
                 newVal += self.props.step;
-            } else {
-                // The user is just holding the cursor at the current
-                // value, so don't do anything.
+            }
+
+            if (oldVal === newVal) {
                 return false;
             }
 

docs/index.jsx

@@ -7,7 +7,7 @@ const forceNumber = function(n) {
     if (isNaN(n) || typeof n === 'undefined') {
         n = 0;
     }
-    return Math.round(n * 100) / 100;
+    return n;
 };
 
 export {forceNumber};

lib/RangeStepInput.jsx

@@ -7,6 +7,7 @@
     "dev": "webpack --mode development --watch",
     "build": "webpack --mode=production",
     "build-demo": "webpack --config webpack.config.docs.js --mode production",
+    "build-demo-dev": "webpack --config webpack.config.docs.js --mode development --watch",
     "eslint": "eslint lib/"
   },
   "repository": {