Implement Text onLongPress

Summary:Fixes #5855

Tested with `UIExplorer`, first <Text> is the `onPress`, second is the `onLongPress`.
Closes https://github.com/facebook/react-native/pull/7099

Differential Revision: D3212436

Pulled By: mkonicek

fb-gh-sync-id: 0a1cbcd4eaf39ad4fe67d861c3be2e042e1acb27
fbshipit-source-id: 0a1cbcd4eaf39ad4fe67d861c3be2e042e1acb27
This commit is contained in:
Mike Grabowski 2016-04-23 18:13:41 -07:00 committed by Facebook Github Bot 6
parent ea8f584184
commit f022681a1e
1 changed files with 16 additions and 4 deletions

View File

@ -85,6 +85,10 @@ const Text = React.createClass({
* This function is called on press.
*/
onPress: React.PropTypes.func,
/**
* This function is called on long press.
*/
onLongPress: React.PropTypes.func,
/**
* When true, no visual change is made when text is pressed down. By
* default, a gray oval highlights the text on press down.
@ -128,6 +132,9 @@ const Text = React.createClass({
* Only assigned if touch is needed.
*/
_handlers: (null: ?Object),
_hasPressHandler(): boolean {
return !!this.props.onPress || !!this.props.onLongPress;
},
/**
* These are assigned lazily the first time the responder is set to make plain
* text nodes as cheap as possible.
@ -135,16 +142,17 @@ const Text = React.createClass({
touchableHandleActivePressIn: (null: ?Function),
touchableHandleActivePressOut: (null: ?Function),
touchableHandlePress: (null: ?Function),
touchableHandleLongPress: (null: ?Function),
touchableGetPressRectOffset: (null: ?Function),
render(): ReactElement {
let newProps = this.props;
if (this.props.onStartShouldSetResponder || this.props.onPress) {
if (this.props.onStartShouldSetResponder || this._hasPressHandler()) {
if (!this._handlers) {
this._handlers = {
onStartShouldSetResponder: (): bool => {
const shouldSetFromProps = this.props.onStartShouldSetResponder &&
this.props.onStartShouldSetResponder();
const setResponder = shouldSetFromProps || !!this.props.onPress;
const setResponder = shouldSetFromProps || this._hasPressHandler();
if (setResponder && !this.touchableHandleActivePressIn) {
// Attach and bind all the other handlers only the first time a touch
// actually happens.
@ -154,7 +162,7 @@ const Text = React.createClass({
}
}
this.touchableHandleActivePressIn = () => {
if (this.props.suppressHighlighting || !this.props.onPress) {
if (this.props.suppressHighlighting || !this._hasPressHandler()) {
return;
}
this.setState({
@ -163,7 +171,7 @@ const Text = React.createClass({
};
this.touchableHandleActivePressOut = () => {
if (this.props.suppressHighlighting || !this.props.onPress) {
if (this.props.suppressHighlighting || !this._hasPressHandler()) {
return;
}
this.setState({
@ -175,6 +183,10 @@ const Text = React.createClass({
this.props.onPress && this.props.onPress();
};
this.touchableHandleLongPress = () => {
this.props.onLongPress && this.props.onLongPress();
};
this.touchableGetPressRectOffset = function(): RectOffset {
return PRESS_RECT_OFFSET;
};