Add plumbing/boilerplate for an iOS implementation of the click eve…

…nt (facebook#36615) Summary: Pull Request resolved: facebook#36615 Changelog: [Internal] - Add plumbing/boilerplate for an iOS implementation of the `click` event This diff simply adds the boilerplate necessary to hook up a click event to the fabric iOS touch handler. This diff does not contain any actual implementation of the click's behavior as that will occur in future diffs. Reviewed By: necolas Differential Revision: D43129366 fbshipit-source-id: 71488b893c789d21c833533471745275062c0730
danilobuerger · Apr 5, 2023 · 54a6922 · 54a6922
1 parent 9bb7165
commit 54a6922
Show file tree

Hide file tree

Showing 12 changed files with 77 additions and 4 deletions.
diff --git a/packages/react-native/Libraries/Components/View/ViewPropTypes.js b/packages/react-native/Libraries/Components/View/ViewPropTypes.js
@@ -87,6 +87,8 @@ type MouseEventProps = $ReadOnly<{|
 
 // Experimental/Work in Progress Pointer Event Callbacks (not yet ready for use)
 type PointerEventProps = $ReadOnly<{|
+  onClick?: ?(event: PointerEvent) => void,
+  onClickCapture?: ?(event: PointerEvent) => void,
   onPointerEnter?: ?(event: PointerEvent) => void,
   onPointerEnterCapture?: ?(event: PointerEvent) => void,
   onPointerLeave?: ?(event: PointerEvent) => void,

diff --git a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js
@@ -88,6 +88,12 @@ const bubblingEventTypes = {
   },
 
   // Experimental/Work in Progress Pointer Events (not yet ready for use)
+  topClick: {
+    phasedRegistrationNames: {
+      captured: 'onClickCapture',
+      bubbled: 'onClick',
+    },
+  },
   topPointerCancel: {
     phasedRegistrationNames: {
       captured: 'onPointerCancelCapture',
@@ -350,6 +356,7 @@ const validAttributesForEventProps = ConditionallyIgnoredEventHandlers({
   onTouchCancel: true,
 
   // Pointer events
+  onClick: true,
   onPointerUp: true,
   onPointerDown: true,
   onPointerCancel: true,

diff --git a/packages/react-native/Libraries/Text/Text/RCTTextView.h b/packages/react-native/Libraries/Text/Text/RCTTextView.h
@@ -19,6 +19,11 @@ NS_ASSUME_NONNULL_BEGIN
           contentFrame:(CGRect)contentFrame
        descendantViews:(NSArray<UIView *> *)descendantViews;
 
+/**
+ * (Experimental and unused for Paper) Pointer event handlers.
+ */
+@property (nonatomic, assign) RCTBubblingEventBlock onClick;
+
 @end
 
 NS_ASSUME_NONNULL_END
diff --git a/packages/react-native/Libraries/Text/VirtualText/RCTVirtualTextView.h b/packages/react-native/Libraries/Text/VirtualText/RCTVirtualTextView.h
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import <React/RCTComponent.h>
+
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTVirtualTextView : UIView
+
+/**
+ * (Experimental and unused for Paper) Pointer event handlers.
+ */
+@property (nonatomic, assign) RCTBubblingEventBlock onClick;
+
+@end
+
+NS_ASSUME_NONNULL_END
diff --git a/packages/react-native/Libraries/Text/VirtualText/RCTVirtualTextView.m b/packages/react-native/Libraries/Text/VirtualText/RCTVirtualTextView.m
@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import <React/RCTVirtualTextView.h>
+
+@implementation RCTVirtualTextView
+
+@end
diff --git a/packages/react-native/Libraries/Text/VirtualText/RCTVirtualTextViewManager.m b/packages/react-native/Libraries/Text/VirtualText/RCTVirtualTextViewManager.m
@@ -5,17 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-#import <React/RCTVirtualTextViewManager.h>
-
 #import <React/RCTVirtualTextShadowView.h>
+#import <React/RCTVirtualTextView.h>
+#import <React/RCTVirtualTextViewManager.h>
 
 @implementation RCTVirtualTextViewManager
 
 RCT_EXPORT_MODULE(RCTVirtualText)
 
 - (UIView *)view
 {
-  return [UIView new];
+  return [RCTVirtualTextView new];
 }
 
 - (RCTShadowView *)shadowView

diff --git a/packages/react-native/React/Views/RCTView.h b/packages/react-native/React/Views/RCTView.h
@@ -123,6 +123,7 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
 /**
  * (Experimental and unused for Paper) Pointer event handlers.
  */
+@property (nonatomic, assign) RCTBubblingEventBlock onClick;
 @property (nonatomic, assign) RCTBubblingEventBlock onPointerCancel;
 @property (nonatomic, assign) RCTBubblingEventBlock onPointerDown;
 @property (nonatomic, assign) RCTBubblingEventBlock onPointerMove;

diff --git a/packages/react-native/React/Views/RCTViewManager.m b/packages/react-native/React/Views/RCTViewManager.m
@@ -480,6 +480,7 @@ - (RCTShadowView *)shadowView
 RCT_CUSTOM_VIEW_PROPERTY(onTouchCancel, BOOL, RCTView) {}
 
 // Experimental/WIP Pointer Events (not yet ready for use)
+RCT_EXPORT_VIEW_PROPERTY(onClick, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onPointerCancel, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onPointerDown, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onPointerMove, RCTBubblingEventBlock)

diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/TouchEventEmitter.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/TouchEventEmitter.cpp
@@ -153,6 +153,14 @@ void TouchEventEmitter::onTouchCancel(TouchEvent const &event) const {
       RawEvent::Category::ContinuousEnd);
 }
 
+void TouchEventEmitter::onClick(const PointerEvent &event) const {
+  dispatchPointerEvent(
+      "click",
+      event,
+      EventPriority::AsynchronousBatched,
+      RawEvent::Category::Discrete);
+}
+
 void TouchEventEmitter::onPointerCancel(const PointerEvent &event) const {
   dispatchPointerEvent(
       "pointerCancel",

diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/TouchEventEmitter.h b/packages/react-native/ReactCommon/react/renderer/components/view/TouchEventEmitter.h
@@ -30,6 +30,7 @@ class TouchEventEmitter : public EventEmitter {
   void onTouchEnd(TouchEvent const &event) const;
   void onTouchCancel(TouchEvent const &event) const;
 
+  void onClick(PointerEvent const &event) const;
   void onPointerCancel(PointerEvent const &event) const;
   void onPointerDown(PointerEvent const &event) const;
   void onPointerMove(PointerEvent const &event) const;

diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/primitives.h b/packages/react-native/ReactCommon/react/renderer/components/view/primitives.h
@@ -59,7 +59,8 @@ struct ViewEvents {
     PointerOut = 27,
     PointerOverCapture = 28,
     PointerOutCapture = 29,
-
+    Click = 30,
+    ClickCapture = 31,
   };
 
   constexpr bool operator[](const Offset offset) const {

diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/propsConversions.h b/packages/react-native/ReactCommon/react/renderer/components/view/propsConversions.h
@@ -605,6 +605,18 @@ static inline ViewEvents convertRawProp(
       "onPointerOut",
       sourceValue[Offset::PointerOut],
       defaultValue[Offset::PointerOut]);
+  result[Offset::Click] = convertRawProp(
+      context,
+      rawProps,
+      "onClick",
+      sourceValue[Offset::Click],
+      defaultValue[Offset::Click]);
+  result[Offset::ClickCapture] = convertRawProp(
+      context,
+      rawProps,
+      "onClickCapture",
+      sourceValue[Offset::ClickCapture],
+      defaultValue[Offset::ClickCapture]);
 
   // PanResponder callbacks
   result[Offset::MoveShouldSetResponder] = convertRawProp(