Fabric: Added ScrollEndDragEvent for scrollEndDrag event (facebook#48319

)

Summary:
Fixes facebook#42533 .

## Changelog:

[IOS] [FIXED] -  Fabric: Added ScrollEndDragEvent for scrollEndDrag event

Pull Request resolved: facebook#48319

Test Plan: Repro please see facebook#42533 .

Reviewed By: javache

Differential Revision: D67517912

Pulled By: cipolleschi

fbshipit-source-id: aa1caebfb690d09a207b3ebce382eceb520009e5

packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm

@@ -547,6 +547,17 @@ - (BOOL)_shouldDisableScrollInteraction
   return metrics;
 }
 
+- (ScrollViewEventEmitter::EndDragMetrics)_scrollViewMetricsWithVelocity:(CGPoint)velocity
+                                                  andTargetContentOffset:(CGPoint)targetContentOffset
+{
+  ScrollViewEventEmitter::EndDragMetrics metrics = [self _scrollViewMetrics];
+  metrics.targetContentOffset.x = targetContentOffset.x;
+  metrics.targetContentOffset.y = targetContentOffset.y;
+  metrics.velocity.x = velocity.x;
+  metrics.velocity.y = velocity.y;
+  return metrics;
+}
+
 - (void)_updateStateWithContentOffset
 {
   if (!_state) {
@@ -602,6 +613,14 @@ - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView
       targetContentOffset->y = scrollView.contentOffset.y + travel * _endDraggingSensitivityMultiplier;
     }
   }
+
+  if (!_eventEmitter) {
+    return;
+  }
+
+  auto metrics = [self _scrollViewMetricsWithVelocity:velocity andTargetContentOffset:*targetContentOffset];
+
+  static_cast<const ScrollViewEventEmitter &>(*_eventEmitter).onScrollEndDrag(metrics);
 }
 
 - (BOOL)touchesShouldCancelInContentView:(__unused UIView *)view
@@ -672,8 +691,6 @@ - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL
     return;
   }
 
-  static_cast<const ScrollViewEventEmitter &>(*_eventEmitter).onScrollEndDrag([self _scrollViewMetrics]);
-
   [self _updateStateWithContentOffset];
 
   if (!decelerate) {
@@ -770,7 +787,9 @@ - (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(nullable UI
     return;
   }
 
-  static_cast<const ScrollViewEventEmitter &>(*_eventEmitter).onScrollEndDrag([self _scrollViewMetrics]);
+  auto metrics = [self _scrollViewMetricsWithVelocity:{} andTargetContentOffset:{}];
+  static_cast<const ScrollViewEventEmitter &>(*_eventEmitter).onScrollEndDrag(metrics);
+
   [self _updateStateWithContentOffset];
 }
 

packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollEvent.cpp

@@ -76,6 +76,39 @@ EventPayloadType ScrollEvent::getType() const {
   return EventPayloadType::ScrollEvent;
 }
 
+jsi::Value ScrollEndDragEvent::asJSIValue(jsi::Runtime& runtime) const {
+  auto payload = ScrollEvent::asJSIValue(runtime).asObject(runtime);
+
+  {
+    auto targetContentOffsetObj = jsi::Object(runtime);
+    targetContentOffsetObj.setProperty(runtime, "x", targetContentOffset.x);
+    targetContentOffsetObj.setProperty(runtime, "y", targetContentOffset.y);
+    payload.setProperty(runtime, "targetContentOffset", targetContentOffsetObj);
+  }
+
+  {
+    auto velocityObj = jsi::Object(runtime);
+    velocityObj.setProperty(runtime, "x", velocity.x);
+    velocityObj.setProperty(runtime, "y", velocity.y);
+    payload.setProperty(runtime, "velocity", velocityObj);
+  }
+
+  return payload;
+}
+
+folly::dynamic ScrollEndDragEvent::asDynamic() const {
+  auto metrics = ScrollEvent::asDynamic();
+
+  auto targetContentOffsetObj = folly::dynamic::object(
+      "x", targetContentOffset.x)("y", targetContentOffset.y);
+  metrics["targetContentOffset"] = std::move(targetContentOffsetObj);
+
+  auto velocityObj = folly::dynamic::object("x", velocity.x)("y", velocity.y);
+  metrics["velocity"] = std::move(velocityObj);
+
+  return metrics;
+};
+
 #if RN_DEBUG_STRING_CONVERTIBLE
 
 std::string getDebugName(const ScrollEvent& /*scrollEvent*/) {

packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollEvent.h

@@ -37,6 +37,23 @@ struct ScrollEvent : public EventPayload {
   EventPayloadType getType() const override;
 };
 
+struct ScrollEndDragEvent : public ScrollEvent {
+  Point targetContentOffset;
+  Point velocity;
+
+  ScrollEndDragEvent() = default;
+
+  ScrollEndDragEvent(const ScrollEvent& scrollEvent)
+      : ScrollEvent(scrollEvent), targetContentOffset({}), velocity({}) {}
+
+  folly::dynamic asDynamic() const;
+
+  /*
+   * EventPayload implementations
+   */
+  jsi::Value asJSIValue(jsi::Runtime& runtime) const override;
+};
+
 #if RN_DEBUG_STRING_CONVERTIBLE
 
 std::string getDebugName(const ScrollEvent& scrollEvent);

packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewEventEmitter.cpp

@@ -25,8 +25,9 @@ void ScrollViewEventEmitter::onScrollBeginDrag(
 }
 
 void ScrollViewEventEmitter::onScrollEndDrag(
-    const ScrollEvent& scrollEvent) const {
-  dispatchScrollViewEvent("scrollEndDrag", scrollEvent);
+    const ScrollEndDragEvent& scrollEvent) const {
+  dispatchEvent(
+      "scrollEndDrag", std::make_shared<ScrollEndDragEvent>(scrollEvent));
 }
 
 void ScrollViewEventEmitter::onMomentumScrollBegin(

packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewEventEmitter.h

@@ -21,10 +21,11 @@ class ScrollViewEventEmitter : public ViewEventEmitter {
   using ViewEventEmitter::ViewEventEmitter;
 
   using Metrics = ScrollEvent;
+  using EndDragMetrics = ScrollEndDragEvent;
 
   void onScroll(const ScrollEvent& scrollEvent) const;
   void onScrollBeginDrag(const ScrollEvent& scrollEvent) const;
-  void onScrollEndDrag(const ScrollEvent& scrollEvent) const;
+  void onScrollEndDrag(const ScrollEndDragEvent& scrollEvent) const;
   void onMomentumScrollBegin(const ScrollEvent& scrollEvent) const;
   void onMomentumScrollEnd(const ScrollEvent& scrollEvent) const;
   void onScrollToTop(const ScrollEvent& scrollEvent) const;