[add] Support for PointerEvent props

Adds support for PointerEvent prop handlers and removes `onClickCapture`. Ref #2377
necolas · Mar 20, 2023 · 80591bf · 80591bf
1 parent d60b90b
commit 80591bf
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 6 deletions.
diff --git a/packages/react-native-web/src/exports/Text/__tests__/index-test.js b/packages/react-native-web/src/exports/Text/__tests__/index-test.js
@@ -9,7 +9,7 @@
 
 import React from 'react';
 import Text from '../';
-import { createEventTarget } from 'dom-event-testing-library';
+import { createEventTarget, setPointerEvent } from 'dom-event-testing-library';
 import { act, render } from '@testing-library/react';
 
 describe('components/Text', () => {
@@ -230,6 +230,28 @@ describe('components/Text', () => {
     });
   });
 
+  describe('prop "onPointerDown"', () => {
+    beforeEach(() => {
+      setPointerEvent(true);
+    });
+    afterEach(() => {
+      setPointerEvent(false);
+    });
+
+    test('is called', () => {
+      const onPointerDown = jest.fn();
+      const ref = React.createRef();
+      act(() => {
+        render(<Text onPointerDown={onPointerDown} ref={ref} />);
+      });
+      const target = createEventTarget(ref.current);
+      act(() => {
+        target.pointerdown({ pointerType: 'touch' });
+      });
+      expect(onPointerDown).toBeCalled();
+    });
+  });
+
   describe('prop "onPress"', () => {
     test('is called', () => {
       const onPress = jest.fn();

diff --git a/packages/react-native-web/src/exports/View/__tests__/index-test.js b/packages/react-native-web/src/exports/View/__tests__/index-test.js
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import View from '../';
-import { createEventTarget } from 'dom-event-testing-library';
+import { createEventTarget, setPointerEvent } from 'dom-event-testing-library';
 import { act, render } from '@testing-library/react';
 
 describe('components/View', () => {
@@ -202,6 +202,21 @@ describe('components/View', () => {
     });
   });
 
+  describe('prop "onClick"', () => {
+    test('is called', () => {
+      const onClick = jest.fn();
+      const ref = React.createRef();
+      act(() => {
+        render(<View onClick={onClick} ref={ref} />);
+      });
+      const target = createEventTarget(ref.current);
+      act(() => {
+        target.click();
+      });
+      expect(onClick).toBeCalled();
+    });
+  });
+
   describe('prop "onFocus"', () => {
     test('is called', () => {
       const onFocus = jest.fn();
@@ -218,6 +233,28 @@ describe('components/View', () => {
     });
   });
 
+  describe('prop "onPointerDown"', () => {
+    beforeEach(() => {
+      setPointerEvent(true);
+    });
+    afterEach(() => {
+      setPointerEvent(false);
+    });
+
+    test('is called', () => {
+      const onPointerDown = jest.fn();
+      const ref = React.createRef();
+      act(() => {
+        render(<View onPointerDown={onPointerDown} ref={ref} />);
+      });
+      const target = createEventTarget(ref.current);
+      act(() => {
+        target.pointerdown({ pointerType: 'touch' });
+      });
+      expect(onPointerDown).toBeCalled();
+    });
+  });
+
   describe('prop "ref"', () => {
     test('value is set', () => {
       const ref = jest.fn();

diff --git a/packages/react-native-web/src/exports/View/types.js b/packages/react-native-web/src/exports/View/types.js
@@ -136,16 +136,26 @@ export type AccessibilityProps = {|
 |};
 
 export type EventProps = {|
+  onAuxClick?: (e: any) => void,
   onBlur?: (e: any) => void,
   onClick?: (e: any) => void,
-  onClickCapture?: (e: any) => void,
   onContextMenu?: (e: any) => void,
   onFocus?: (e: any) => void,
+  onGotPointerCapture?: (e: any) => void,
   onKeyDown?: (e: any) => void,
   onKeyUp?: (e: any) => void,
   onLayout?: (e: LayoutEvent) => void,
+  onLostPointerCapture?: (e: any) => void,
   onMoveShouldSetResponder?: (e: any) => boolean,
   onMoveShouldSetResponderCapture?: (e: any) => boolean,
+  onPointerCancel?: (e: any) => void,
+  onPointerDown?: (e: any) => void,
+  onPointerEnter?: (e: any) => void,
+  onPointerMove?: (e: any) => void,
+  onPointerLeave?: (e: any) => void,
+  onPointerOut?: (e: any) => void,
+  onPointerOver?: (e: any) => void,
+  onPointerUp?: (e: any) => void,
   onResponderEnd?: (e: any) => void,
   onResponderGrant?: (e: any) => void | boolean,
   onResponderMove?: (e: any) => void,

diff --git a/packages/react-native-web/src/modules/forwardedProps/index.js b/packages/react-native-web/src/modules/forwardedProps/index.js
@@ -119,8 +119,18 @@ export const accessibilityProps = {
 
 export const clickProps = {
   onClick: true,
-  onClickCapture: true,
-  onContextMenu: true
+  onAuxClick: true,
+  onContextMenu: true,
+  onGotPointerCapture: true,
+  onLostPointerCapture: true,
+  onPointerCancel: true,
+  onPointerDown: true,
+  onPointerEnter: true,
+  onPointerMove: true,
+  onPointerLeave: true,
+  onPointerOut: true,
+  onPointerOver: true,
+  onPointerUp: true
 };
 
 export const focusProps = {
@@ -157,6 +167,5 @@ export const touchProps = {
 };
 
 export const styleProps = {
-  classList: true,
   style: true
 };