add click-hold functionality

Author: nikolas

CHANGELOG

@@ -1,3 +1,7 @@
+1.2.0 (2018-12-12)
+------------------
+* Add hold option, enabled by default.
+
 1.1.0 (2018-10-10)
 ------------------
 * Fix and standardize import

Makefile

@@ -2,7 +2,7 @@ NODE_MODULES ?= ./node_modules
 JS_SENTINAL ?= $(NODE_MODULES)/sentinal
 
 $(JS_SENTINAL): package.json
-	rm -rf $(NODE_MODULES)
+	rm -rf $(NODE_MODULES) package-lock.json
 	npm install
 	touch $(JS_SENTINAL)
 

lib/RangeStepInput.jsx

@@ -20,17 +20,21 @@ export default class RangeStepInput extends React.Component {
         this.onMouseDown = this.onMouseDown.bind(this);
         this.onMouseUp = this.onMouseUp.bind(this);
         this.onMouseMove = this.onMouseMove.bind(this);
+
+        this.domRef = React.createRef();
     }
     render() {
         return <input
                    type="range"
+                   ref={this.domRef}
                    className={this.props.className}
                    min={this.props.min}
                    max={this.props.max}
                    step={this.props.step}
                    value={this.props.value}
                    name={this.props.name}
                    id={this.props.id}
+                   disabled={this.props.disabled}
                    onChange={this.props.onChange}
                    onMouseDown={this.onMouseDown}
                    onMouseUp={this.onMouseUp}
@@ -40,12 +44,25 @@ export default class RangeStepInput extends React.Component {
     }
     onMouseDown() {
         this.setState({isMouseDown: true});
+
+        if (this.props.hold) {
+            const oldVal = this.props.value;
+            const self = this;
+            // Add some initial delay on the click-hold functionality.
+            setTimeout(function() {
+                self.holdLoop = self.makeHoldLoop(oldVal);
+            }, 600);
+        }
     }
     onMouseUp() {
         this.setState({
             isMouseDown: false,
             isDragging: false
         });
+
+        if (this.holdLoop) {
+            clearInterval(this.holdLoop);
+        }
     }
     onMouseMove() {
         if (this.state.isMouseDown) {
@@ -67,7 +84,45 @@ export default class RangeStepInput extends React.Component {
                              oldVal + step : oldVal - step;
         }
     }
-}
+    makeHoldLoop(oldVal) {
+        const self = this;
+
+        return setInterval(function() {
+            if (!self.state.isMouseDown) {
+                // The user isn't holding the cursor anymore: clean up
+                // and cancel.
+                if (self.holdLoop) {
+                    clearInterval(self.holdLoop);
+                }
+                return false;
+            }
+
+            const input = self.domRef.current;
+
+            let newVal = self.props.value;
+            if (oldVal > newVal) {
+                newVal -= self.props.step;
+            } else if (oldVal < newVal) {
+                newVal += self.props.step;
+            } else {
+                // The user is just holding the cursor at the current
+                // value, so don't do anything.
+                return false;
+            }
+
+            // Directly setting input.value will cause the new value
+            // to not be recognized, because of React.
+            // https://stackoverflow.com/a/46012210/173630
+            const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+                window.HTMLInputElement.prototype, 'value').set;
+            nativeInputValueSetter.call(input, newVal);
+
+            // Trigger an onChange event.
+            const e = new Event('change', {bubbles: true});
+            return input.dispatchEvent(e);
+        }, 100);
+    }
+};
 
 RangeStepInput.propTypes = {
     value: PropTypes.number.isRequired,
@@ -77,5 +132,14 @@ RangeStepInput.propTypes = {
     min: PropTypes.number,
     max: PropTypes.number,
     id: PropTypes.string,
-    name: PropTypes.string
+    name: PropTypes.string,
+    disabled: PropTypes.bool,
+
+    // Determines whether the slider changes value when the cursor is
+    // held on it.
+    hold: PropTypes.bool
+};
+
+RangeStepInput.defaultProps = {
+    hold: true
 };