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
xinthink · Dec 1, 2016 · 7556e62 · 7556e62
1 parent 66a1628
commit 7556e62
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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,
           }}