Notify delegate when interaction is complete

Author: davidchin

README.md

@@ -78,6 +78,7 @@ maxValue                |number                              |Maximum value it c
 minValue                |number                              |Minimum value it can accept
 name                    |string                              |Name of `form` input
 onChange                |Function                            |`onChange` callback (required)
+onChangeComplete        |Function                            |`onChangeComplete` callback
 step                    |number                              |Increment/decrement value
 value                   |number | Object.<number> |Current value(s) (required)
 

example/js/App.js

@@ -50,6 +50,10 @@ class App extends React.Component {
     });
   }
 
+  handleChangeComplete(component, value) {
+    console.log(value);
+  }
+
   render() {
     const defaultValue = 2;
     const defaultValue2 = {
@@ -64,13 +68,15 @@ class App extends React.Component {
           minValue={0}
           value={this.state.value}
           onChange={this.handleValueChange.bind(this)}
+          onChangeComplete={this.handleChangeComplete.bind(this)}
         />
 
         <InputRange
           maxValue={20}
           minValue={0}
           value={this.state.value4}
           onChange={this.handleValue4Change.bind(this)}
+          onChangeComplete={this.handleChangeComplete.bind(this)}
         />
 
         <InputRange

karma.conf.js

@@ -37,6 +37,15 @@ module.exports = function(config) {
       ]
     },
 
+    customLaunchers: {
+      ChromeCustom: {
+        base: 'Chrome',
+        flags: [
+          '--window-size=300,300'
+        ]
+      }
+    },
+
     reporters: ['progress'],
 
     port: 9876,
@@ -47,7 +56,7 @@ module.exports = function(config) {
 
     autoWatch: true,
 
-    browsers: ['PhantomJS2'],
+    browsers: ['ChromeCustom'],
 
     singleRun: false
   })

package.json

@@ -50,9 +50,8 @@
     "karma": "^0.13.8",
     "karma-babel-preprocessor": "^5.2.1",
     "karma-browserify": "^4.3.0",
-    "karma-es6-shim": "^0.1.3",
+    "karma-chrome-launcher": "^0.2.2",
     "karma-jasmine": "^0.3.6",
-    "karma-phantomjs2-launcher": "^0.3.2",
     "lodash": "^3.10.0",
     "phantomjs": "^1.9.17",
     "react": "^0.14.0",

src/InputRange/InputRange.js

@@ -4,10 +4,12 @@ import Track from './Track';
 import Label from './Label';
 import defaultClassNames from './defaultClassNames';
 import valueTransformer from './valueTransformer';
-import { autobind, captialize, distanceTo, isObject, length } from './util';
+import { autobind, captialize, distanceTo, isDefined, isObject, length } from './util';
 import { maxMinValuePropType } from './propTypes';
 
 // Constants
+const internals = new WeakMap();
+
 const KeyCode = {
   LEFT_ARROW: 37,
   RIGHT_ARROW: 39,
@@ -40,6 +42,12 @@ function shouldUpdate(inputRange, values) {
          hasStepDifference(inputRange, values);
 }
 
+function getDocument(inputRange) {
+  const { inputRange: { ownerDocument } } = inputRange.refs;
+
+  return ownerDocument;
+}
+
 function getComponentClassName(inputRange) {
   const { props } = inputRange;
 
@@ -142,10 +150,21 @@ class InputRange extends React.Component {
   constructor(props) {
     super(props);
 
+    // Private
+    internals.set(this, {});
+
     // Auto-bind
     autobind([
-      'handleSliderMouseMove',
+      'handleInteractionEnd',
+      'handleInteractionStart',
+      'handleKeyDown',
+      'handleKeyUp',
+      'handleMouseDown',
+      'handleMouseUp',
       'handleSliderKeyDown',
+      'handleSliderMouseMove',
+      'handleTouchStart',
+      'handleTouchEnd',
       'handleTrackMouseDown',
     ], this);
   }
@@ -230,7 +249,7 @@ class InputRange extends React.Component {
   }
 
   // Handlers
-  handleSliderMouseMove(slider, event) {
+  handleSliderMouseMove(event, slider) {
     if (this.props.disabled) {
       return;
     }
@@ -241,7 +260,7 @@ class InputRange extends React.Component {
     this.updatePosition(key, position);
   }
 
-  handleSliderKeyDown(slider, event) {
+  handleSliderKeyDown(event, slider) {
     if (this.props.disabled) {
       return;
     }
@@ -262,7 +281,7 @@ class InputRange extends React.Component {
     }
   }
 
-  handleTrackMouseDown(track, position) {
+  handleTrackMouseDown(event, track, position) {
     if (this.props.disabled) {
       return;
     }
@@ -272,6 +291,70 @@ class InputRange extends React.Component {
     this.updatePosition(key, position);
   }
 
+  handleInteractionStart() {
+    const _this = internals.get(this);
+
+    if (!this.props.onChangeComplete || isDefined(_this.startValue)) {
+      return;
+    }
+
+    _this.startValue = this.props.value;
+  }
+
+  handleInteractionEnd() {
+    const _this = internals.get(this);
+
+    if (!this.props.onChangeComplete || !isDefined(_this.startValue)) {
+      return;
+    }
+
+    if (_this.startValue !== this.props.value) {
+      this.props.onChangeComplete(this, this.props.value);
+    }
+
+    _this.startValue = null;
+  }
+
+  handleKeyDown(event) {
+    this.handleInteractionStart(event);
+  }
+
+  handleKeyUp(event) {
+    this.handleInteractionEnd(event);
+  }
+
+  handleMouseDown(event) {
+    const document = getDocument(this);
+
+    this.handleInteractionStart(event);
+
+    document.addEventListener('mouseup', this.handleMouseUp);
+  }
+
+  handleMouseUp(event) {
+    const document = getDocument(this);
+
+    this.handleInteractionEnd(event);
+
+    document.removeEventListener('mouseup', this.handleMouseUp);
+  }
+
+  handleTouchStart(event) {
+    const document = getDocument(this);
+
+    this.handleInteractionStart(event);
+
+    document.addEventListener('touchend', this.handleTouchEnd);
+  }
+
+  handleTouchEnd(event) {
+    const document = getDocument(this);
+
+    this.handleInteractionEnd(event);
+
+    document.removeEventListener('touchend', this.handleTouchEnd);
+  }
+
   // Render
   render() {
     const { classNames } = this.props;
@@ -283,7 +366,11 @@ class InputRange extends React.Component {
       <div
         aria-disabled={ this.props.disabled }
         ref="inputRange"
-        className={ componentClassName }>
+        className={ componentClassName }
+        onKeyDown={ this.handleKeyDown }
+        onKeyUp={ this.handleKeyUp }
+        onMouseDown={ this.handleMouseDown }
+        onTouchStart={ this.handleTouchStart }>
         <Label
           className={ classNames.labelMin }
           containerClassName={ classNames.labelContainer }>
@@ -320,6 +407,7 @@ InputRange.propTypes = {
   minValue: maxMinValuePropType,
   name: React.PropTypes.string,
   onChange: React.PropTypes.func.isRequired,
+  onChangeComplete: React.PropTypes.func,
   step: React.PropTypes.number,
   value: maxMinValuePropType,
 };

src/InputRange/Slider.js

@@ -59,7 +59,7 @@ class Slider extends React.Component {
   }
 
   handleMouseMove(event) {
-    this.props.onSliderMouseMove(this, event);
+    this.props.onSliderMouseMove(event, this);
   }
 
   handleTouchStart(event) {
@@ -72,7 +72,7 @@ class Slider extends React.Component {
   }
 
   handleTouchMove(event) {
-    this.props.onSliderMouseMove(this, event);
+    this.props.onSliderMouseMove(event, this);
   }
 
   handleTouchEnd() {
@@ -85,7 +85,7 @@ class Slider extends React.Component {
   }
 
   handleKeyDown(event) {
-    this.props.onSliderKeyDown(this, event);
+    this.props.onSliderKeyDown(event, this);
   }
 
   // Render

src/InputRange/Track.js

@@ -35,8 +35,6 @@ class Track extends React.Component {
     return clientRect;
   }
 
-  // Methods
-
   // Handlers
   handleMouseDown(event) {
     const trackClientRect = this.clientRect;
@@ -46,7 +44,7 @@ class Track extends React.Component {
       y: 0,
     };
 
-    this.props.onTrackMouseDown(this, position);
+    this.props.onTrackMouseDown(event, this, position);
   }
 
   handleTouchStart(event) {

src/InputRange/util.js

@@ -44,6 +44,10 @@ function isObject(object) {
   return object !== null && typeof object === 'object';
 }
 
+function isDefined(value) {
+  return value !== undefined && value !== null;
+}
+
 function isEmpty(obj) {
   if (!obj) {
     return true;
@@ -102,6 +106,7 @@ const util = {
   clamp,
   distanceTo,
   extend,
+  isDefined,
   isEmpty,
   isNumber,
   isObject,