diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js index d057a621573..2dc20750fe9 100644 --- a/Libraries/Components/View/ViewPropTypes.js +++ b/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, diff --git a/Libraries/Text/TextProps.js b/Libraries/Text/TextProps.js index e07f315e539..84556c43b50 100644 --- a/Libraries/Text/TextProps.js +++ b/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. * diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js index ba8936ddfc1..276aeafad92 100644 --- a/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js +++ b/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); };