Experimental event API: Swipe module with tests #15330

behzad888 · 2019-04-04T23:53:38Z

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 · 2019-04-05T00:06:54Z

	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

trueadm · 2019-04-05T10:01:19Z

@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?

behzad888 · 2019-04-05T17:34:32Z

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

behzad888 · 2019-04-05T19:46:37Z

What's wrong with danger task?

necolas

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

packages/react-events/src/Swipe.js

necolas · 2019-04-05T21:34:46Z

packages/react-events/src/Swipe.js

-            state.direction = 3;
-          } else if (x > state.x && props.onSwipeRight) {
-            state.direction = 1;
+          if (x < state.x) {


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.

please check new implementation, thank you.

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?

necolas · 2019-04-05T21:36:28Z

packages/react-events/src/__tests__/Swipe-test.internal.js

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


This is dispatching a MouseEvent

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.

packages/react-events/src/__tests__/Swipe-test.internal.js

necolas · 2019-04-05T21:39:54Z

packages/react-events/src/__tests__/Swipe-test.internal.js

+    });
+  });
+
+  describe('nested responders', () => {


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

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

packages/react-events/src/__tests__/Swipe-test.internal.js

trueadm

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

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.

hartzis · 2019-04-29T20:37:34Z

packages/react-events/src/Swipe.js

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


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

behzad888 · 2019-08-23T08:04:15Z

Let me do this with new changes. so, this could be close for now

behzad888 added 2 commits April 5, 2019 04:12

enhance experimental event Swipe API and writing tests

9c3d933

fix flow evetdata

a2bb6a0

facebook-github-bot added the CLA Signed label Apr 4, 2019

behzad888 added 4 commits April 5, 2019 10:58

fix flow dom

2511313

fix flow dom

5168a36

add pointer type

58cc567

fix flow and misunderstood pointerType

2af6ffa

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

trueadm added the React Flare label Apr 5, 2019

add pointerType to eventData

7285bbc

fix missing state event porps

f95df83

necolas suggested changes Apr 5, 2019

View reviewed changes

behzad888 and others added 2 commits April 6, 2019 04:43

resolve review changes

b5fe291

fix typo and pointerType review change

4db87cc

trueadm approved these changes Apr 9, 2019

View reviewed changes

hartzis reviewed Apr 29, 2019

View reviewed changes

behzad888 closed this Aug 23, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Experimental event API: Swipe module with tests #15330

Experimental event API: Swipe module with tests #15330

behzad888 commented Apr 4, 2019 •

edited

Loading

sizebot commented Apr 5, 2019

trueadm commented Apr 5, 2019

behzad888 commented Apr 5, 2019

behzad888 commented Apr 5, 2019

necolas left a comment

necolas Apr 5, 2019

behzad888 Apr 6, 2019 •

edited

Loading

behzad888 Apr 6, 2019 •

edited

Loading

necolas Apr 5, 2019

behzad888 Apr 6, 2019

necolas Apr 5, 2019 •

edited

Loading

behzad888 Apr 6, 2019

trueadm left a comment •

edited

Loading

hartzis left a comment

hartzis Apr 29, 2019

behzad888 commented Aug 23, 2019 •

edited

Loading

Experimental event API: Swipe module with tests #15330

Experimental event API: Swipe module with tests #15330

Conversation

behzad888 commented Apr 4, 2019 • edited Loading

sizebot commented Apr 5, 2019

Log

trueadm commented Apr 5, 2019

behzad888 commented Apr 5, 2019

behzad888 commented Apr 5, 2019

necolas left a comment

Choose a reason for hiding this comment

necolas Apr 5, 2019

Choose a reason for hiding this comment

behzad888 Apr 6, 2019 • edited Loading

Choose a reason for hiding this comment

behzad888 Apr 6, 2019 • edited Loading

Choose a reason for hiding this comment

necolas Apr 5, 2019

Choose a reason for hiding this comment

behzad888 Apr 6, 2019

Choose a reason for hiding this comment

necolas Apr 5, 2019 • edited Loading

Choose a reason for hiding this comment

behzad888 Apr 6, 2019

Choose a reason for hiding this comment

trueadm left a comment • edited Loading

Choose a reason for hiding this comment

hartzis left a comment

Choose a reason for hiding this comment

hartzis Apr 29, 2019

Choose a reason for hiding this comment

behzad888 commented Aug 23, 2019 • edited Loading

behzad888 commented Apr 4, 2019 •

edited

Loading

behzad888 Apr 6, 2019 •

edited

Loading

behzad888 Apr 6, 2019 •

edited

Loading

necolas Apr 5, 2019 •

edited

Loading

trueadm left a comment •

edited

Loading

behzad888 commented Aug 23, 2019 •

edited

Loading