-
Notifications
You must be signed in to change notification settings - Fork 24.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FlowCleanup] Add flow types to PanResponder #21291
Conversation
Looks like tests are failing because I rebased it against master after Metro was bumped, and that version of Metro's not on NPM yet. Will need to rerun these when that's resolved. |
_updateGestureStateOnMove: function(gestureState, touchHistory) { | ||
_updateGestureStateOnMove( | ||
gestureState: GestureState, | ||
touchHistory: $PropertyType<PressEvent, 'touchHistory'>, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
😉 ❤️
Libraries/Types/CoreEventTypes.js
Outdated
@@ -26,6 +26,12 @@ export type SyntheticEvent<T> = $ReadOnly<{| | |||
persist: () => void, | |||
target: ?number, | |||
timeStamp: number, | |||
touchHistory: $ReadOnly<{| |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this always set? Like, does View's onLayout
callback include touchHistory?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am not sure - I tried a few events out, and they all seemed to have it - but those were all touch-related, so that it probably why. I will make it nullable, but will require some more modifications to panresponder
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like this is where it is set:
react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js
Lines 1629 to 1638 in 5491c3f
/** | |
* `touchHistory` isn't actually on the native event, but putting it in the | |
* interface will ensure that it is cleaned up when pooled/destroyed. The | |
* `ResponderEventPlugin` will populate it appropriately. | |
*/ | |
var ResponderSyntheticEvent = SyntheticEvent.extend({ | |
touchHistory: function(nativeEvent) { | |
return null; // Actually doesn't even look at the native event. | |
} | |
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Want to add a matching ResponderSyntheticEvent to CoreEventTypes?
export type ResponderSyntheticEvent<T> = $ReadOnly<{|
...SyntheticEvent<T>
// touchHistory...
|}>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tried that, and it works great! 👍
This is amazing, thank you so much for taking on Flow typing PanResponder. This will be a great win for type safety! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
TheSavior has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
const panHandlers = { | ||
onStartShouldSetResponder: function(e) { | ||
return config.onStartShouldSetPanResponder === undefined | ||
onStartShouldSetResponder(event: PressEvent) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you type this as returning a boolean I think you'll find that the flow type for onStartShouldSetPanResponder
is not correct.
Same with onStartShouldSetResponderCapture
and onResponderTerminationRequest
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 will take a look at this. Also I realize that the type for touchHistory.touchBank
is wrong, so I will fix that too.
Added return types to everything in |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
On the whole, this is really awesome! What do you think of the comments I left?
@@ -121,6 +124,81 @@ const currentCentroidY = TouchHistoryMath.currentCentroidY; | |||
* [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/master/RNTester/js/PanResponderExample.js) | |||
*/ | |||
|
|||
export type GestureState = {| |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are we missing a $ReadOnly
here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Several places in PanResponder change the values of gestureState
, so setting this to $ReadOnly
raises many errors
* ID of the gestureState - persisted as long as there at least one touch on screen | ||
*/ | ||
stateID: number, | ||
/** |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: I think it'd be a good idea to space out the comment from the property above it. It visually groups the comment with the property, which makes it easier (for at least me) to read this type.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Spaced them out
*/ | ||
numberActiveTouches: number, | ||
/** | ||
* @private |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think you forgot to put a description here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed!
const panHandlers = { | ||
onStartShouldSetResponder: function(e) { | ||
return config.onStartShouldSetPanResponder === undefined | ||
onStartShouldSetResponder(event: PressEvent): boolean { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder if it's better to add the type annotation to panHandlers
instead:
const panHandlers: {[key: string]: (event: PressEvent) => boolean} = {
onStartShouldSetResponder(event) {
// ...
}
}
With this approach, you only have to type once for the whole map, as opposed to once per every function in it. Also, if someone adds a function to this map that doesn't conform to the panHandler
signature, flow will raise an error.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not all of the functions have the same signature (see the types in PanResponderConfig
) so this wouldn't work (unless I had it be a type like: {[key: string]: ActiveCallback | PassiveCallback}
)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
rsnara has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
@empyrical merged commit 3f79b2a into Once this commit is added to a release, you will see the corresponding version tag below the description at 3f79b2a. If the commit has a single |
Summary: This PR adds flow types to the `PanResponder` module. It is part of my effort to flowtype the `Swipable*` classes. A new `touchHistory` field had to be added to `SyntheticEvent` as well. Pull Request resolved: facebook#21291 Reviewed By: TheSavior Differential Revision: D10013265 Pulled By: RSNara fbshipit-source-id: 3cd65a0eae41c756d1605e6771588d820f040e2a
This PR adds flow types to the
PanResponder
module. It is part of my effort to flowtype theSwipable*
classes.A new
touchHistory
field had to be added toSyntheticEvent
as well.Test Plan:
Flow check and running the whole jest test suite showed no signs of regressions.
Release Notes:
[GENERAL] [ENHANCEMENT] [Libraries/Interaction/PanResponder.js] - Added flow type annotations, and exported the
GestureState
type which is used by callbacks.[GENERAL] [ENHANCEMENT] [Libraries/Experimental/SwipeableRow/SwipeableRow.js] - Flow typed
SwipableRow
's use of PanResponder[GENERAL] [ENHANCEMENT] [Libraries/Types/CoreEventTypes.js] - Added a new
touchHistory
field toSyntheticEvent