status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-02-10 16:36:25 +00:00
Code Issues Projects Releases Wiki Activity

color filters - use TouchableBounce and make it configurable

Browse Source 
Differential Revision: D5773726

fbshipit-source-id: fc01860bc5958d1368d3f39e2833382a212d60d2
This commit is contained in:
Jiajie Zhu 2017-09-06 16:28:50 -07:00 committed by Facebook Github Bot
parent 91b6b4efb9
commit 34e9468b8f
1 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
Libraries/Components/Touchable/TouchableBounce.js
View File

@ -8,6 +8,7 @@
* *
* @providesModule TouchableBounce * @providesModule TouchableBounce
* @flow * @flow
* @format
*/ */
'use strict'; 'use strict';
@ -73,6 +74,12 @@ var TouchableBounce = createReactClass({
* views. * views.
*/ */
hitSlop: EdgeInsetsPropType, hitSlop: EdgeInsetsPropType,
releaseVelocity: PropTypes.number.isRequired,
releaseBounciness: PropTypes.number.isRequired,
},
getDefaultProps: function() {
return {releaseBounciness: 10, releaseVelocity: 10};
}, },
getInitialState: function(): State { getInitialState: function(): State {
@ -86,7 +93,7 @@ var TouchableBounce = createReactClass({
value: number, value: number,
velocity: number, velocity: number,
bounciness: number, bounciness: number,
callback?: ?Function callback?: ?Function,
) { ) {
Animated.spring(this.state.scale, { Animated.spring(this.state.scale, {
toValue: value, toValue: value,
@ -115,12 +122,22 @@ var TouchableBounce = createReactClass({
if (onPressWithCompletion) { if (onPressWithCompletion) {
onPressWithCompletion(() => { onPressWithCompletion(() => {
this.state.scale.setValue(0.93); this.state.scale.setValue(0.93);
this.bounceTo(1, 10, 10, this.props.onPressAnimationComplete); this.bounceTo(
1,
this.props.releaseVelocity,
this.props.releaseBounciness,
this.props.onPressAnimationComplete,
);
}); });
return; return;
} }
this.bounceTo(1, 10, 10, this.props.onPressAnimationComplete); this.bounceTo(
1,
this.props.releaseVelocity,
this.props.releaseBounciness,
this.props.onPressAnimationComplete,
);
this.props.onPress && this.props.onPress(e); this.props.onPress && this.props.onPress(e);
}, },
@ -166,18 +183,24 @@ var TouchableBounce = createReactClass({
testID={this.props.testID} testID={this.props.testID}
hitSlop={this.props.hitSlop} hitSlop={this.props.hitSlop}
onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder} onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest} onResponderTerminationRequest={
this.touchableHandleResponderTerminationRequest
}
onResponderGrant={this.touchableHandleResponderGrant} onResponderGrant={this.touchableHandleResponderGrant}
onResponderMove={this.touchableHandleResponderMove} onResponderMove={this.touchableHandleResponderMove}
onResponderRelease={this.touchableHandleResponderRelease} onResponderRelease={this.touchableHandleResponderRelease}
onResponderTerminate={this.touchableHandleResponderTerminate}> onResponderTerminate={this.touchableHandleResponderTerminate}>
{ {
// $FlowFixMe(>=0.41.0) // $FlowFixMe(>=0.41.0)
this.props.children} this.props.children
{Touchable.renderDebugView({color: 'orange', hitSlop: this.props.hitSlop})} }
{Touchable.renderDebugView({
color: 'orange',
hitSlop: this.props.hitSlop,
})}
</Animated.View> </Animated.View>
); );
} },
}); });
module.exports = TouchableBounce; module.exports = TouchableBounce;