[add] Support for PointerEvent props

Adds support for PointerEvent prop handlers and removes `onClickCapture`. Ref #2377
necolas · Dec 27, 2022 · c26cb9b · c26cb9b
1 parent 43b897a
commit c26cb9b
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
 };