Add plumbing/boilerplate for an iOS implementation of the gotpointercapture and lostpointercapture events (second try) (#37889)

Summary:
Pull Request resolved: #37889

Changelog: [Internal] - Add plumbing/boilerplate for an iOS implementation of the gotpointercapture and lostpointercapture events

Lets try this again: The key difference between this and D44977499 (which I previously reverted) is that in propsConversions & primitives I've ommited the "capture" versions of those methods as it was causing issues. Since we're not doing any runtime checks of those raw props it isn't particularlly necessary (at least not yet) and if we ever want to we can address that when it comes up.

The original diff description follows:

This diff simply adds the boilerplate necessary to hook up the gotpointercapture and lostpointercapture events to the fabric iOS touch handler. This diff does not contain any actual implementation of their behavior as that will occur in future diffs.

Reviewed By: adanoff

Differential Revision: D46709127

fbshipit-source-id: 339dc99e14f2e72d9116bbe84edc67cb5bfaa73b

Author: vincentriemer

packages/react-native/Libraries/Components/View/ViewPropTypes.js

@@ -105,6 +105,10 @@ type PointerEventProps = $ReadOnly<{|
   onPointerOverCapture?: ?(e: PointerEvent) => void,
   onPointerOut?: ?(e: PointerEvent) => void,
   onPointerOutCapture?: ?(e: PointerEvent) => void,
+  onGotPointerCapture?: ?(e: PointerEvent) => void,
+  onGotPointerCaptureCapture?: ?(e: PointerEvent) => void,
+  onLostPointerCapture?: ?(e: PointerEvent) => void,
+  onLostPointerCaptureCapture?: ?(e: PointerEvent) => void,
 |}>;
 
 type FocusEventProps = $ReadOnly<{|

packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -144,6 +144,18 @@ const bubblingEventTypes = {
       bubbled: 'onPointerOut',
     },
   },
+  topGotPointerCapture: {
+    phasedRegistrationNames: {
+      captured: 'onGotPointerCaptureCapture',
+      bubbled: 'onGotPointerCapture',
+    },
+  },
+  topLostPointerCapture: {
+    phasedRegistrationNames: {
+      captured: 'onLostPointerCaptureCapture',
+      bubbled: 'onLostPointerCapture',
+    },
+  },
 };
 
 const directEventTypes = {
@@ -366,6 +378,8 @@ const validAttributesForEventProps = ConditionallyIgnoredEventHandlers({
   onPointerLeave: true,
   onPointerOver: true,
   onPointerOut: true,
+  onGotPointerCapture: true,
+  onLostPointerCapture: true,
 });
 
 /**

packages/react-native/React/Views/RCTView.h

@@ -132,5 +132,7 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
 @property (nonatomic, assign) RCTCapturingEventBlock onPointerLeave;
 @property (nonatomic, assign) RCTBubblingEventBlock onPointerOver;
 @property (nonatomic, assign) RCTBubblingEventBlock onPointerOut;
+@property (nonatomic, assign) RCTBubblingEventBlock onGotPointerCapture;
+@property (nonatomic, assign) RCTBubblingEventBlock onLostPointerCapture;
 
 @end

packages/react-native/React/Views/RCTViewManager.m

@@ -549,5 +549,7 @@ - (void)updateAccessibilityTraitsForRole:(RCTView *)view withDefaultView:(RCTVie
 RCT_EXPORT_VIEW_PROPERTY(onPointerLeave, RCTCapturingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onPointerOver, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onPointerOut, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onGotPointerCapture, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onLostPointerCapture, RCTBubblingEventBlock)
 
 @end

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

@@ -223,4 +223,20 @@ void TouchEventEmitter::onPointerOut(const PointerEvent &event) const {
       RawEvent::Category::ContinuousStart);
 }
 
+void TouchEventEmitter::onGotPointerCapture(const PointerEvent &event) const {
+  dispatchPointerEvent(
+      "gotPointerCapture",
+      event,
+      EventPriority::AsynchronousBatched,
+      RawEvent::Category::ContinuousStart);
+}
+
+void TouchEventEmitter::onLostPointerCapture(const PointerEvent &event) const {
+  dispatchPointerEvent(
+      "lostPointerCapture",
+      event,
+      EventPriority::AsynchronousBatched,
+      RawEvent::Category::ContinuousEnd);
+}
+
 } // namespace facebook::react

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

@@ -38,6 +38,8 @@ class TouchEventEmitter : public EventEmitter {
   void onPointerLeave(PointerEvent const &event) const;
   void onPointerOver(PointerEvent const &event) const;
   void onPointerOut(PointerEvent const &event) const;
+  void onGotPointerCapture(PointerEvent const &event) const;
+  void onLostPointerCapture(PointerEvent const &event) const;
 
  private:
   void dispatchTouchEvent(

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

@@ -21,7 +21,7 @@ namespace facebook::react {
 enum class PointerEventsMode : uint8_t { Auto, None, BoxNone, BoxOnly };
 
 struct ViewEvents {
-  std::bitset<32> bits{};
+  std::bitset<64> bits{};
 
   enum class Offset : std::size_t {
     // Pointer events
@@ -60,13 +60,15 @@ struct ViewEvents {
     PointerOutCapture = 29,
     Click = 30,
     ClickCapture = 31,
+    GotPointerCapture = 32,
+    LostPointerCapture = 33,
   };
 
   constexpr bool operator[](const Offset offset) const {
     return bits[static_cast<std::size_t>(offset)];
   }
 
-  std::bitset<32>::reference operator[](const Offset offset) {
+  std::bitset<64>::reference operator[](const Offset offset) {
     return bits[static_cast<std::size_t>(offset)];
   }
 };

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

@@ -616,6 +616,18 @@ static inline ViewEvents convertRawProp(
       "onClickCapture",
       sourceValue[Offset::ClickCapture],
       defaultValue[Offset::ClickCapture]);
+  result[Offset::GotPointerCapture] = convertRawProp(
+      context,
+      rawProps,
+      "onGotPointerCapture",
+      sourceValue[Offset::GotPointerCapture],
+      defaultValue[Offset::GotPointerCapture]);
+  result[Offset::LostPointerCapture] = convertRawProp(
+      context,
+      rawProps,
+      "onLostPointerCapture",
+      sourceValue[Offset::LostPointerCapture],
+      defaultValue[Offset::LostPointerCapture]);
 
   // PanResponder callbacks
   result[Offset::MoveShouldSetResponder] = convertRawProp(

packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventCaptureMouse.js

@@ -32,12 +32,12 @@ function PointerEventCaptureMouseTestCase(
   const pointermoveNoCaptureGot1Ref = useRef(false);
   const ownEventForTheCapturedTargetGotRef = useRef(false);
 
-  // const testGotPointerCapture = harness.useAsyncTest(
-  //   'gotpointercapture event received"',
-  // );
-  // const testLostPointerCapture = harness.useAsyncTest(
-  //   'lostpointercapture event received"',
-  // );
+  const testGotPointerCapture = harness.useAsyncTest(
+    'gotpointercapture event received"',
+  );
+  const testLostPointerCapture = harness.useAsyncTest(
+    'lostpointercapture event received"',
+  );
 
   const handleCaptureButtonDown = useCallback((evt: PointerEvent) => {
     const target0 = target0Ref.current;
@@ -50,20 +50,20 @@ function PointerEventCaptureMouseTestCase(
     }
   }, []);
 
-  // const handleTarget0GotPointerCapture = useCallback(
-  //   (evt: PointerEvent) => {
-  //     testGotPointerCapture.done();
-  //   },
-  //   [testGotPointerCapture],
-  // );
-
-  // const handleTarget0LostPointerCapture = useCallback(
-  //   (evt: PointerEvent) => {
-  //     testLostPointerCapture.done();
-  //     isPointerCaptureRef.current = false;
-  //   },
-  //   [testLostPointerCapture],
-  // );
+  const handleTarget0GotPointerCapture = useCallback(
+    (evt: PointerEvent) => {
+      testGotPointerCapture.done();
+    },
+    [testGotPointerCapture],
+  );
+
+  const handleTarget0LostPointerCapture = useCallback(
+    (evt: PointerEvent) => {
+      testLostPointerCapture.done();
+      isPointerCaptureRef.current = false;
+    },
+    [testLostPointerCapture],
+  );
 
   const testPointerMove0 = harness.useAsyncTest(
     'pointerover event for black rectangle received',
@@ -150,8 +150,8 @@ function PointerEventCaptureMouseTestCase(
     <View style={styles.container}>
       <View
         ref={target0Ref}
-        // onGotPointerCapture={handleTarget0GotPointerCapture}
-        // onLostPointerCapture={handleTarget0LostPointerCapture}
+        onGotPointerCapture={handleTarget0GotPointerCapture}
+        onLostPointerCapture={handleTarget0LostPointerCapture}
         onPointerMove={handleTarget0PointerMove}
         style={styles.target0}
       />