diff --git a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js index 3cc360bafac..77d54ecea8b 100644 --- a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js +++ b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js @@ -26,7 +26,7 @@ type EventRecord = { event: Object, }; -class RNTesterPlatformTestEventRecorder { +export default class RNTesterPlatformTestEventRecorder { allRecords: Array = []; relevantEvents: Array = []; rawOrder: number = 1; @@ -101,41 +101,34 @@ class RNTesterPlatformTestEventRecorder { }; } - useRecorderTestEventHandlers( + createRecorderTestEventHandlers( targetNames: $ReadOnlyArray, callback?: (event: Object, eventType: string, targetName: string) => void, ): $ReadOnly<{[targetName: string]: ViewProps}> { - // Yes this method exists as a class's prototype method but it will still only be used - // in functional components - // prettier-ignore - // $FlowFixMe[react-rule-hook] - return useMemo(() => { // eslint-disable-line react-hooks/rules-of-hooks - const result: {[targetName: string]: ViewProps} = {}; - for (const targetName of targetNames) { - const recordedEventHandler = - this._generateRecordedEventHandlerWithCallback( - targetName, - (event, eventType) => - callback && callback(event, eventType, targetName), - ); - // $FlowFixMe[incompatible-call] - const eventListenerProps = this.relevantEvents.reduce( - (acc: ViewProps, eventName) => { - const eventPropName = - 'on' + eventName[0].toUpperCase() + eventName.slice(1); - return { - ...acc, - [eventPropName]: (e => { - recordedEventHandler(e, eventName); - }) as $FlowFixMe, - }; - }, - {}, + const result: {[targetName: string]: ViewProps} = {}; + for (const targetName of targetNames) { + const recordedEventHandler = + this._generateRecordedEventHandlerWithCallback( + targetName, + (event, eventType) => callback?.(event, eventType, targetName), ); - result[targetName] = eventListenerProps; - } - return result; - }, [callback, targetNames]); + // $FlowFixMe[incompatible-call] + const eventListenerProps = this.relevantEvents.reduce( + (acc: ViewProps, eventName) => { + const eventPropName = + 'on' + eventName[0].toUpperCase() + eventName.slice(1); + return { + ...acc, + [eventPropName]: (e => { + recordedEventHandler(e, eventName); + }) as $FlowFixMe, + }; + }, + {}, + ); + result[targetName] = eventListenerProps; + } + return result; } getRecords(): Array { @@ -176,4 +169,13 @@ class RNTesterPlatformTestEventRecorder { } } -export default RNTesterPlatformTestEventRecorder; +export function useRecorderTestEventHandlers( + eventRecorder: RNTesterPlatformTestEventRecorder, + targetNames: $ReadOnlyArray, + callback?: (event: Object, eventType: string, targetName: string) => void, +): $ReadOnly<{[targetName: string]: ViewProps}> { + return useMemo( + () => eventRecorder.createRecorderTestEventHandlers(targetNames, callback), + [eventRecorder, targetNames, callback], + ); +} diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveAcross.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveAcross.js index 26574a1076d..bf6afd99125 100644 --- a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveAcross.js +++ b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveAcross.js @@ -11,7 +11,9 @@ import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes'; import RNTesterPlatformTest from '../PlatformTest/RNTesterPlatformTest'; -import RNTesterPlatformTestEventRecorder from '../PlatformTest/RNTesterPlatformTestEventRecorder'; +import RNTesterPlatformTestEventRecorder, { + useRecorderTestEventHandlers, +} from '../PlatformTest/RNTesterPlatformTestEventRecorder'; import * as React from 'react'; import {useCallback, useState} from 'react'; import {StyleSheet, View} from 'react-native'; @@ -126,7 +128,8 @@ function PointerEventPointerMoveAcrossTestCase( [eventRecorder, pointermove_across], ); - const eventProps = eventRecorder.useRecorderTestEventHandlers( + const eventProps = useRecorderTestEventHandlers( + eventRecorder, targetNames, eventHandler, ); diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveBetween.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveBetween.js index f72b5761de7..79e4007f2f1 100644 --- a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveBetween.js +++ b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveBetween.js @@ -11,7 +11,9 @@ import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes'; import RNTesterPlatformTest from '../PlatformTest/RNTesterPlatformTest'; -import RNTesterPlatformTestEventRecorder from '../PlatformTest/RNTesterPlatformTestEventRecorder'; +import RNTesterPlatformTestEventRecorder, { + useRecorderTestEventHandlers, +} from '../PlatformTest/RNTesterPlatformTestEventRecorder'; import * as React from 'react'; import {useCallback, useState} from 'react'; import {StyleSheet, View} from 'react-native'; @@ -102,7 +104,8 @@ function PointerEventPointerMoveBetweenTestCase( [eventRecorder, pointermove_between], ); - const eventProps = eventRecorder.useRecorderTestEventHandlers( + const eventProps = useRecorderTestEventHandlers( + eventRecorder, targetNames, eventHandler, ); diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder.js index 232d145beee..19986a80ed2 100644 --- a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder.js +++ b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder.js @@ -12,7 +12,9 @@ import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatf import type {PointerEvent} from 'react-native'; import RNTesterPlatformTest from '../PlatformTest/RNTesterPlatformTest'; -import RNTesterPlatformTestEventRecorder from '../PlatformTest/RNTesterPlatformTestEventRecorder'; +import RNTesterPlatformTestEventRecorder, { + useRecorderTestEventHandlers, +} from '../PlatformTest/RNTesterPlatformTestEventRecorder'; import * as React from 'react'; import {useCallback, useState} from 'react'; import {StyleSheet, View} from 'react-native'; @@ -111,7 +113,8 @@ function PointerEventPointerMoveEventOrderTestCase( [endMoved, eventRecorder, pointer_test, startMoved], ); - const eventProps = eventRecorder.useRecorderTestEventHandlers( + const eventProps = useRecorderTestEventHandlers( + eventRecorder, ['start', 'end'], eventHandler, );