diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js index 85b421c74c3..428026199fa 100644 --- a/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js +++ b/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js @@ -8,13 +8,23 @@ * @flow */ -import {Button, Switch, StyleSheet, ScrollView, View, Text} from 'react-native'; +import {Button, StyleSheet, ScrollView, View, Text} from 'react-native'; import * as React from 'react'; import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes'; function EventfulView(props: {| name: string, emitByDefault?: boolean, + onLeave?: boolean, + onLeaveCapture?: boolean, + onEnter?: boolean, + onEnterCapture?: boolean, + onDown?: boolean, + onDownCapture?: boolean, + onUp?: boolean, + onUpCapture?: boolean, + onMove?: boolean, + onMoveCapture?: boolean, log: string => void, ...ViewProps, |}) { @@ -24,41 +34,53 @@ function EventfulView(props: {| setTag(ref.current?._nativeTag); }, [ref]); - const {log, name, children, emitByDefault, ...restProps} = props; - const [lastEvent, setLastEvent] = React.useState(''); - const [listen, setListen] = React.useState(!!emitByDefault); + const { + log, + name, + children, + emitByDefault, + onLeave, + onLeaveCapture, + onEnter, + onEnterCapture, + onDown, + onDownCapture, + onUp, + onUpCapture, + onMove, + onMoveCapture, + ...restProps + } = props; const [tag, setTag] = React.useState(''); const eventLog = eventName => event => { // $FlowFixMe Using private property log(`${name} - ${eventName} - target: ${event.target._nativeTag}`); - setLastEvent(eventName); }; - const listeners = listen - ? { - onPointerUp: eventLog('up'), - onPointerUpCapture: eventLog('up capture'), - onPointerDown: eventLog('down'), - onPointerDownCapture: eventLog('down capture'), - onPointerLeave2: eventLog('leave'), - onPointerLeave2Capture: eventLog('leave capture'), - onPointerEnter2: eventLog('enter'), - onPointerEnter2Capture: eventLog('enter capture'), - } - : Object.freeze({}); + const listeners = { + onPointerUp: onUp ? eventLog('up') : null, + onPointerUpCapture: onUpCapture ? eventLog('up capture') : null, + onPointerDown: onDown ? eventLog('down') : null, + onPointerDownCapture: onDownCapture ? eventLog('down capture') : null, + onPointerLeave2: onLeave ? eventLog('leave') : null, + onPointerLeave2Capture: onLeaveCapture ? eventLog('leave capture') : null, + onPointerEnter2: onEnter ? eventLog('enter') : null, + onPointerEnter2Capture: onEnterCapture ? eventLog('enter capture') : null, + onPointerMove2: onMove ? eventLog('move') : null, + onPointerMove2Capture: onMoveCapture ? eventLog('move capture') : null, + }; + + let listeningTo = Object.keys(listeners) + .filter(listenerName => listeners[listenerName] != null) + .join(', '); return ( - + - {props.name}, {tag}, last event: {lastEvent} + {props.name}, {tag}, {listeningTo} - setListen(l => !l)} - /> {props.children} @@ -69,10 +91,18 @@ function AbsoluteChildExample({log}: {log: string => void}) { return ( void}) {