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 all 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
151 changes: 104 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,20 +23,39 @@ if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
});
}

type PointerType = 'mouse' | 'pen' | 'touch';

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

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

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

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

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

//min distance traveled to be considered swipe
const DEFAULT_TRESHOLD_SWIP = 1;

function createSwipeEvent(
type: SwipeEventType,
target: Element | Document,
Expand Down Expand Up @@ -64,10 +83,63 @@ function dispatchSwipeEvent(
context.dispatchEvent(syntheticEvent, {discrete});
}

function dispatchSwipeStartEvent(
context: ResponderContext,
props: Object,
state: SwipeState,
point: PointType,
) {
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: PointType,
) {
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 | SwipeDirectionType,
isSwiping: boolean,
lastDirection: number,
lastDirection: null | SwipeDirectionType,
pointerType: null | PointerType,
startX: number,
startY: number,
touchId: null | number,
Expand All @@ -80,9 +152,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 +177,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 +197,10 @@ const SwipeResponder = {
state.x = x;
state.y = y;
state.swipeTarget = target;
state.pointerType = (nativeEvent: any).pointerType;
if (props.onSwipeStart) {
dispatchSwipeStartEvent(context, props, state, {x, y});
}
context.addRootEventTypes(target.ownerDocument, rootEventTypes);
} else {
state.touchId = null;
Expand Down Expand Up @@ -159,26 +236,20 @@ 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;
const distX = x - state.startX;
const distY = y - state.startY;

if (Math.abs(distX) >= DEFAULT_TRESHOLD_SWIP) {
state.direction = distX < 0 ? 'left' : 'right';
} else if (Math.abs(distY) >= DEFAULT_TRESHOLD_SWIP) {
state.direction = distY < 0 ? 'down' : 'up';
Copy link
Contributor

Choose a reason for hiding this comment

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

currently, this logic "prefers" left/right swipes over up/down swipes?
Could/Should we check which abs is greater to determine the direction?

const absX = Math.abs(distX);
const absY = Math.abs(distY);
if (absX > DEFAULT_TRESHOLD_SWIP || absY > DEFAULT_TRESHOLD_SWIP) {
  if (absX > absY) {
    state.direction = distX < 0 ? 'left' : 'right';
  }
  state.direction = distY < 0 ? 'down' : '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 +267,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 +283,7 @@ const SwipeResponder = {
true,
);
}
state.lastDirection = direction;
state.lastDirection = null;
state.isSwiping = false;
state.swipeTarget = null;
state.touchId = null;
Expand Down
Loading