ppr-react-native
Version:
A framework for building native apps using React
227 lines (203 loc) • 8.18 kB
JavaScript
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
* @format
*/
'use strict';
const Animated = require('Animated');
const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes');
const DeprecatedEdgeInsetsPropType = require('DeprecatedEdgeInsetsPropType');
const NativeMethodsMixin = require('NativeMethodsMixin');
const Platform = require('Platform');
const PropTypes = require('prop-types');
const React = require('React');
const Touchable = require('Touchable');
const TouchableWithoutFeedback = require('TouchableWithoutFeedback');
const createReactClass = require('create-react-class');
import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
import type {ViewStyleProp} from 'StyleSheet';
import type {Props as TouchableWithoutFeedbackProps} from 'TouchableWithoutFeedback';
import type {PressEvent} from 'CoreEventTypes';
type State = {
animationID: ?number,
scale: Animated.Value,
};
const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
type Props = $ReadOnly<{|
...TouchableWithoutFeedbackProps,
onPressWithCompletion?: ?(fn: () => void) => void,
onPressAnimationComplete?: ?() => void,
pressRetentionOffset?: ?EdgeInsetsProp,
releaseVelocity?: ?number,
releaseBounciness?: ?number,
style?: ?ViewStyleProp,
|}>;
/**
* Example of using the `TouchableMixin` to play well with other responder
* locking views including `ScrollView`. `TouchableMixin` provides touchable
* hooks (`this.touchableHandle*`) that we forward events to. In turn,
* `TouchableMixin` expects us to implement some abstract methods to handle
* interesting interactions such as `handleTouchablePress`.
*/
const TouchableBounce = ((createReactClass({
displayName: 'TouchableBounce',
mixins: [Touchable.Mixin.withoutDefaultFocusAndBlur, NativeMethodsMixin],
propTypes: {
/* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an
* error found when Flow v0.89 was deployed. To see the error, delete this
* comment and run Flow. */
...TouchableWithoutFeedback.propTypes,
// The function passed takes a callback to start the animation which should
// be run after this onPress handler is done. You can use this (for example)
// to update UI before starting the animation.
onPressWithCompletion: PropTypes.func,
// the function passed is called after the animation is complete
onPressAnimationComplete: PropTypes.func,
/**
* When the scroll view is disabled, this defines how far your touch may
* move off of the button, before deactivating the button. Once deactivated,
* try moving it back and you'll see that the button is once again
* reactivated! Move it back and forth several times while the scroll view
* is disabled. Ensure you pass in a constant to reduce memory allocations.
*/
pressRetentionOffset: DeprecatedEdgeInsetsPropType,
releaseVelocity: PropTypes.number.isRequired,
releaseBounciness: PropTypes.number.isRequired,
/**
* Style to apply to the container/underlay. Most commonly used to make sure
* rounded corners match the wrapped component.
*/
style: DeprecatedViewPropTypes.style,
},
getDefaultProps: function() {
return {releaseBounciness: 10, releaseVelocity: 10};
},
getInitialState: function(): State {
return {
/* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an
* error found when Flow v0.89 was deployed. To see the error, delete
* this comment and run Flow. */
...this.touchableGetInitialState(),
scale: new Animated.Value(1),
};
},
bounceTo: function(
value: number,
velocity: number,
bounciness: number,
callback?: ?() => void,
) {
Animated.spring(this.state.scale, {
toValue: value,
velocity,
bounciness,
useNativeDriver: true,
}).start(callback);
},
/**
* `Touchable.Mixin` self callbacks. The mixin will invoke these if they are
* defined on your component.
*/
touchableHandleActivePressIn: function(e: PressEvent) {
this.bounceTo(0.93, 0.1, 0);
this.props.onPressIn && this.props.onPressIn(e);
},
touchableHandleActivePressOut: function(e: PressEvent) {
this.bounceTo(1, 0.4, 0);
this.props.onPressOut && this.props.onPressOut(e);
},
touchableHandleFocus: function(e: Event) {
if (Platform.isTV) {
this.bounceTo(0.93, 0.1, 0);
}
this.props.onFocus && this.props.onFocus(e);
},
touchableHandleBlur: function(e: Event) {
if (Platform.isTV) {
this.bounceTo(1, 0.4, 0);
}
this.props.onBlur && this.props.onBlur(e);
},
touchableHandlePress: function(e: PressEvent) {
const onPressWithCompletion = this.props.onPressWithCompletion;
if (onPressWithCompletion) {
onPressWithCompletion(() => {
this.state.scale.setValue(0.93);
this.bounceTo(
1,
this.props.releaseVelocity,
this.props.releaseBounciness,
this.props.onPressAnimationComplete,
);
});
return;
}
this.bounceTo(
1,
this.props.releaseVelocity,
this.props.releaseBounciness,
this.props.onPressAnimationComplete,
);
this.props.onPress && this.props.onPress(e);
},
touchableGetPressRectOffset: function(): typeof PRESS_RETENTION_OFFSET {
return this.props.pressRetentionOffset || PRESS_RETENTION_OFFSET;
},
touchableGetHitSlop: function(): ?EdgeInsetsProp {
return this.props.hitSlop;
},
touchableGetHighlightDelayMS: function(): number {
return 0;
},
render: function(): React.Element<any> {
return (
<Animated.View
style={[{transform: [{scale: this.state.scale}]}, this.props.style]}
accessible={this.props.accessible !== false}
accessibilityLabel={this.props.accessibilityLabel}
accessibilityHint={this.props.accessibilityHint}
accessibilityRole={this.props.accessibilityRole}
accessibilityStates={this.props.accessibilityStates}
nativeID={this.props.nativeID}
testID={this.props.testID}
hitSlop={this.props.hitSlop}
/* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an
* error found when Flow v0.89 was deployed. To see the error, delete
* this comment and run Flow. */
onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
onResponderTerminationRequest={
/* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses
* an error found when Flow v0.89 was deployed. To see the error,
* delete this comment and run Flow. */
this.touchableHandleResponderTerminationRequest
}
/* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an
* error found when Flow v0.89 was deployed. To see the error, delete
* this comment and run Flow. */
onResponderGrant={this.touchableHandleResponderGrant}
/* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an
* error found when Flow v0.89 was deployed. To see the error, delete
* this comment and run Flow. */
onResponderMove={this.touchableHandleResponderMove}
/* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an
* error found when Flow v0.89 was deployed. To see the error, delete
* this comment and run Flow. */
onResponderRelease={this.touchableHandleResponderRelease}
/* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an
* error found when Flow v0.89 was deployed. To see the error, delete
* this comment and run Flow. */
onResponderTerminate={this.touchableHandleResponderTerminate}>
{this.props.children}
{Touchable.renderDebugView({
color: 'orange',
hitSlop: this.props.hitSlop,
})}
</Animated.View>
);
},
}): any): React.ComponentType<Props>);
module.exports = TouchableBounce;