feat/slider enhancements

src/components/slider/index.js

@@ -1,7 +1,13 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {StyleSheet, PanResponder, ViewPropTypes, AccessibilityInfo} from 'react-native';
+import {
+  StyleSheet,
+  PanResponder,
+  ViewPropTypes,
+  AccessibilityInfo,
+  Animated
+} from 'react-native';
 import {Constants} from '../../helpers';
 import {PureBaseComponent} from '../../commons';
 import {Colors} from '../../style';
@@ -107,6 +113,7 @@ export default class Slider extends PureBaseComponent {
       containerSize: {width: 0, height: 0},
       trackSize: {width: 0, height: 0},
       thumbSize: {width: 0, height: 0},
+      thumbActiveAnimation: new Animated.Value(1),
       measureCompleted: false
     };
 
@@ -116,6 +123,10 @@ export default class Slider extends PureBaseComponent {
     this._minTrackStyles = {style: {}};
     this._x = 0;
     this._dx = 0;
+    this._thumbAnimationConstants = {
+      duration: 100,
+      defaultScaleFactor: 1.5
+    };
 
     this.initialValue = this.getRoundedValue(props.value);
     this.initialThumbSize = THUMB_SIZE;
@@ -244,11 +255,28 @@ export default class Slider extends PureBaseComponent {
       const style = thumbStyle || styles.thumb;
       const activeStyle = activeThumbStyle || styles.activeThumb;
 
-      this._thumbStyles.style = !this.props.disabled && (start ? activeStyle : style);
+      const activeOrInactiveStyle = !this.props.disabled && (start ? activeStyle : style);
+      this._thumbStyles.style = _.omit(activeOrInactiveStyle, 'height', 'width');
       this.thumb.setNativeProps(this._thumbStyles);
+      this.scaleThumb(start);
     }
   }
 
+  scaleThumb = start => {
+    const scaleFactor = start ? this.calculatedThumbActiveScale() : 1;
+    this.thumbAnimationAction(scaleFactor);
+  }
+
+  thumbAnimationAction = (toValue) => {
+    const {thumbActiveAnimation} = this.state;
+    const {duration} = this._thumbAnimationConstants;
+    Animated.timing(thumbActiveAnimation, {
+      toValue,
+      duration,
+      useNativeDriver: true
+    }).start();
+  }
+
   getRoundedValue(value) {
     const {step} = this.props;
     const v = this.getValueInRange(value);
@@ -297,6 +325,37 @@ export default class Slider extends PureBaseComponent {
     this.thumb = r;
   };
 
+  shouldDoubleSizeByDefault = () => {
+    const {activeThumbStyle, thumbStyle} = this.props;
+    return !activeThumbStyle || !thumbStyle;
+  }
+
+  calculatedThumbActiveScale = () => {
+    const {activeThumbStyle, thumbStyle, disabled, disableActiveStyling} = this.props;
+    if (disabled || disableActiveStyling) {
+      return 1;
+    }
+
+    const {defaultScaleFactor} = this._thumbAnimationConstants;
+    if (this.shouldDoubleSizeByDefault()) { 
+      return defaultScaleFactor;
+    }
+
+    const scaleRatioFromSize = activeThumbStyle.height / thumbStyle.height;
+    return scaleRatioFromSize || defaultScaleFactor;
+  };
+
+  updateTrackStepAndStyle = ({nativeEvent}) => {
+    this._x = nativeEvent.locationX;
+    this.updateValue(nativeEvent.locationX);
+
+    if (this.props.step > 0) {
+      this.bounceToStep();
+    } else {
+      this.updateStyles(nativeEvent.locationX);
+    }
+  }
+
   /* Events */
 
   onValueChange = value => {
@@ -323,6 +382,15 @@ export default class Slider extends PureBaseComponent {
     this.handleMeasure('thumbSize', nativeEvent);
   };
 
+  handleTrackPress = ({nativeEvent}) => {
+    if (this.props.disabled) {
+      return;
+    }
+
+    this.updateTrackStepAndStyle({nativeEvent});
+    this.onSeekEnd();
+  };
+
   handleMeasure = (name, nativeEvent) => {
     const {width, height} = nativeEvent.layout;
     const size = {width, height};
@@ -368,16 +436,48 @@ export default class Slider extends PureBaseComponent {
     _.invoke(AccessibilityInfo, 'announceForAccessibility', `New value ${newValue}`);
   };
 
+  thumbHitSlop = {top: 10, bottom: 10, left: 24, right: 24};
+
   /* Renders */
 
+  renderThumb = () => {
+    const {
+      thumbStyle,
+      disabled,
+      thumbTintColor
+    } = this.getThemeProps();
+    return (
+      <Animated.View
+        hitSlop={this.thumbHitSlop}
+        ref={this.setThumbRef}
+        onLayout={this.onThumbLayout}
+        {...this._panResponder.panHandlers}
+        style={[
+          styles.thumb,
+          thumbStyle,
+          {
+            backgroundColor: disabled
+              ? DEFAULT_COLOR
+              : thumbTintColor || ACTIVE_COLOR
+          },
+          {
+            transform: [
+              {
+                scale: this.state.thumbActiveAnimation
+              }
+            ]
+          }
+        ]}
+      />
+    );
+  }
+
   render() {
     const {
       containerStyle,
-      thumbStyle,
       trackStyle,
       renderTrack,
       disabled,
-      thumbTintColor,
       minimumTrackTintColor = ACTIVE_COLOR,
       maximumTrackTintColor = DEFAULT_COLOR
     } = this.getThemeProps();
@@ -427,18 +527,9 @@ export default class Slider extends PureBaseComponent {
             />
           </View>
         )}
-        <View
-          ref={this.setThumbRef}
-          onLayout={this.onThumbLayout}
-          style={[
-            styles.thumb,
-            thumbStyle,
-            {
-              backgroundColor: disabled ? DEFAULT_COLOR : thumbTintColor || ACTIVE_COLOR
-            }
-          ]}
-        />
-        <View style={styles.touchArea} {...this._panResponder.panHandlers}/>
+
+        <View style={styles.touchArea} onTouchEnd={this.handleTrackPress}/>
+        {this.renderThumb()}
       </View>
     );
   }
@@ -474,7 +565,7 @@ const styles = StyleSheet.create({
     width: THUMB_SIZE + 16,
     height: THUMB_SIZE + 16,
     borderRadius: (THUMB_SIZE + 16) / 2,
-    borderWidth: BORDER_WIDTH + 6
+    borderWidth: BORDER_WIDTH
   },
   touchArea: {
     ...StyleSheet.absoluteFillObject,