feat(Touch): add a new behavir about touch and go to location

ronal2do · May 17, 2019 · fc01682 · fc01682
1 parent 3faf653
commit fc01682
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 9 deletions.
diff --git a/src/Bubble.js b/src/Bubble.js
@@ -20,6 +20,7 @@ type ThumbProps = {
   style: any;
   TextComponent: RNText;
 }
+
 export default class Thumb extends PureComponent<ThumbProps, ThumbState> {
   _timeoutID: ?Object = null;
 
@@ -47,12 +48,12 @@ export default class Thumb extends PureComponent<ThumbProps, ThumbState> {
       this.state.fadeAnim,
       {
         toValue: 1,
-        duration: 500,
+        duration: 200,
       }
     ).start();
   }
 
-  release(): void {
+  release(delay: number = 0): void {
     this._timeoutID = setTimeout(() =>  
       Animated.timing(
         this.state.fadeAnim,
@@ -61,7 +62,17 @@ export default class Thumb extends PureComponent<ThumbProps, ThumbState> {
           duration: 500,
         }
       ).start(), 
-    0);
+    delay);
+  }
+
+  pressAndRelesase(): void {
+    Animated.timing(
+      this.state.fadeAnim,
+      {
+        toValue: 1,
+        duration: 500,
+      }
+    ).start(() => this.release(500));
   }
 
   componentWillUnmount() {

diff --git a/src/Slider.js b/src/Slider.js
@@ -98,6 +98,8 @@ export default class Slider extends PureComponent<SliderProps, SliderState> {
   _trackSize: WidthAndHeight;
   _thumbSize: WidthAndHeight;
   _bubble: Bubble;
+  isMoving: boolean = false;
+  isPressed: boolean = false;
 
   static propTypes = {
     /**
@@ -237,7 +239,16 @@ export default class Slider extends PureComponent<SliderProps, SliderState> {
   componentDidUpdate(prevProps: SliderProps) {
     const prevValue = prevProps.value;
     if (this.props.value !== prevValue) {
-      this._setCurrentValueAnimated(this.props.value);
+      this._setCurrentValueAnimated(this.props.value); 
+      if (this.isMoving) {
+        if (!this.isPressed) {
+          this._bubble.press();
+          this.isPressed = true;
+        }
+      }
+      if(!this.isMoving) {
+        this._fireChangeEvent('onSlidingComplete');
+      }
     }
   }
 
@@ -257,14 +268,20 @@ export default class Slider extends PureComponent<SliderProps, SliderState> {
   }
 
   _handlePanResponderGrant = () => {
+
+    if (!this.isMoving) {
+      this.isMoving = true;
+    }
     this._previousLeft = this._getThumbLeft(this._getCurrentValue());
+    this.changeThumSize(24);
     this._fireChangeEvent('onSlidingStart');
   };
 
   _handlePanResponderMove = (e: Object, gestureState: Object) => {
     if (this.props.disabled) {
       return;
     }
+
     const _value = this._getValue(gestureState);
 
     if (_value !== this.state.value._value) {
@@ -287,6 +304,10 @@ export default class Slider extends PureComponent<SliderProps, SliderState> {
     this._fireChangeEvent('onSlidingComplete');
     this._bubble.release();
     this.changeThumSize(16);
+    if (this.isMoving) {
+      this.isMoving = false;
+      this.isPressed = false;
+    }
   };
 
   _measureContainer = (x: Object) => this._handleMeasure('containerSize', x);
@@ -375,11 +396,14 @@ export default class Slider extends PureComponent<SliderProps, SliderState> {
       DEFAULT_ANIMATION_CONFIGS[animationType],
       this.props.animationConfig,
       {
-        toValue: value,
+        toValue: value
       },
     );
 
     Animated[animationType](this.state.value, animationConfig).start();
+    if (!this.isMoving) {
+      this._bubble.pressAndRelesase()
+    } 
   };
 
   _fireChangeEvent = (event: string): any => {
@@ -426,9 +450,10 @@ export default class Slider extends PureComponent<SliderProps, SliderState> {
 
   _thumbHitTest = (e: Object) => {
     const nativeEvent = e.nativeEvent;
-    this.changeThumSize(24);
     const thumbTouchRect = this._getThumbTouchRect();
-    this._bubble.press();
+
+    this.props.onValueChange(Math.floor(100 * nativeEvent.locationX / this.state.containerSize.width));
+
     return thumbTouchRect.containsPoint(
       nativeEvent.locationX,
       nativeEvent.locationY,
@@ -535,20 +560,20 @@ export default class Slider extends PureComponent<SliderProps, SliderState> {
           style={[defaultStyles.touchArea, touchOverflowStyle]}
           {...this._panResponder.panHandlers}
         />
-        <Bubble 
+       <Bubble 
           ref={(bubble: any) => this._bubble = bubble}
           value={this.props.value}
           thumbTintColor={thumbTintColor}
           style={{
             position: 'absolute',
+            display: this.props.value < 1 && 'none',
             transform: [{ translateX: thumbLeft }, { translateY: 0 }],
           }}
           TextComponent={TextComponent}
         />
       </View>
     );
   }
-
 }
 
 const defaultStyles = StyleSheet.create({