144 lines
4.7 KiB
JavaScript
Executable File
144 lines
4.7 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 View = require('View');
|
|
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: {
|
|
accessible: React.PropTypes.bool,
|
|
accessibilityComponentType: React.PropTypes.oneOf(View.AccessibilityComponentType),
|
|
accessibilityTraits: React.PropTypes.oneOfType([
|
|
React.PropTypes.oneOf(View.AccessibilityTraits),
|
|
React.PropTypes.arrayOf(React.PropTypes.oneOf(View.AccessibilityTraits)),
|
|
]),
|
|
/**
|
|
* Called when the touch is released, but not if cancelled (e.g. by a scroll
|
|
* that steals the responder lock).
|
|
*/
|
|
onPress: React.PropTypes.func,
|
|
onPressIn: React.PropTypes.func,
|
|
onPressOut: React.PropTypes.func,
|
|
/**
|
|
* Invoked on mount and layout changes with
|
|
*
|
|
* `{nativeEvent: {layout: {x, y, width, height}}}`
|
|
*/
|
|
onLayout: 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,
|
|
accessibilityComponentType: this.props.accessibilityComponentType,
|
|
accessibilityTraits: this.props.accessibilityTraits,
|
|
testID: this.props.testID,
|
|
onLayout: this.props.onLayout,
|
|
onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder,
|
|
onResponderTerminationRequest: this.touchableHandleResponderTerminationRequest,
|
|
onResponderGrant: this.touchableHandleResponderGrant,
|
|
onResponderMove: this.touchableHandleResponderMove,
|
|
onResponderRelease: this.touchableHandleResponderRelease,
|
|
onResponderTerminate: this.touchableHandleResponderTerminate
|
|
});
|
|
}
|
|
});
|
|
|
|
module.exports = TouchableWithoutFeedback;
|