[Fabric] Add implementation of ScrollView.scrollto (#11344)

* [Fabric] Add implementation of ScrollView.scrollto * Change files
microsoft · Mar 9, 2023 · b08df30 · b08df30
1 parent 936e715
commit b08df30
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 0 deletions.
diff --git a/change/react-native-windows-50a9690e-5aa4-43e4-8b77-cadc11ba8fc6.json b/change/react-native-windows-50a9690e-5aa4-43e4-8b77-cadc11ba8fc6.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Add implementation of ScrollView.scrollto",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/CompositionSwitcher.idl b/vnext/Microsoft.ReactNative/CompositionSwitcher.idl
@@ -89,6 +89,7 @@ namespace Microsoft.ReactNative.Composition
     void ContentSize(Windows.Foundation.Numerics.Vector2 size);
     Windows.Foundation.Numerics.Vector3 ScrollPosition { get; };
     void ScrollBy(Windows.Foundation.Numerics.Vector3 offset);
+    void TryUpdatePosition(Windows.Foundation.Numerics.Vector3 position, Boolean animate);
   }
 
   [webhosthidden]

diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp
@@ -579,6 +579,19 @@ struct CompScrollerVisual : winrt::Microsoft::ReactNative::Composition::implemen
     m_interactionTracker.TryUpdatePositionBy(offset);
   };
 
+  void TryUpdatePosition(winrt::Windows::Foundation::Numerics::float3 const &position, bool animate) noexcept {
+    if (animate) {
+      auto compositor = m_visual.Compositor();
+      auto cubicBezier = compositor.CreateCubicBezierEasingFunction({0.17f, 0.67f}, {1.0f, 1.0f});
+      auto kfa = compositor.CreateVector3KeyFrameAnimation();
+      kfa.Duration(std::chrono::seconds{1});
+      kfa.InsertKeyFrame(1.0f, position, cubicBezier);
+      m_interactionTracker.TryUpdatePositionWithAnimation(kfa);
+    } else {
+      m_interactionTracker.TryUpdatePosition(position);
+    }
+  }
+
  private:
   void FireScrollPositionChanged(winrt::Windows::Foundation::Numerics::float2 position) {
     m_scrollPositionChangedEvent(*this, winrt::make<CompScrollPositionChangedArgs>(position));

diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp
@@ -288,6 +288,23 @@ bool ScrollViewComponentView::ScrollWheel(facebook::react::Point pt, int32_t del
   return false;
 }
 
+void ScrollViewComponentView::handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept {
+  if (commandName == "scrollTo") {
+    auto x = arg[0].asDouble();
+    auto y = arg[1].asDouble();
+    auto animate = arg[2].asBool();
+    m_visual.TryUpdatePosition({static_cast<float>(x), static_cast<float>(y), 0.0f}, animate);
+  } else if (commandName == "flashScrollIndicators") {
+    // No-op for now
+  } else if (commandName == "scrollToEnd") {
+    // No-op for now
+  } else if (commandName == "zoomToRect") {
+    // No-op for now
+  } else {
+    Super::handleCommand(commandName, arg);
+  }
+}
+
 void ScrollViewComponentView::ensureVisual() noexcept {
   if (!m_visual) {
     m_visual = m_compContext.CreateSpriteVisual();

diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h
@@ -71,6 +71,7 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   void prepareForRecycle() noexcept override;
   facebook::react::Props::Shared props() noexcept override;
 
+  void handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept override;
   facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt) const noexcept override;
   winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept override;