[iOS] Fabric: Added ScrollEndDragEvent for scrollEndDrag event

zhongwuzw · Dec 18, 2024 · 0dfe3a0 · 0dfe3a0
1 parent 4dac99c
commit 0dfe3a0
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 8 deletions.
diff --git a/...eact-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm b/...eact-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm
@@ -530,9 +530,8 @@ - (BOOL)_shouldDisableScrollInteraction
   return NO;
 }
 
-- (ScrollViewEventEmitter::Metrics)_scrollViewMetrics
+- (void)_setScrollViewMetrics:(ScrollViewEventEmitter::Metrics &)metrics
 {
-  auto metrics = ScrollViewEventEmitter::Metrics{};
   metrics.contentSize = RCTSizeFromCGSize(_scrollView.contentSize);
   metrics.contentOffset = RCTPointFromCGPoint(_scrollView.contentOffset);
   metrics.contentInset = RCTEdgeInsetsFromUIEdgeInsets(_scrollView.contentInset);
@@ -543,6 +542,12 @@ - (BOOL)_shouldDisableScrollInteraction
   if (_layoutMetrics.layoutDirection == LayoutDirection::RightToLeft) {
     metrics.contentOffset.x = metrics.contentSize.width - metrics.containerSize.width - metrics.contentOffset.x;
   }
+}
+
+- (ScrollViewEventEmitter::Metrics)_scrollViewMetrics
+{
+  auto metrics = ScrollViewEventEmitter::Metrics{};
+  [self _setScrollViewMetrics:metrics];
 
   return metrics;
 }
@@ -602,6 +607,19 @@ - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView
       targetContentOffset->y = scrollView.contentOffset.y + travel * _endDraggingSensitivityMultiplier;
     }
   }
+
+  if (!_eventEmitter) {
+    return;
+  }
+
+  auto metrics = ScrollViewEventEmitter::EndDragMetrics{};
+  [self _setScrollViewMetrics:metrics];
+  metrics.targetContentOffset.x = targetContentOffset->x;
+  metrics.targetContentOffset.y = targetContentOffset->y;
+  metrics.velocity.x = velocity.x;
+  metrics.velocity.y = velocity.y;
+
+  static_cast<const ScrollViewEventEmitter &>(*_eventEmitter).onScrollEndDrag(metrics);
 }
 
 - (BOOL)touchesShouldCancelInContentView:(__unused UIView *)view
@@ -672,8 +690,6 @@ - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL
     return;
   }
 
-  static_cast<const ScrollViewEventEmitter &>(*_eventEmitter).onScrollEndDrag([self _scrollViewMetrics]);
-
   [self _updateStateWithContentOffset];
 
   if (!decelerate) {
@@ -770,7 +786,10 @@ - (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(nullable UI
     return;
   }
 
-  static_cast<const ScrollViewEventEmitter &>(*_eventEmitter).onScrollEndDrag([self _scrollViewMetrics]);
+  auto metrics = ScrollViewEventEmitter::EndDragMetrics{};
+  [self _setScrollViewMetrics:metrics];
+  static_cast<const ScrollViewEventEmitter &>(*_eventEmitter).onScrollEndDrag(metrics);
+
   [self _updateStateWithContentOffset];
 }
 

diff --git a/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollEvent.cpp b/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*/) {

diff --git a/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollEvent.h b/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollEvent.h
@@ -37,6 +37,20 @@ struct ScrollEvent : public EventPayload {
   EventPayloadType getType() const override;
 };
 
+struct ScrollEndDragEvent : public ScrollEvent {
+  Point targetContentOffset;
+  Point velocity;
+
+  ScrollEndDragEvent() = default;
+
+  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);

diff --git a/.../react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewEventEmitter.cpp b/.../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(

diff --git a/...es/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewEventEmitter.h b/...es/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;