Adds shouldConstrainToRootBounds prop to Flyout (microsoft#8414)

* Adds shouldConstrainToRootBounds prop to Flyout Adds the ability to set the `FlyoutBase::ShouldConstrainToRootBounds` property in the `FlyoutViewManager`. Co-authored-by: Liron Yahdav <[email protected]> * Change files Co-authored-by: Liron Yahdav <[email protected]>
chrisglein · Sep 22, 2021 · 032901d · 032901d
1 parent a683c2f
commit 032901d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/change/react-native-windows-926ba5d6-6de7-4b3a-82ff-44117751b1ba.json b/change/react-native-windows-926ba5d6-6de7-4b3a-82ff-44117751b1ba.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Adds shouldConstrainToRootBounds prop to Flyout",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Views/FlyoutViewManager.cpp b/vnext/Microsoft.ReactNative/Views/FlyoutViewManager.cpp
@@ -352,6 +352,10 @@ void FlyoutShadowNode::updateProperties(winrt::Microsoft::ReactNative::JSValueOb
       if (m_isFlyoutShowOptionsSupported) {
         m_showOptions.ShowMode(showMode);
       }
+    } else if (propertyName == "shouldConstrainToRootBounds") {
+      if (propertyValue.Type() == React::JSValueType::Boolean) {
+        m_flyout.ShouldConstrainToRootBounds(propertyValue.AsBoolean());
+      }
     }
   }
 
@@ -478,6 +482,7 @@ void FlyoutViewManager::GetNativeProps(const winrt::Microsoft::ReactNative::IJSV
   React::WriteProperty(writer, L"verticalOffset", L"number");
   React::WriteProperty(writer, L"isOverlayEnabled", L"boolean");
   React::WriteProperty(writer, L"showMode", L"string");
+  React::WriteProperty(writer, L"shouldConstrainToRootBounds", L"boolean");
 }
 
 void FlyoutViewManager::GetExportedCustomDirectEventTypeConstants(

diff --git a/vnext/src/Libraries/Components/Flyout/FlyoutProps.ts b/vnext/src/Libraries/Components/Flyout/FlyoutProps.ts
@@ -30,6 +30,7 @@ export type ShowMode =
 export interface IFlyoutProps extends ViewProps {
   horizontalOffset?: number;
   isLightDismissEnabled?: boolean;
+  shouldConstrainToRootBounds?: boolean;
 
   /**
    * Specifies whether the area outside the flyout is darkened