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

Experimental event API: Swipe module with tests #15330

Closed
wants to merge 10 commits into from
Closed

Experimental event API: Swipe module with tests #15330

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9c3d933
enhance experimental event Swipe API and writing tests
behzad888 Apr 4, 2019
a2bb6a0
fix flow evetdata
behzad888 Apr 4, 2019
2511313
fix flow dom
behzad888 Apr 5, 2019
5168a36
fix flow dom
behzad888 Apr 5, 2019
58cc567
add pointer type
behzad888 Apr 5, 2019
2af6ffa
fix flow and misunderstood pointerType
behzad888 Apr 5, 2019
7285bbc
add pointerType to eventData
behzad888 Apr 5, 2019
f95df83
fix missing state event porps
behzad888 Apr 5, 2019
b5fe291
resolve review changes
behzad888 Apr 6, 2019
4db87cc
fix typo and pointerType review change
Apr 7, 2019
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
156 changes: 109 additions & 47 deletions packages/react-events/src/Swipe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,34 @@ if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
});
}

type PointerType = 'mouse' | 'pointer' | 'touch';
behzad888 marked this conversation as resolved.
Show resolved Hide resolved

type SwipeEventType = 'swipestart' | 'swipeend' | 'swipemove';

type SwipeDirection = 'up' | 'left' | 'down' | 'right';

type Point = {
x: number,
y: number,
};

type EventData = {
diffX: number,
diffY: number,
pointerType: null | PointerType,
initial: Point,
delta: Point,
point: Point,
direction: null | SwipeDirection,
};
type SwipeEventType = 'swipeleft' | 'swiperight' | 'swipeend' | 'swipemove';

type SwipeEvent = {|
listener: SwipeEvent => void,
target: Element | Document,
type: SwipeEventType,
diffX?: number,
diffY?: number,
pointerType: null | PointerType,
initial: Point,
delta: Point,
point: Point,
direction: null | SwipeDirection,
|};

function createSwipeEvent(
Expand Down Expand Up @@ -64,10 +80,63 @@ function dispatchSwipeEvent(
context.dispatchEvent(syntheticEvent, {discrete});
}

function dispatchSwipStartEvent(
behzad888 marked this conversation as resolved.
Show resolved Hide resolved
context: ResponderContext,
props: Object,
state: SwipeState,
point: Point,
) {
const eventData = {
delta: {
x: point.x - state.startX,
y: point.y - state.startY,
},
initial: {x: state.startX, y: state.startY},
point,
pointerType: state.pointerType,
direction: state.direction,
};
dispatchSwipeEvent(
context,
'swipestart',
props.onSwipeStart,
state,
true,
eventData,
);
}

function dispatchSwipeMoveEvent(
context: ResponderContext,
props: Object,
state: SwipeState,
point: Point,
) {
const eventData = {
delta: {
x: point.x - state.startX,
y: point.y - state.startY,
},
initial: {x: state.startX, y: state.startY},
point,
pointerType: state.pointerType,
direction: state.direction,
};
dispatchSwipeEvent(
context,
'swipemove',
props.onSwipe,
state,
false,
eventData,
);
}

type SwipeState = {
direction: number,
direction: null | SwipeDirection,
isSwiping: boolean,
lastDirection: number,
lastDirection: null | SwipeDirection,
pointerType: null | PointerType,
startX: number,
startY: number,
touchId: null | number,
Expand All @@ -80,9 +149,10 @@ const SwipeResponder = {
targetEventTypes,
createInitialState(): SwipeState {
return {
direction: 0,
direction: null,
isSwiping: false,
lastDirection: 0,
lastDirection: null,
pointerType: null,
startX: 0,
startY: 0,
touchId: null,
Expand All @@ -104,7 +174,7 @@ const SwipeResponder = {
case 'mousedown':
case 'pointerdown': {
if (!state.isSwiping && !context.hasOwnership()) {
let obj = event;
let obj = nativeEvent;
if (type === 'touchstart') {
obj = (nativeEvent: any).targetTouches[0];
state.touchId = obj.identifier;
Expand All @@ -124,6 +194,17 @@ const SwipeResponder = {
state.x = x;
state.y = y;
state.swipeTarget = target;
//use if statement to prevent Fallthrough warning
if (type === 'touchstart') {
state.pointerType = 'touch';
} else if (type === 'mousedown') {
state.pointerType = 'mouse';
} else if (type === 'pointerdown') {
state.pointerType = 'pointer';
behzad888 marked this conversation as resolved.
Show resolved Hide resolved
}
if (props.onSwipeStart) {
dispatchSwipStartEvent(context, props, state, {x, y});
}
context.addRootEventTypes(target.ownerDocument, rootEventTypes);
} else {
state.touchId = null;
Expand Down Expand Up @@ -159,26 +240,21 @@ const SwipeResponder = {
}
const x = (obj: any).screenX;
const y = (obj: any).screenY;
if (x < state.x && props.onSwipeLeft) {
state.direction = 3;
} else if (x > state.x && props.onSwipeRight) {
state.direction = 1;
if (x < state.x) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The logic here isn't quite right, as any vertical movement will cause the horizontal direction to be overwritten, even if the swipe is mainly along the horizontal axis. If a direction is to be reported, we need to determine whether it is "more" horizontal than vertical too.

Copy link
Contributor Author

@behzad888 behzad888 Apr 6, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please check new implementation, thank you.

Copy link
Contributor Author

@behzad888 behzad888 Apr 6, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When a movement across the touch surface or screen should be considered a swipe. There are two variables at the distance traveled by the user's finger on the x or y-axis, and, the time it took. Based on these two factors, we can decide whether that action qualifies as a swipe and in what direction.

IMO we can have distanceThreshold props to weed out swipes and to be considered a swipe on top of onSwip event.
For now, I'm using a default threshold with a value of 10 to check direction and its temporary. If you agree with me, let me do it.
what do you think?

state.direction = 'left';
} else if (x > state.x) {
state.direction = 'right';
}
if (y < state.y) {
state.direction = 'down';
} else if (y > state.y) {
state.direction = 'up';
}
state.x = x;
state.y = y;
if (props.onSwipeMove) {
const eventData = {
diffX: x - state.startX,
diffY: y - state.startY,
};
dispatchSwipeEvent(
context,
'swipemove',
props.onSwipeMove,
state,
false,
eventData,
);
state.lastDirection = state.direction;
if (props.onSwipe) {
dispatchSwipeMoveEvent(context, props, state, {x, y});
(nativeEvent: any).preventDefault();
}
}
Expand All @@ -196,26 +272,12 @@ const SwipeResponder = {
if (props.onShouldClaimOwnership) {
context.releaseOwnership();
}
const direction = state.direction;
const lastDirection = state.lastDirection;
if (direction !== lastDirection) {
if (props.onSwipeLeft && direction === 3) {
dispatchSwipeEvent(
context,
'swipeleft',
props.onSwipeLeft,
state,
true,
);
} else if (props.onSwipeRight && direction === 1) {
dispatchSwipeEvent(
context,
'swiperight',
props.onSwipeRight,
state,
true,
);
}
if (state.direction !== lastDirection && props.onSwipe) {
dispatchSwipeMoveEvent(context, props, state, {
x: state.x,
y: state.y,
});
}
if (props.onSwipeEnd) {
dispatchSwipeEvent(
Expand All @@ -226,7 +288,7 @@ const SwipeResponder = {
true,
);
}
state.lastDirection = direction;
state.lastDirection = null;
state.isSwiping = false;
state.swipeTarget = null;
state.touchId = null;
Expand Down
Loading