Codemod arvr to use onPointer* instead of onEnter/onExit/onMove

Summary: Changelog: [Internal] Improve experimental support for pointer event dispatching support in JS

Reviewed By: mdvacca

Differential Revision: D35216647

fbshipit-source-id: 212f038115e4713097db05847a9638efe0a25bed

Libraries/Components/View/ViewPropTypes.js

@@ -14,6 +14,7 @@ import type {
   BlurEvent,
   FocusEvent,
   MouseEvent,
+  PointerEvent,
   PressEvent,
   Layout,
   LayoutEvent,
@@ -84,8 +85,28 @@ type DirectEventProps = $ReadOnly<{|
 |}>;
 
 type MouseEventProps = $ReadOnly<{|
-  onMouseEnter?: (event: MouseEvent) => void,
-  onMouseLeave?: (event: MouseEvent) => void,
+  onMouseEnter?: ?(event: MouseEvent) => void,
+  onMouseLeave?: ?(event: MouseEvent) => void,
+|}>;
+
+type PointerEventProps = $ReadOnly<{|
+  onPointerEnter?: ?(event: PointerEvent) => void,
+  onPointerLeave?: ?(event: PointerEvent) => void,
+  onPointerMove?: ?(event: PointerEvent) => void,
+  onPointerCancel?: ?(e: PointerEvent) => void,
+  onPointerCancelCapture?: ?(e: PointerEvent) => void,
+  onPointerDown?: ?(e: PointerEvent) => void,
+  onPointerDownCapture?: ?(e: PointerEvent) => void,
+  onPointerUp?: ?(e: PointerEvent) => void,
+  onPointerUpCapture?: ?(e: PointerEvent) => void,
+
+  // FIXME: these events are temporary while we converge pointer event handling
+  onPointerEnter2?: ?(e: PointerEvent) => void,
+  onPointerEnter2Capture?: ?(e: PointerEvent) => void,
+  onPointerLeave2?: ?(e: PointerEvent) => void,
+  onPointerLeave2Capture?: ?(e: PointerEvent) => void,
+  onPointerMove2?: ?(e: PointerEvent) => void,
+  onPointerMove2Capture?: ?(e: PointerEvent) => void,
 |}>;
 
 type TouchEventProps = $ReadOnly<{|
@@ -99,20 +120,6 @@ type TouchEventProps = $ReadOnly<{|
   onTouchStartCapture?: ?(e: PressEvent) => void,
 |}>;
 
-type PointerEventCallbackProps = $ReadOnly<{|
-  onPointerCancel?: ?(e: PointerEvent) => void,
-  onPointerCancelCapture?: ?(e: PointerEvent) => void,
-  onPointerDown?: ?(e: PointerEvent) => void,
-  onPointerDownCapture?: ?(e: PointerEvent) => void,
-  onPointerEnter2?: ?(e: PointerEvent) => void,
-  onPointerLeave2?: ?(e: PointerEvent) => void,
-  onPointerEnter2Capture?: ?(e: PointerEvent) => void,
-  onPointerLeave2Capture?: ?(e: PointerEvent) => void,
-  onPointerMove2Capture?: ?(e: PointerEvent) => void,
-  onPointerUp?: ?(e: PointerEvent) => void,
-  onPointerUpCapture?: ?(e: PointerEvent) => void,
-|}>;
-
 /**
  * For most touch interactions, you'll simply want to wrap your component in
  * `TouchableHighlight` or `TouchableOpacity`. Check out `Touchable.js`,
@@ -395,8 +402,8 @@ export type ViewProps = $ReadOnly<{|
   ...DirectEventProps,
   ...GestureResponderEventProps,
   ...MouseEventProps,
+  ...PointerEventProps,
   ...TouchEventProps,
-  ...PointerEventCallbackProps,
   ...AndroidViewProps,
   ...IOSViewProps,
 

Libraries/Text/TextProps.js

@@ -12,6 +12,7 @@
 
 import type {
   LayoutEvent,
+  PointerEvent,
   PressEvent,
   TextLayoutEvent,
 } from '../Types/CoreEventTypes';
@@ -31,10 +32,18 @@ export type PressRetentionOffset = $ReadOnly<{|
   right: number,
 |}>;
 
+type PointerEventProps = $ReadOnly<{|
+  onPointerEnter?: (event: PointerEvent) => void,
+  onPointerLeave?: (event: PointerEvent) => void,
+  onPointerMove?: (event: PointerEvent) => void,
+|}>;
+
 /**
  * @see https://reactnative.dev/docs/text#reference
  */
 export type TextProps = $ReadOnly<{|
+  ...PointerEventProps,
+
   /**
    * Indicates whether the view is an accessibility element.
    *

packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js

@@ -30,7 +30,7 @@ function EventfulView(props: {|
   const [tag, setTag] = React.useState('');
 
   const eventLog = eventName => event => {
-    // $FlowFixMe[prop-missing] Using private property
+    // $FlowFixMe Using private property
     log(`${name} - ${eventName} - target: ${event.target._nativeTag}`);
     setLastEvent(eventName);
   };