Use scrollEnabled flag to enable/disable the ScrollView (#13427)

sharath2727 · web-flow · commit b36f585978e2 · 2024-07-11T16:00:04.000-07:00
* Fix scrollview

* Change files

* Address feedback

* Return false for scroll event handlers when scroll is disabled

* Update scrollbar color based on scrollEnabled

* Rename OnThemeChanged to UpdateColorForScrollBarRegions
diff --git a/change/react-native-windows-addbcde3-c802-4b1b-b6e6-970118e11819.json b/change/react-native-windows-addbcde3-c802-4b1b-b6e6-970118e11819.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix scrollview",
+  "packageName": "react-native-windows",
+  "email": "10109130+sharath2727@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/CompositionSwitcher.idl b/vnext/Microsoft.ReactNative/CompositionSwitcher.idl
@@ -106,6 +106,7 @@ namespace Microsoft.ReactNative.Composition.Experimental
   interface IScrollVisual requires IVisual
   {
     void Brush(IBrush brush);
+    void ScrollEnabled(Boolean isScrollEnabled);
     event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollPositionChanged;
     void ContentSize(Windows.Foundation.Numerics.Vector2 size);
     Windows.Foundation.Numerics.Vector3 ScrollPosition { get; };
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp
@@ -795,6 +795,16 @@ struct CompScrollerVisual : winrt::implements<
     m_visual.Brush(TTypeRedirects::CompositionContextHelper::InnerBrush(brush));
   }
 
+  void ScrollEnabled(bool isScrollEnabled) noexcept {
+    if (isScrollEnabled) {
+      m_visualInteractionSource.ManipulationRedirectionMode(
+          TTypeRedirects::VisualInteractionSourceRedirectionMode::CapableTouchpadAndPointerWheel);
+    } else {
+      m_visualInteractionSource.ManipulationRedirectionMode(
+          TTypeRedirects::VisualInteractionSourceRedirectionMode::Off);
+    }
+  }
+
   void Opacity(float opacity) noexcept {
     m_visual.Opacity(opacity);
   }
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp
@@ -65,13 +65,14 @@ struct ScrollBarComponent {
 
     updateShy(true);
     onScaleChanged();
-    OnThemeChanged();
+    UpdateColorForScrollBarRegions();
   }
 
-  void OnThemeChanged() noexcept {
+  void UpdateColorForScrollBarRegions() noexcept {
     updateHighlight(ScrollbarHitRegion::ArrowFirst);
     updateHighlight(ScrollbarHitRegion::ArrowLast);
     updateHighlight(ScrollbarHitRegion::Thumb);
+
     m_trackVisual.Brush(
         winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::Theme>(m_outer.Theme())
             ->InternalPlatformBrush(L"ScrollBarTrackFill"));
@@ -726,6 +727,14 @@ void ScrollViewComponentView::updateProps(
 
   // update BaseComponentView props
   base_type::updateProps(props, oldProps);
+
+  // Update the color only after updating the m_props in BaseComponentView
+  // to avoid scrollbarcomponents reading outdated scrollEnabled value.
+  if (!oldProps || oldViewProps.scrollEnabled != newViewProps.scrollEnabled) {
+    m_scrollVisual.ScrollEnabled(newViewProps.scrollEnabled);
+    m_horizontalScrollbarComponent->UpdateColorForScrollBarRegions();
+    m_verticalScrollbarComponent->UpdateColorForScrollBarRegions();
+  }
 }
 
 void ScrollViewComponentView::updateState(
@@ -825,8 +834,8 @@ void ScrollViewComponentView::OnPointerDown(const winrt::Windows::UI::Input::Poi
 
 void ScrollViewComponentView::onThemeChanged() noexcept {
   updateBackgroundColor(std::static_pointer_cast<const facebook::react::ScrollViewProps>(viewProps())->backgroundColor);
-  m_verticalScrollbarComponent->OnThemeChanged();
-  m_horizontalScrollbarComponent->OnThemeChanged();
+  m_verticalScrollbarComponent->UpdateColorForScrollBarRegions();
+  m_horizontalScrollbarComponent->UpdateColorForScrollBarRegions();
   Super::onThemeChanged();
 }
 
@@ -919,6 +928,10 @@ void ScrollViewComponentView::OnKeyDown(
 }
 
 bool ScrollViewComponentView::scrollToEnd(bool animate) noexcept {
+  if (!std::static_pointer_cast<const facebook::react::ScrollViewProps>(viewProps())->scrollEnabled) {
+    return false;
+  }
+
   if ((((m_contentSize.height - m_layoutMetrics.frame.size.height) * m_layoutMetrics.pointScaleFactor) -
        m_scrollVisual.ScrollPosition().y) < 1.0f) {
     return false;
@@ -931,6 +944,10 @@ bool ScrollViewComponentView::scrollToEnd(bool animate) noexcept {
 }
 
 bool ScrollViewComponentView::scrollToStart(bool animate) noexcept {
+  if (!std::static_pointer_cast<const facebook::react::ScrollViewProps>(viewProps())->scrollEnabled) {
+    return false;
+  }
+
   m_scrollVisual.TryUpdatePosition({0.0f, 0.0f, 0.0f}, animate);
   return true;
 }
@@ -960,6 +977,10 @@ bool ScrollViewComponentView::lineRight(bool animate) noexcept {
 }
 
 bool ScrollViewComponentView::scrollDown(float delta, bool animate) noexcept {
+  if (!std::static_pointer_cast<const facebook::react::ScrollViewProps>(viewProps())->scrollEnabled) {
+    return false;
+  }
+
   if (((m_contentSize.height - m_layoutMetrics.frame.size.height) * m_layoutMetrics.pointScaleFactor) -
           m_scrollVisual.ScrollPosition().y <
       1.0f) {
@@ -971,6 +992,10 @@ bool ScrollViewComponentView::scrollDown(float delta, bool animate) noexcept {
 }
 
 bool ScrollViewComponentView::scrollUp(float delta, bool animate) noexcept {
+  if (!std::static_pointer_cast<const facebook::react::ScrollViewProps>(viewProps())->scrollEnabled) {
+    return false;
+  }
+
   if (m_scrollVisual.ScrollPosition().y <= 0.0f) {
     return false;
   }
@@ -980,6 +1005,10 @@ bool ScrollViewComponentView::scrollUp(float delta, bool animate) noexcept {
 }
 
 bool ScrollViewComponentView::scrollLeft(float delta, bool animate) noexcept {
+  if (!std::static_pointer_cast<const facebook::react::ScrollViewProps>(viewProps())->scrollEnabled) {
+    return false;
+  }
+
   if (m_scrollVisual.ScrollPosition().x <= 0.0f) {
     return false;
   }
@@ -989,6 +1018,10 @@ bool ScrollViewComponentView::scrollLeft(float delta, bool animate) noexcept {
 }
 
 bool ScrollViewComponentView::scrollRight(float delta, bool animate) noexcept {
+  if (!std::static_pointer_cast<const facebook::react::ScrollViewProps>(viewProps())->scrollEnabled) {
+    return false;
+  }
+
   if (((m_contentSize.width - m_layoutMetrics.frame.size.width) * m_layoutMetrics.pointScaleFactor) -
           m_scrollVisual.ScrollPosition().x <
       1.0f) {
@@ -1025,6 +1058,10 @@ void ScrollViewComponentView::HandleCommand(
 }
 
 void ScrollViewComponentView::scrollTo(winrt::Windows::Foundation::Numerics::float3 offset, bool animate) noexcept {
+  if (!std::static_pointer_cast<const facebook::react::ScrollViewProps>(viewProps())->scrollEnabled) {
+    return;
+  }
+
   m_scrollVisual.TryUpdatePosition(offset, animate);
 }
 
@@ -1097,7 +1134,7 @@ void ScrollViewComponentView::StartBringIntoView(
     scrollToHorizontal = options.TargetRect->getMidX() - (viewerWidth * options.HorizontalAlignmentRatio);
   }
 
-  if (needsScroll) {
+  if (needsScroll && std::static_pointer_cast<const facebook::react::ScrollViewProps>(viewProps())->scrollEnabled) {
     m_scrollVisual.TryUpdatePosition(
         {static_cast<float>(scrollToHorizontal), static_cast<float>(scrollToVertical), 0.0f}, options.AnimationDesired);
   }
diff --git a/vnext/Microsoft.ReactNative/packages.lock.json b/vnext/Microsoft.ReactNative/packages.lock.json
@@ -14,6 +14,16 @@
         "resolved": "0.1.21",
         "contentHash": "5njCh+3eXTLOv7+8nOnp6nJ5C0r6it5ze54c0nuWleeDptuK8t3dEDB79XTU4D5DKNvAPlqJpgXRDOak5nYIug=="
       },
+      "Microsoft.SourceLink.GitHub": {
+        "type": "Direct",
+        "requested": "[1.1.1, )",
+        "resolved": "1.1.1",
+        "contentHash": "IaJGnOv/M7UQjRJks7B6p7pbPnOwisYGOIzqCz5ilGFTApZ3ktOR+6zJ12ZRPInulBmdAf1SrGdDG2MU8g6XTw==",
+        "dependencies": {
+          "Microsoft.Build.Tasks.Git": "1.1.1",
+          "Microsoft.SourceLink.Common": "1.1.1"
+        }
+      },
       "Microsoft.Windows.CppWinRT": {
         "type": "Direct",
         "requested": "[2.0.230706.1, )",
@@ -29,6 +39,16 @@
           "Microsoft.Windows.SDK.BuildTools": "10.0.22621.756"
         }
       },
+      "Microsoft.Build.Tasks.Git": {
+        "type": "Transitive",
+        "resolved": "1.1.1",
+        "contentHash": "AT3HlgTjsqHnWpBHSNeR0KxbLZD7bztlZVj7I8vgeYG9SYqbeFGh0TM/KVtC6fg53nrWHl3VfZFvb5BiQFcY6Q=="
+      },
+      "Microsoft.SourceLink.Common": {
+        "type": "Transitive",
+        "resolved": "1.1.1",
+        "contentHash": "WMcGpWKrmJmzrNeuaEb23bEMnbtR/vLmvZtkAP5qWu7vQsY59GqfRJd65sFpBszbd2k/bQ8cs8eWawQKAabkVg=="
+      },
       "Microsoft.Windows.SDK.BuildTools": {
         "type": "Transitive",
         "resolved": "10.0.22621.756",

Original file line number	Diff line number	Diff line change
`@@ -106,6 +106,7 @@ namespace Microsoft.ReactNative.Composition.Experimental`
`106`	`106`	`interface IScrollVisual requires IVisual`
`107`	`107`	`{`
`108`	`108`	`void Brush(IBrush brush);`
	`109`	`+ void ScrollEnabled(Boolean isScrollEnabled);`
`109`	`110`	`event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollPositionChanged;`
`110`	`111`	`void ContentSize(Windows.Foundation.Numerics.Vector2 size);`
`111`	`112`	`Windows.Foundation.Numerics.Vector3 ScrollPosition { get; };`