From 7556e628d868c59201199debb136787a24d07f6a Mon Sep 17 00:00:00 2001
From: Cliff Saporta Cheng <ccfcheng@gmail.com>
Date: Thu, 1 Dec 2016 12:12:47 -0800
Subject: [PATCH] feat(Thumb): Add optional hitSlop to Thumb for RangeSlider
 and Slider

- Thumb component can handle a touchPadding prop
- touchPadding sets hitSlop on Animated.View
- RangeSlider and Slider can handle a thumbPadding prop
- thumbPadding prop passed down as touchPadding on Thumb component
---
 lib/internal/Thumb.js  | 10 ++++++++++
 lib/mdl/RangeSlider.js | 18 ++++++++++++------
 lib/mdl/Slider.js      |  5 +++++
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/lib/internal/Thumb.js b/lib/internal/Thumb.js
index 6f7d0e88..c217caed 100644
--- a/lib/internal/Thumb.js
+++ b/lib/internal/Thumb.js
@@ -176,6 +176,12 @@ class Thumb extends Component {
           },
         ]}
         { ...this._panResponder.panHandlers }
+        hitSlop={{
+          top: this.props.touchPadding,
+          left: this.props.touchPadding,
+          bottom: this.props.touchPadding,
+          right: this.props.touchPadding,
+        }}
       >
         <View
           style={{  // the inner circle
@@ -213,12 +219,16 @@ Thumb.propTypes = {
 
   // Radius of thumb component
   radius: PropTypes.number,
+
+  // Padding for the hitSlop on the Thumb component
+  touchPadding: PropTypes.number,
 };
 
 // ## <section id='defaults'>Defaults</section>
 Thumb.defaultProps = {
   radius: 6,
   disabledColor: DEFAULT_UPPER_TRACK_COLOR,
+  touchPadding: 0,
 };
 
 // ## Public interface
diff --git a/lib/mdl/RangeSlider.js b/lib/mdl/RangeSlider.js
index 46058455..ab0cbe03 100644
--- a/lib/mdl/RangeSlider.js
+++ b/lib/mdl/RangeSlider.js
@@ -327,9 +327,10 @@ class RangeSlider extends Component {
           trackMarginH={this._trackMarginH}
           enabledColor={lowerTrackColor}
           disabledColor={upperTrackColor}
-          onGrant = {this._beginMove}
-          onMove = {this._updateValueByTouch}
-          onEnd = {this._endMove}
+          onGrant={this._beginMove}
+          onMove={this._updateValueByTouch}
+          onEnd={this._endMove}
+          touchPadding={this.props.thumbPadding}
           style={{
             top: this._thumbRadiiWithBorder * (THUMB_SCALE_RATIO - 1) + TRACK_EXTRA_MARGIN_V,
           }}
@@ -341,9 +342,10 @@ class RangeSlider extends Component {
           trackMarginH={this._trackMarginH}
           enabledColor={lowerTrackColor}
           disabledColor={upperTrackColor}
-          onGrant = {this._beginMove}
-          onMove = {this._updateValueByTouch}
-          onEnd = {this._endMove}
+          onGrant={this._beginMove}
+          onMove={this._updateValueByTouch}
+          onEnd={this._endMove}
+          touchPadding={this.props.thumbPadding}
           style={{
             top: this._thumbRadiiWithBorder * (THUMB_SCALE_RATIO - 1) + TRACK_EXTRA_MARGIN_V,
           }}
@@ -407,6 +409,9 @@ RangeSlider.propTypes = {
   // Radius of the thumb of the RangeSlider
   thumbRadius: PropTypes.number,
 
+  // Padding for the hitSlop on the RangeSlider thumb
+  thumbPadding: PropTypes.number,
+
   // Color of the lower part of the track, it's also the color of the thumb
   lowerTrackColor: PropTypes.string,
 
@@ -428,6 +433,7 @@ RangeSlider.propTypes = {
 
 // ## <section id='defaults'>Defaults</section>
 RangeSlider.defaultProps = {
+  thumbPadding: 0,
   thumbRadius: 6,
   trackSize: 2,
   min: 0,
diff --git a/lib/mdl/Slider.js b/lib/mdl/Slider.js
index 5be205d7..c235b919 100644
--- a/lib/mdl/Slider.js
+++ b/lib/mdl/Slider.js
@@ -56,6 +56,9 @@ class Slider extends Component {
     // Radius of the thumb of the Slider
     thumbRadius: PropTypes.number,
 
+    // Padding for the hitSlop on the Slider thumb
+    thumbPadding: PropTypes.number,
+
     // Color of the lower part of the track, it's also the color of the thumb
     lowerTrackColor: PropTypes.string,
 
@@ -74,6 +77,7 @@ class Slider extends Component {
 
   // ## <section id='defaults'>Defaults</section>
   static defaultProps = {
+    thumbPadding: 0,
     thumbRadius: 6,
     trackSize: 2,
     min: 0,
@@ -340,6 +344,7 @@ class Slider extends Component {
           trackMarginH={this._trackMarginH}
           enabledColor={lowerTrackColor}
           disabledColor={upperTrackColor}
+          touchPadding={this.props.thumbPadding}
           style={{
             top: this._thumbRadiiWithBorder * (THUMB_SCALE_RATIO - 1) + TRACK_EXTRA_MARGIN_V,
           }}