mirror of
https://github.com/status-im/react-native.git
synced 2025-02-03 13:14:42 +00:00
debca6d24f
Summary: We want to be able to access the touch data within our components' event handlers, so we need to thread the event object all the way through to them.
127 lines
4.0 KiB
JavaScript
Executable File
127 lines
4.0 KiB
JavaScript
Executable File
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* @providesModule TouchableWithoutFeedback
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
var React = require('React');
|
|
var TimerMixin = require('react-timer-mixin');
|
|
var Touchable = require('Touchable');
|
|
var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
|
|
var onlyChild = require('onlyChild');
|
|
|
|
type Event = Object;
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
var PRESS_RECT_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
|
|
|
|
/**
|
|
* Do not use unless you have a very good reason. All the elements that
|
|
* respond to press should have a visual feedback when touched. This is
|
|
* one of the primary reason a "web" app doesn't feel "native".
|
|
*/
|
|
var TouchableWithoutFeedback = React.createClass({
|
|
mixins: [TimerMixin, Touchable.Mixin],
|
|
|
|
propTypes: {
|
|
/**
|
|
* Called when the touch is released, but not if cancelled (e.g. by a scroll
|
|
* that steals the responder lock).
|
|
*/
|
|
accessible: React.PropTypes.bool,
|
|
onPress: React.PropTypes.func,
|
|
onPressIn: React.PropTypes.func,
|
|
onPressOut: React.PropTypes.func,
|
|
onLongPress: React.PropTypes.func,
|
|
/**
|
|
* Delay in ms, from the start of the touch, before onPressIn is called.
|
|
*/
|
|
delayPressIn: React.PropTypes.number,
|
|
/**
|
|
* Delay in ms, from the release of the touch, before onPressOut is called.
|
|
*/
|
|
delayPressOut: React.PropTypes.number,
|
|
/**
|
|
* Delay in ms, from onPressIn, before onLongPress is called.
|
|
*/
|
|
delayLongPress: React.PropTypes.number,
|
|
},
|
|
|
|
getInitialState: function() {
|
|
return this.touchableGetInitialState();
|
|
},
|
|
|
|
componentDidMount: function() {
|
|
ensurePositiveDelayProps(this.props);
|
|
},
|
|
|
|
componentWillReceiveProps: function(nextProps: Object) {
|
|
ensurePositiveDelayProps(nextProps);
|
|
},
|
|
|
|
/**
|
|
* `Touchable.Mixin` self callbacks. The mixin will invoke these if they are
|
|
* defined on your component.
|
|
*/
|
|
touchableHandlePress: function(e: Event) {
|
|
this.props.onPress && this.props.onPress(e);
|
|
},
|
|
|
|
touchableHandleActivePressIn: function(e: Event) {
|
|
this.props.onPressIn && this.props.onPressIn(e);
|
|
},
|
|
|
|
touchableHandleActivePressOut: function(e: Event) {
|
|
this.props.onPressOut && this.props.onPressOut(e);
|
|
},
|
|
|
|
touchableHandleLongPress: function(e: Event) {
|
|
this.props.onLongPress && this.props.onLongPress(e);
|
|
},
|
|
|
|
touchableGetPressRectOffset: function(): typeof PRESS_RECT_OFFSET {
|
|
return PRESS_RECT_OFFSET; // Always make sure to predeclare a constant!
|
|
},
|
|
|
|
touchableGetHighlightDelayMS: function(): number {
|
|
return this.props.delayPressIn || 0;
|
|
},
|
|
|
|
touchableGetLongPressDelayMS: function(): number {
|
|
return this.props.delayLongPress === 0 ? 0 :
|
|
this.props.delayLongPress || 500;
|
|
},
|
|
|
|
touchableGetPressOutDelayMS: function(): number {
|
|
return this.props.delayPressOut || 0;
|
|
},
|
|
|
|
render: function(): ReactElement {
|
|
// Note(avik): remove dynamic typecast once Flow has been upgraded
|
|
return (React: any).cloneElement(onlyChild(this.props.children), {
|
|
accessible: this.props.accessible !== false,
|
|
testID: this.props.testID,
|
|
onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder,
|
|
onResponderTerminationRequest: this.touchableHandleResponderTerminationRequest,
|
|
onResponderGrant: this.touchableHandleResponderGrant,
|
|
onResponderMove: this.touchableHandleResponderMove,
|
|
onResponderRelease: this.touchableHandleResponderRelease,
|
|
onResponderTerminate: this.touchableHandleResponderTerminate
|
|
});
|
|
}
|
|
});
|
|
|
|
module.exports = TouchableWithoutFeedback;
|