Make PointerEvent a subclass of EventPayload (#38279)

Summary:
Pull Request resolved: #38279

Changelog: [Internal] - Make PointerEvent a subclass of EventPayload

This is another refactor diff in preparation of intercepting events in UIManagerBinding to accomplish the Pointer Capture APIs (and more) by making the PointerEvent struct implement EventPayload. Now that this struct will be passed to the event pipeline itself we'll be able to determine in UIManagerBinding that the event is a PointerEvent by dynamic casting and access the event's properties without converting to/from JSI values.

Reviewed By: NickGerleman, sammy-SC

Differential Revision: D47300801

fbshipit-source-id: 4d80378803af0c31dca068ef2b99e34fab426d84

packages/react-native/ReactCommon/react/renderer/components/view/PointerEvent.cpp

@@ -9,6 +9,41 @@
 
 namespace facebook::react {
 
+jsi::Value PointerEvent::asJSIValue(jsi::Runtime &runtime) const {
+  auto object = jsi::Object(runtime);
+  object.setProperty(runtime, "pointerId", this->pointerId);
+  object.setProperty(runtime, "pressure", this->pressure);
+  object.setProperty(runtime, "pointerType", this->pointerType);
+  object.setProperty(runtime, "clientX", this->clientPoint.x);
+  object.setProperty(runtime, "clientY", this->clientPoint.y);
+  // x/y are an alias to clientX/Y
+  object.setProperty(runtime, "x", this->clientPoint.x);
+  object.setProperty(runtime, "y", this->clientPoint.y);
+  // since RN doesn't have a scrollable root, pageX/Y will always equal
+  // clientX/Y
+  object.setProperty(runtime, "pageX", this->clientPoint.x);
+  object.setProperty(runtime, "pageY", this->clientPoint.y);
+  object.setProperty(runtime, "screenX", this->screenPoint.x);
+  object.setProperty(runtime, "screenY", this->screenPoint.y);
+  object.setProperty(runtime, "offsetX", this->offsetPoint.x);
+  object.setProperty(runtime, "offsetY", this->offsetPoint.y);
+  object.setProperty(runtime, "width", this->width);
+  object.setProperty(runtime, "height", this->height);
+  object.setProperty(runtime, "tiltX", this->tiltX);
+  object.setProperty(runtime, "tiltY", this->tiltY);
+  object.setProperty(runtime, "detail", this->detail);
+  object.setProperty(runtime, "buttons", this->buttons);
+  object.setProperty(runtime, "tangentialPressure", this->tangentialPressure);
+  object.setProperty(runtime, "twist", this->twist);
+  object.setProperty(runtime, "ctrlKey", this->ctrlKey);
+  object.setProperty(runtime, "shiftKey", this->shiftKey);
+  object.setProperty(runtime, "altKey", this->altKey);
+  object.setProperty(runtime, "metaKey", this->metaKey);
+  object.setProperty(runtime, "isPrimary", this->isPrimary);
+  object.setProperty(runtime, "button", this->button);
+  return object;
+}
+
 #if RN_DEBUG_STRING_CONVERTIBLE
 
 std::string getDebugName(PointerEvent const & /*pointerEvent*/) {

packages/react-native/ReactCommon/react/renderer/components/view/PointerEvent.h

@@ -7,13 +7,14 @@
 
 #pragma once
 
+#include <react/renderer/core/EventPayload.h>
 #include <react/renderer/core/ReactPrimitives.h>
 #include <react/renderer/debug/DebugStringConvertible.h>
 #include <react/renderer/graphics/Point.h>
 
 namespace facebook::react {
 
-struct PointerEvent {
+struct PointerEvent : public EventPayload {
   /*
    * A unique identifier for the pointer causing the event.
    */
@@ -109,6 +110,11 @@ struct PointerEvent {
    * was fired.
    */
   int button;
+
+  /*
+   * EventPayload implementations
+   */
+  jsi::Value asJSIValue(jsi::Runtime &runtime) const override;
 };
 
 #if RN_DEBUG_STRING_CONVERTIBLE

packages/react-native/ReactCommon/react/renderer/components/view/TouchEventEmitter.cpp

@@ -58,43 +58,6 @@ static jsi::Value touchEventPayload(
   return object;
 }
 
-static jsi::Value pointerEventPayload(
-    jsi::Runtime &runtime,
-    PointerEvent const &event) {
-  auto object = jsi::Object(runtime);
-  object.setProperty(runtime, "pointerId", event.pointerId);
-  object.setProperty(runtime, "pressure", event.pressure);
-  object.setProperty(runtime, "pointerType", event.pointerType);
-  object.setProperty(runtime, "clientX", event.clientPoint.x);
-  object.setProperty(runtime, "clientY", event.clientPoint.y);
-  // x/y are an alias to clientX/Y
-  object.setProperty(runtime, "x", event.clientPoint.x);
-  object.setProperty(runtime, "y", event.clientPoint.y);
-  // since RN doesn't have a scrollable root, pageX/Y will always equal
-  // clientX/Y
-  object.setProperty(runtime, "pageX", event.clientPoint.x);
-  object.setProperty(runtime, "pageY", event.clientPoint.y);
-  object.setProperty(runtime, "screenX", event.screenPoint.x);
-  object.setProperty(runtime, "screenY", event.screenPoint.y);
-  object.setProperty(runtime, "offsetX", event.offsetPoint.x);
-  object.setProperty(runtime, "offsetY", event.offsetPoint.y);
-  object.setProperty(runtime, "width", event.width);
-  object.setProperty(runtime, "height", event.height);
-  object.setProperty(runtime, "tiltX", event.tiltX);
-  object.setProperty(runtime, "tiltY", event.tiltY);
-  object.setProperty(runtime, "detail", event.detail);
-  object.setProperty(runtime, "buttons", event.buttons);
-  object.setProperty(runtime, "tangentialPressure", event.tangentialPressure);
-  object.setProperty(runtime, "twist", event.twist);
-  object.setProperty(runtime, "ctrlKey", event.ctrlKey);
-  object.setProperty(runtime, "shiftKey", event.shiftKey);
-  object.setProperty(runtime, "altKey", event.altKey);
-  object.setProperty(runtime, "metaKey", event.metaKey);
-  object.setProperty(runtime, "isPrimary", event.isPrimary);
-  object.setProperty(runtime, "button", event.button);
-  return object;
-}
-
 void TouchEventEmitter::dispatchTouchEvent(
     std::string type,
     TouchEvent const &event,
@@ -116,9 +79,7 @@ void TouchEventEmitter::dispatchPointerEvent(
     RawEvent::Category category) const {
   dispatchEvent(
       std::move(type),
-      [event](jsi::Runtime &runtime) {
-        return pointerEventPayload(runtime, event);
-      },
+      [event](jsi::Runtime &runtime) { return event.asJSIValue(runtime); },
       priority,
       category);
 }
@@ -179,7 +140,7 @@ void TouchEventEmitter::onPointerDown(const PointerEvent &event) const {
 
 void TouchEventEmitter::onPointerMove(const PointerEvent &event) const {
   dispatchUniqueEvent("pointerMove", [event](jsi::Runtime &runtime) {
-    return pointerEventPayload(runtime, event);
+    return event.asJSIValue(runtime);
   });
 }