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.

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

Experimental event API: Swipe module with tests #15330

Open
wants to merge 10 commits into
base: master
from

Conversation

Projects
None yet
6 participants
@behzad888
Copy link
Contributor

commented Apr 4, 2019

Note: this is for an experimental event Swip API and writing tests.

  • Determine event object data
    pointerType: 'mouse' | 'pointer' | 'touch'
    initial: { x: number, y: number },
    point: { x: number, y: number },
    delta:  { x: number, y: number }  
    direction: 'up' | 'left' | 'down' | 'right',
  • Combine onSwipe{Left,Right,Up,Down} into onSwipe
  • Write unit tests
    • onSwipeStart
    • onSwipeEnd
    • onSwipe
    • Directions
    • nested responders
    • PointerType

And about pointerType I think we should set it by context.

Ref #15257

@sizebot

This comment has been minimized.

Copy link

commented Apr 5, 2019

Fails
🚫

node` failed.

Log

Error:  { FetchError: invalid json response body at http://react.zpao.com/builds/master/_commits/b93a8a9bb8460a3d582072d3b252ecc15c6ea0f5/results.json reason: Unexpected token < in JSON at position 0
    at /home/circleci/project/node_modules/node-fetch/lib/body.js:48:31
    at process._tickCallback (internal/process/next_tick.js:68:7)
  name: 'FetchError',
  message:
   'invalid json response body at http://react.zpao.com/builds/master/_commits/b93a8a9bb8460a3d582072d3b252ecc15c6ea0f5/results.json reason: Unexpected token < in JSON at position 0',
  type: 'invalid-json' }

Generated by 🚫 dangerJS

behzad888 added some commits Apr 5, 2019

@trueadm

This comment has been minimized.

Copy link
Contributor

commented Apr 5, 2019

@behzad888 How do you mean by "And about pointerType I think we should set it by context.". Surely you should just set it on the Swipe event object that is created in the swipe responder module?

@trueadm trueadm changed the title enhance experimental event Swipe API and writing tests Experimental event API: Swipe module with tests Apr 5, 2019

@trueadm trueadm added the React Flare label Apr 5, 2019

@behzad888

This comment has been minimized.

Copy link
Contributor Author

commented Apr 5, 2019

@trueadm
I meant we have to check all events to set pointerType. Although, we can get that from ResponderEvent.

@behzad888

This comment has been minimized.

Copy link
Contributor Author

commented Apr 5, 2019

What's wrong with danger task?

@necolas
Copy link
Contributor

left a comment

The event payload isn't something we've discussed internally yet, and is subject to change. But the event payload would need tests too.

Show resolved Hide resolved packages/react-events/src/Swipe.js Outdated
Show resolved Hide resolved packages/react-events/src/Swipe.js Outdated
Show resolved Hide resolved packages/react-events/src/Swipe.js Outdated
state.direction = 3;
} else if (x > state.x && props.onSwipeRight) {
state.direction = 1;
if (x < state.x) {

This comment has been minimized.

Copy link
@necolas

necolas Apr 5, 2019

Contributor

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.

This comment has been minimized.

Copy link
@behzad888

behzad888 Apr 6, 2019

Author Contributor

please check new implementation, thank you.

This comment has been minimized.

Copy link
@behzad888

behzad888 Apr 6, 2019

Author Contributor

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?

});

it('is called after "pointerdown" event', () => {
ref.current.dispatchEvent(createMouseEvent('pointerdown'));

This comment has been minimized.

Copy link
@necolas

necolas Apr 5, 2019

Contributor

This is dispatching a MouseEvent

This comment has been minimized.

Copy link
@behzad888

behzad888 Apr 6, 2019

Author Contributor

based on https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events pointer event types are intentionally similar to mouse event types, however, PointerEvent API is not defined and document.createEvent('Event') deprecated and does not have screenX/Y option too. so, until finding a way to use Pointer Event API, I'm using MouseEvent.

Show resolved Hide resolved packages/react-events/src/__tests__/Swipe-test.internal.js Outdated
Show resolved Hide resolved packages/react-events/src/__tests__/Swipe-test.internal.js Outdated
});
});

describe('nested responders', () => {

This comment has been minimized.

Copy link
@necolas

necolas Apr 5, 2019

Contributor

@trueadm Nested swipe responders probably shouldn't be a thing. Maybe swipe responders should always claim ownership?

This comment has been minimized.

Copy link
@behzad888

behzad888 Apr 6, 2019

Author Contributor

Attention, after write multiple touch identifier test units this would be necessary

Show resolved Hide resolved packages/react-events/src/__tests__/Swipe-test.internal.js Outdated

behzad888 and others added some commits Apr 6, 2019

@trueadm

trueadm approved these changes Apr 9, 2019

Copy link
Contributor

left a comment

Will be good to get these changes and tests in – we can always revise details later. Nice work! If you rebase with master, the CI should pass again.

@hartzis
Copy link
Contributor

left a comment

This is awesome and I am looking forward to seeing this integrated.

Just as a reference, I'm the maintainer of react-swipeable and I would love to help out with swipe related issues where I can.

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';

This comment has been minimized.

Copy link
@hartzis

hartzis Apr 29, 2019

Contributor

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';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.