Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[FlowCleanup] Add flow types to PanResponder #21291

Closed
wants to merge 4 commits into from
Closed

[FlowCleanup] Add flow types to PanResponder #21291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
436eccc
Add flow types to PanResponder
empyrical Sep 24, 2018
69c87f4
Only show on Responder-related events
empyrical Sep 24, 2018
d0d348f
Clean up and add more types
empyrical Sep 25, 2018
c5095bf
Clean up documentation comments for GestureState
empyrical Sep 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 22 additions & 14 deletions Libraries/Experimental/SwipeableRow/SwipeableRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ const View = require('View');
const createReactClass = require('create-react-class');
const emptyFunction = require('fbjs/lib/emptyFunction');

import type {LayoutEvent, PressEvent} from 'CoreEventTypes';
import type {GestureState} from 'PanResponder';

const IS_RTL = I18nManager.isRTL;

// NOTE: Eventually convert these consts to an input object of configurations
Expand Down Expand Up @@ -204,24 +207,27 @@ const SwipeableRow = createReactClass({
this._animateToClosedPosition();
},

_onSwipeableViewLayout(event: Object): void {
_onSwipeableViewLayout(event: LayoutEvent): void {
this.setState({
isSwipeableViewRendered: true,
rowHeight: event.nativeEvent.layout.height,
});
},

_handleMoveShouldSetPanResponderCapture(
event: Object,
gestureState: Object,
event: PressEvent,
gestureState: GestureState,
): boolean {
// Decides whether a swipe is responded to by this component or its child
return gestureState.dy < 10 && this._isValidSwipe(gestureState);
},

_handlePanResponderGrant(event: Object, gestureState: Object): void {},
_handlePanResponderGrant(
event: PressEvent,
gestureState: GestureState,
): void {},

_handlePanResponderMove(event: Object, gestureState: Object): void {
_handlePanResponderMove(event: PressEvent, gestureState: GestureState): void {
if (this._isSwipingExcessivelyRightFromClosedPosition(gestureState)) {
return;
}
Expand All @@ -235,22 +241,24 @@ const SwipeableRow = createReactClass({
}
},

_isSwipingRightFromClosed(gestureState: Object): boolean {
_isSwipingRightFromClosed(gestureState: GestureState): boolean {
const gestureStateDx = IS_RTL ? -gestureState.dx : gestureState.dx;
return this._previousLeft === CLOSED_LEFT_POSITION && gestureStateDx > 0;
},

_swipeFullSpeed(gestureState: Object): void {
_swipeFullSpeed(gestureState: GestureState): void {
this.state.currentLeft.setValue(this._previousLeft + gestureState.dx);
},

_swipeSlowSpeed(gestureState: Object): void {
_swipeSlowSpeed(gestureState: GestureState): void {
this.state.currentLeft.setValue(
this._previousLeft + gestureState.dx / SLOW_SPEED_SWIPE_FACTOR,
);
},

_isSwipingExcessivelyRightFromClosedPosition(gestureState: Object): boolean {
_isSwipingExcessivelyRightFromClosedPosition(
gestureState: GestureState,
): boolean {
/**
* We want to allow a BIT of right swipe, to allow users to know that
* swiping is available, but swiping right does not do anything
Expand All @@ -264,8 +272,8 @@ const SwipeableRow = createReactClass({
},

_onPanResponderTerminationRequest(
event: Object,
gestureState: Object,
event: PressEvent,
gestureState: GestureState,
): boolean {
return false;
},
Expand Down Expand Up @@ -338,7 +346,7 @@ const SwipeableRow = createReactClass({
},

// Ignore swipes due to user's finger moving slightly when tapping
_isValidSwipe(gestureState: Object): boolean {
_isValidSwipe(gestureState: GestureState): boolean {
if (
this.props.preventSwipeRight &&
this._previousLeft === CLOSED_LEFT_POSITION &&
Expand All @@ -350,7 +358,7 @@ const SwipeableRow = createReactClass({
return Math.abs(gestureState.dx) > HORIZONTAL_SWIPE_DISTANCE_THRESHOLD;
},

_shouldAnimateRemainder(gestureState: Object): boolean {
_shouldAnimateRemainder(gestureState: GestureState): boolean {
/**
* If user has swiped past a certain distance, animate the rest of the way
* if they let go
Expand All @@ -361,7 +369,7 @@ const SwipeableRow = createReactClass({
);
},

_handlePanResponderEnd(event: Object, gestureState: Object): void {
_handlePanResponderEnd(event: PressEvent, gestureState: GestureState): void {
const horizontalDistance = IS_RTL ? -gestureState.dx : gestureState.dx;
if (this._isSwipingRightFromClosed(gestureState)) {
this.props.onOpen();
Expand Down
Loading