refator: Stop passing components in callbacks

example/js/example-app.jsx

@@ -32,43 +32,43 @@ export default class ExampleApp extends React.Component {
     this.handleValue5Change = this.handleValue5Change.bind(this);
   }
 
-  handleValueChange(component, value) {
+  handleValueChange(value) {
     this.setState({
       value: value || 0,
     });
   }
 
-  handleValue2Change(component, value) {
+  handleValue2Change(value) {
     this.setState({
       value2: value || 0,
     });
   }
 
-  handleValue3Change(component, value) {
+  handleValue3Change(value) {
     this.setState({
       value3: value || 0,
     });
   }
 
-  handleValue4Change(component, values) {
+  handleValue4Change(values) {
     this.setState({
       value4: values,
     });
   }
 
-  handleValue5Change(component, values) {
+  handleValue5Change(values) {
     this.setState({
       value5: values,
     });
   }
 
-  handleValue6Change(component, values) {
+  handleValue6Change(values) {
     this.setState({
       value6: values,
     });
   }
 
-  handleChangeComplete(component, value) {
+  handleChangeComplete(value) {
     console.log(value);
   }
 

react-input-range.d.ts

@@ -40,7 +40,7 @@ declare namespace ReactInputRange {
     maxValue?: number;
     minValue?: number;
     name?: string;
-    onChange: (element: this, value: (number | IRange)) => void;
+    onChange: (value: (number | IRange)) => void;
     onChangeComplete?: () => void;
     step?: number;
     value: number | IRange;

src/js/input-range/input-range.jsx

@@ -159,19 +159,6 @@ export default class InputRange extends React.Component {
     return 'max';
   }
 
-  /**
-   * Get the key name of a slider
-   * @param {Slider} slider - React component
-   * @return {string} Key name
-   */
-  getKeyFromSlider(slider) {
-    if (slider === this.sliderMinNode) {
-      return 'min';
-    }
-
-    return 'max';
-  }
-
   /**
    * Get all slider keys of inputRange
    * @return {string[]} Key names
@@ -286,9 +273,9 @@ export default class InputRange extends React.Component {
     }
 
     if (this.isMultiValue()) {
-      this.props.onChange(this, values);
+      this.props.onChange(values);
     } else {
-      this.props.onChange(this, values.max);
+      this.props.onChange(values.max);
     }
   }
 
@@ -332,14 +319,13 @@ export default class InputRange extends React.Component {
   /**
    * Handle any mousemove event received by the slider
    * @param {SyntheticEvent} event - User event
-   * @param {Slider} slider - React component
+   * @param {string} key - Slider type
    */
-  handleSliderMouseMove(event, slider) {
+  handleSliderMouseMove(event, key) {
     if (this.props.disabled) {
       return;
     }
 
-    const key = this.getKeyFromSlider(slider);
     const position = valueTransformer.positionFromEvent(event, this.getTrackClientRect());
 
     requestAnimationFrame(() => this.updatePosition(key, position));
@@ -348,15 +334,14 @@ export default class InputRange extends React.Component {
   /**
    * Handle any keydown event received by the slider
    * @param {SyntheticEvent} event - User event
+   * @param {string} key - Slider type
    * @param {Slider} slider - React component
    */
-  handleSliderKeyDown(event, slider) {
+  handleSliderKeyDown(event, key) {
     if (this.props.disabled) {
       return;
     }
 
-    const key = this.getKeyFromSlider(slider);
-
     switch (event.keyCode) {
     case LEFT_ARROW:
     case DOWN_ARROW:
@@ -378,10 +363,9 @@ export default class InputRange extends React.Component {
   /**
    * Handle any mousedown event received by the track
    * @param {SyntheticEvent} event - User event
-   * @param {Track} track - React component
    * @param {Point} position - Mousedown position
    */
-  handleTrackMouseDown(event, track, position) {
+  handleTrackMouseDown(event, position) {
     if (this.props.disabled) {
       return;
     }
@@ -411,7 +395,7 @@ export default class InputRange extends React.Component {
     }
 
     if (this.startValue !== this.props.value) {
-      this.props.onChangeComplete(this, this.props.value);
+      this.props.onChangeComplete(this.props.value);
     }
 
     this.startValue = null;
@@ -525,11 +509,11 @@ export default class InputRange extends React.Component {
 
   /**
    * Get an array of hidden input HTML for rendering
-   * @return {?string[]} Array of HTML
+   * @return {string[]} Array of HTML
    */
   renderHiddenInputs() {
     if (!this.props.name) {
-      return;
+      return [];
     }
 
     const isMultiValue = this.isMultiValue();

src/js/input-range/slider.jsx

@@ -18,6 +18,7 @@ export default class Slider extends React.Component {
    * @property {Function} onSliderKeyDown
    * @property {Function} onSliderMouseMove
    * @property {Function} percentage
+   * @property {Function} type
    * @property {Function} value
    */
   static get propTypes() {
@@ -31,6 +32,7 @@ export default class Slider extends React.Component {
       onSliderKeyDown: React.PropTypes.func.isRequired,
       onSliderMouseMove: React.PropTypes.func.isRequired,
       percentage: React.PropTypes.number.isRequired,
+      type: React.PropTypes.string.isRequired,
       value: React.PropTypes.number.isRequired,
     };
   }
@@ -102,7 +104,7 @@ export default class Slider extends React.Component {
    * @param {SyntheticEvent} event - User event
    */
   handleMouseMove(event) {
-    this.props.onSliderMouseMove(event, this);
+    this.props.onSliderMouseMove(event, this.props.type);
   }
 
   /**
@@ -123,7 +125,7 @@ export default class Slider extends React.Component {
    * @param {SyntheticEvent} event - User event
    */
   handleTouchMove(event) {
-    this.props.onSliderMouseMove(event, this);
+    this.props.onSliderMouseMove(event, this.props.type);
   }
 
   /**
@@ -143,7 +145,7 @@ export default class Slider extends React.Component {
    * @param {SyntheticEvent} event - User event
    */
   handleKeyDown(event) {
-    this.props.onSliderKeyDown(event, this);
+    this.props.onSliderKeyDown(event, this.props.type);
   }
 
   /**

src/js/input-range/track.jsx

@@ -66,7 +66,7 @@ export default class Track extends React.Component {
       y: 0,
     };
 
-    this.props.onTrackMouseDown(event, this, position);
+    this.props.onTrackMouseDown(event, position);
   }
 
   /**