feat: Add track dragging functionality (#91)

* Add track dragging functionality * Stop slider drag from affecting track drag * Allow clicks on tracks outside of range for draggable track * Prevent track drag while slider is dragging
davidchin · Jul 9, 2017 · 4a8ca26 · 4a8ca26
1 parent 7813540
commit 4a8ca26
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 2 deletions.
diff --git a/example/js/example-app.jsx b/example/js/example-app.jsx
@@ -15,6 +15,10 @@ export default class ExampleApp extends React.Component {
         min: 5,
         max: 10,
       },
+      value5: {
+        min: 3,
+        max: 7,
+      },
     };
   }
 
@@ -52,6 +56,16 @@ export default class ExampleApp extends React.Component {
           value={this.state.value4}
           onChange={value => this.setState({ value4: value })}
           onChangeComplete={value => console.log(value)} />
+
+        <InputRange
+          draggableTrack
+          labelSuffix="kg"
+          maxValue={20}
+          minValue={0}
+          onChange={value => this.setState({ value5: value })}
+          onChangeComplete={value => console.log(value)}
+          value={this.state.value5} />
+
       </form>
     );
   }

diff --git a/src/js/input-range/input-range.jsx b/src/js/input-range/input-range.jsx
@@ -27,6 +27,7 @@ export default class InputRange extends React.Component {
       ariaControls: PropTypes.string,
       classNames: PropTypes.objectOf(PropTypes.string),
       disabled: PropTypes.bool,
+      draggableTrack: PropTypes.bool,
       formatLabel: PropTypes.func,
       maxValue: rangePropType,
       minValue: rangePropType,
@@ -90,6 +91,12 @@ export default class InputRange extends React.Component {
      * @type {?Component}
      */
     this.trackNode = null;
+
+    /**
+     * @private
+     * @type {bool}
+     */
+    this.isSliderDragging = false;
   }
 
   /**
@@ -353,10 +360,46 @@ export default class InputRange extends React.Component {
     }
 
     const position = valueTransformer.getPositionFromEvent(event, this.getTrackClientRect());
-
+    this.isSliderDragging = true;
     requestAnimationFrame(() => this.updatePosition(key, position));
   }
 
+  /**
+   * Handle any "mousemove" event received by the track
+   * @private
+   * @param {SyntheticEvent} event
+   * @return {void}
+   */
+  @autobind
+  handleTrackDrag(event, prevEvent) {
+    if (this.props.disabled || !this.props.draggableTrack || this.isSliderDragging) {
+      return;
+    }
+
+    const {
+      maxValue,
+      minValue,
+      value: { max, min },
+    } = this.props;
+
+    const position = valueTransformer.getPositionFromEvent(event, this.getTrackClientRect());
+    const value = valueTransformer.getValueFromPosition(position, minValue, maxValue, this.getTrackClientRect());
+    const stepValue = valueTransformer.getStepValueFromValue(value, this.props.step);
+
+    const prevPosition = valueTransformer.getPositionFromEvent(prevEvent, this.getTrackClientRect());
+    const prevValue = valueTransformer.getValueFromPosition(prevPosition, minValue, maxValue, this.getTrackClientRect());
+    const prevStepValue = valueTransformer.getStepValueFromValue(prevValue, this.props.step);
+
+    const offset = prevStepValue - stepValue;
+
+    const transformedValues = {
+      min: min - offset,
+      max: max - offset,
+    };
+
+    this.updateValues(transformedValues);
+  }
+
   /**
    * Handle any "keydown" event received by the slider
    * @private
@@ -401,9 +444,20 @@ export default class InputRange extends React.Component {
       return;
     }
 
+    const {
+      maxValue,
+      minValue,
+      value: { max, min },
+    } = this.props;
+
     event.preventDefault();
 
-    this.updatePosition(this.getKeyByPosition(position), position);
+    const value = valueTransformer.getValueFromPosition(position, minValue, maxValue, this.getTrackClientRect());
+    const stepValue = valueTransformer.getStepValueFromValue(value, this.props.step);
+
+    if (!this.props.draggableTrack || stepValue > max || stepValue < min) {
+      this.updatePosition(this.getKeyByPosition(position), position);
+    }
   }
 
   /**
@@ -437,6 +491,10 @@ export default class InputRange extends React.Component {
       this.props.onChangeComplete(this.props.value);
     }
 
+    if (this.isSliderDragging) {
+      this.isSliderDragging = false;
+    }
+
     this.startValue = null;
   }
 
@@ -600,8 +658,10 @@ export default class InputRange extends React.Component {
 
         <Track
           classNames={this.props.classNames}
+          draggableTrack={this.props.draggableTrack}
           ref={(trackNode) => { this.trackNode = trackNode; }}
           percentages={percentages}
+          onTrackDrag={this.handleTrackDrag}
           onTrackMouseDown={this.handleTrackMouseDown}>
 
           {this.renderSliders()}

diff --git a/src/js/input-range/track.jsx b/src/js/input-range/track.jsx
@@ -11,13 +11,17 @@ export default class Track extends React.Component {
    * @return {Object}
    * @property {Function} children
    * @property {Function} classNames
+   * @property {Boolean} draggableTrack
+   * @property {Function} onTrackDrag
    * @property {Function} onTrackMouseDown
    * @property {Function} percentages
    */
   static get propTypes() {
     return {
       children: PropTypes.node.isRequired,
       classNames: PropTypes.objectOf(PropTypes.string).isRequired,
+      draggableTrack: PropTypes.bool,
+      onTrackDrag: PropTypes.func,
       onTrackMouseDown: PropTypes.func.isRequired,
       percentages: PropTypes.objectOf(PropTypes.number).isRequired,
     };
@@ -26,6 +30,8 @@ export default class Track extends React.Component {
   /**
    * @param {Object} props
    * @param {InputRangeClassNames} props.classNames
+   * @param {Boolean} props.draggableTrack
+   * @param {Function} props.onTrackDrag
    * @param {Function} props.onTrackMouseDown
    * @param {number} props.percentages
    */
@@ -37,6 +43,7 @@ export default class Track extends React.Component {
      * @type {?Component}
      */
     this.node = null;
+    this.trackDragEvent = null;
   }
 
   /**
@@ -58,6 +65,75 @@ export default class Track extends React.Component {
     return { left, width };
   }
 
+  /**
+   * Listen to mousemove event
+   * @private
+   * @return {void}
+   */
+  addDocumentMouseMoveListener() {
+    this.removeDocumentMouseMoveListener();
+    this.node.ownerDocument.addEventListener('mousemove', this.handleMouseMove);
+  }
+
+  /**
+   * Listen to mouseup event
+   * @private
+   * @return {void}
+   */
+  addDocumentMouseUpListener() {
+    this.removeDocumentMouseUpListener();
+    this.node.ownerDocument.addEventListener('mouseup', this.handleMouseUp);
+  }
+
+  /**
+   * @private
+   * @return {void}
+   */
+  removeDocumentMouseMoveListener() {
+    this.node.ownerDocument.removeEventListener('mousemove', this.handleMouseMove);
+  }
+
+  /**
+   * @private
+   * @return {void}
+   */
+  removeDocumentMouseUpListener() {
+    this.node.ownerDocument.removeEventListener('mouseup', this.handleMouseUp);
+  }
+
+  /**
+   * @private
+   * @param {SyntheticEvent} event
+   * @return {void}
+   */
+  @autobind
+  handleMouseMove(event) {
+    if (!this.props.draggableTrack) {
+      return;
+    }
+
+    if (this.trackDragEvent !== null) {
+      this.props.onTrackDrag(event, this.trackDragEvent);
+    }
+
+    this.trackDragEvent = event;
+  }
+
+  /**
+   * @private
+   * @return {void}
+   */
+  @autobind
+  handleMouseUp() {
+    if (!this.props.draggableTrack) {
+      return;
+    }
+
+    this.removeDocumentMouseMoveListener();
+    this.removeDocumentMouseUpListener();
+    this.trackDragEvent = null;
+  }
+
   /**
    * @private
    * @param {SyntheticEvent} event - User event
@@ -72,6 +148,11 @@ export default class Track extends React.Component {
     };
 
     this.props.onTrackMouseDown(event, position);
+
+    if (this.props.draggableTrack) {
+      this.addDocumentMouseMoveListener();
+      this.addDocumentMouseUpListener();
+    }
   }
 
   /**