Improve onPress & onLongPress on polyfil/Ripple

invertase · Jan 11, 2016 · b537e1c · b537e1c
1 parent fbb1ae3
commit b537e1c
Showing 1 changed file with 50 additions and 56 deletions.
diff --git a/lib/polyfill/Ripple.js b/lib/polyfill/Ripple.js
@@ -1,11 +1,12 @@
-import React, { Component, PropTypes, View, Animated } from 'react-native';
+import React, { Component, PropTypes, View, Animated, TouchableOpacity } from 'react-native';
 
 export default class Ripple extends Component {
 
     constructor(props) {
         super(props);
         this.state = {
             scaleValue: new Animated.Value(0.001),
+            fadeValue: new Animated.Value(0.001),
             pageX: null,
             pageY: null,
             rippling: false,
@@ -14,13 +15,6 @@ export default class Ripple extends Component {
             longPress: false,
             elevation: props.elevation ? props.elevation[0] : null
         };
-        this._responder = {
-            onStartShouldSetResponder: (e) => true,
-            onResponderGrant: this._highlight,
-            onResponderRelease: this._handleResponderEnd,
-            onResponderTerminate: this._unHighlight
-        };
-        this.timeout = null;
     }
 
     static propTypes = {
@@ -37,58 +31,61 @@ export default class Ripple extends Component {
         elevation: null
     };
 
-    componentWillUnmount = () => {
-        clearTimeout(this.timeout);
-    };
-
     render() {
-        const { rippleColor, children, style } = this.props;
-        const { size, pageX, pageY, scaleValue, location, elevation } = this.state;
+        const { rippleColor, onPress, onLongPress, children, style } = this.props;
+        const { fadeValue ,size, pageX, pageY, rippling, scaleValue, location, elevation } = this.state;
 
         return (
-            <View
-                elevation={elevation ? elevation : 0}
+            <TouchableOpacity
                 ref='container'
-                style={style || {}}
-                {...this._responder}
+                activeOpacity={1}
+                onPress={onPress}
+                onLongPress={onLongPress}
+                onPressIn={this._highlight}
+                onPressOut={this._unHighlight}
             >
-                <Animated.View style={[
-                    styles.ripple,
-                    location &&
+                <View
+                    style={style || {}}
+                    elevation={elevation ? elevation : 0}
+                >
+                    <Animated.View  style={[
+                        styles.background, {
+                            backgroundColor: rippling ? rippleColor : 'transparent',
+                            opacity: fadeValue
+                        }
+                    ]}/>
+                    <Animated.View style={[
+                        styles.ripple,
+                        location &&
+                            {
+                                backgroundColor: rippleColor,
+                                width: size,
+                                height: size,
+                                top: pageY - location.pageY - size / 2,
+                                left: pageX - location.pageX - size / 2,
+                                borderRadius: size / 2
+                            },
                         {
-                            backgroundColor: rippleColor,
-                            width: size,
-                            height: size,
-                            top: pageY - location.pageY - size / 2,
-                            left: pageX - location.pageX - size / 2,
-                            borderRadius: size / 2
-                        },
-                    {
-                        transform: [{ scale: scaleValue }]
-                    }]}
-                />
-                {children}
-            </View>
+                            transform: [{ scale: scaleValue }]
+                        }]}
+                    />
+                    {children}
+                </View>
+            </TouchableOpacity>
         );
     };
 
     _highlight = (e) => {
-        const { onLongPress, elevation } = this.props;
+        const { elevation } = this.props;
 
         if (elevation) {
             this.setState({
                 elevation: elevation[1]
             });
         }
 
-        this.timeout = setTimeout(() => {
-            onLongPress && onLongPress();
-            this.setState({
-                longPress: true
-            });
-        }, 500);
-
         const { pageX, pageY } = e.nativeEvent;
+
         this.setState({
             rippling: true,
             pageX,
@@ -102,6 +99,11 @@ export default class Ripple extends Component {
                 toValue: 1,
                 duration: duration < 500 || duration >= 1500 ? 500 : duration
             }).start();
+
+            Animated.timing(this.state.fadeValue, {
+                toValue: .2,
+                duration: 200
+            }).start();
         });
     };
 
@@ -114,27 +116,19 @@ export default class Ripple extends Component {
             });
         }
 
-        clearTimeout(this.timeout);
-
         this.setState({
-            rippling: false,
-            longPress: false
+            rippling: false
         });
 
         Animated.timing(this.state.scaleValue, {
             toValue: 0.001,
-            duration: 0
+            duration: 100
         }).start();
-    };
 
-    _handleResponderEnd = () => {
-        const { onPress } = this.props;
-        const { longPress } = this.state;
-
-        if (!longPress) {
-            onPress && onPress();
-        }
-        this._unHighlight();
+        Animated.timing(this.state.fadeValue, {
+            toValue: 0.001,
+            duration: 100,
+        }).start();
     };
 
     _getContainerDimensions = (next) => {