[Fabric] Implement onDismiss for Modal and remove titlebar (#14126)

TatianaKapos · web-flow · commit d7b4b485f7b2 · 2024-12-03T16:54:15.000-08:00
* add onDismiss event

* remove title bar

* Change files

* fix lint and snapshots

* add option for titlebar

* upgrade override
diff --git a/change/react-native-windows-31db428a-029b-4735-94f6-2c4368b9bda6.json b/change/react-native-windows-31db428a-029b-4735-94f6-2c4368b9bda6.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "implement onDismiss and remove titlebar from Modal",
+  "packageName": "react-native-windows",
+  "email": "tatianakapos@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/@react-native-windows/tester/src/js/examples/Modal/ModalPresentation.windows.js b/packages/@react-native-windows/tester/src/js/examples/Modal/ModalPresentation.windows.js
@@ -214,7 +214,7 @@ function ModalPresentation() {
             key="onDismiss"
             style={styles.option}
             label="onDismiss ⚫️"
-            disabled={Platform.OS !== 'ios'}
+            disabled={Platform.OS !== 'ios' && Platform.OS !== 'windows'}
             onPress={() =>
               setProps(prev => ({
                 ...prev,
diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap b/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap
@@ -30019,14 +30019,7 @@ exports[`snapshotAllPages Modal 1`] = `
               },
               null,
               null,
-              [
-                {
-                  "borderWidth": 0,
-                },
-                {
-                  "backgroundColor": "#7676801e",
-                },
-              ],
+              null,
               {
                 "marginRight": 8,
                 "marginTop": 6,
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp
@@ -34,6 +34,11 @@ WindowsModalHostComponentView::WindowsModalHostComponentView(
     : Super(compContext, tag, reactContext) {}
 
 WindowsModalHostComponentView::~WindowsModalHostComponentView() {
+  // dispatch onDismiss event
+  auto emitter = std::static_pointer_cast<const facebook::react::ModalHostViewEventEmitter>(m_eventEmitter);
+  facebook::react::ModalHostViewEventEmitter::OnDismiss onDismissArgs;
+  emitter->onDismiss(onDismissArgs);
+
   // reset the topWindowID
   if (m_prevWindowID) {
     auto host =
@@ -92,10 +97,12 @@ void WindowsModalHostComponentView::EnsureModalCreated() {
 
   m_parentHwnd = GetHwndForParenting();
 
+  auto windowsStyle = m_showTitleBar ? WS_OVERLAPPEDWINDOW : WS_POPUP;
+
   m_hwnd = CreateWindow(
       c_modalWindowClassName,
       L"React-Native Modal",
-      WS_OVERLAPPEDWINDOW,
+      windowsStyle,
       CW_USEDEFAULT,
       CW_USEDEFAULT,
       MODAL_MIN_WIDTH,
@@ -170,6 +177,11 @@ void WindowsModalHostComponentView::HideOnUIThread() noexcept {
     SendMessage(m_hwnd, WM_CLOSE, 0, 0);
   }
 
+  // dispatch onDismiss event
+  auto emitter = std::static_pointer_cast<const facebook::react::ModalHostViewEventEmitter>(m_eventEmitter);
+  facebook::react::ModalHostViewEventEmitter::OnDismiss onDismissArgs;
+  emitter->onDismiss(onDismissArgs);
+
   // enable input to parent
   EnableWindow(m_parentHwnd, true);
 
@@ -298,7 +310,10 @@ void WindowsModalHostComponentView::AdjustWindowSize() noexcept {
   RECT rc;
   GetClientRect(m_hwnd, &rc);
   RECT rect = {0, 0, (int)xPos, (int)yPos};
-  AdjustWindowRect(&rect, WS_OVERLAPPEDWINDOW, FALSE); // Adjust for title bar and borders
+
+  if (m_showTitleBar) {
+    AdjustWindowRect(&rect, WS_OVERLAPPEDWINDOW, FALSE); // Adjust for title bar and borders
+  }
 
   // set the layoutMetrics
   m_layoutMetrics.frame.size = {(float)rect.right - rect.left, (float)rect.bottom - rect.top};
@@ -326,6 +341,9 @@ void WindowsModalHostComponentView::updateProps(
       *std::static_pointer_cast<const facebook::react::ModalHostViewProps>(oldProps ? oldProps : viewProps());
   const auto &newModalProps = *std::static_pointer_cast<const facebook::react::ModalHostViewProps>(props);
   newModalProps.visible ? m_isVisible = true : m_isVisible = false;
+  if (!m_isVisible) {
+    HideOnUIThread();
+  }
   base_type::updateProps(props, oldProps);
 }
 
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.h
@@ -64,6 +64,7 @@ struct WindowsModalHostComponentView
   HWND m_hwnd{nullptr};
   uint64_t m_prevWindowID;
   bool m_isVisible{false};
+  bool m_showTitleBar{false};
   winrt::Microsoft::ReactNative::ReactNativeIsland m_reactNativeIsland;
 };
 
diff --git a/vnext/overrides.json b/vnext/overrides.json
@@ -482,6 +482,12 @@
       "baseFile": "packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js",
       "baseHash": "663d3325298404d7c012a6aa53e833eb5fc2ec76"
     },
+    {
+      "type": "derived",
+      "file": "src-win/Libraries/Modal/Modal.windows.js",
+      "baseFile": "packages/react-native/Libraries/Modal/Modal.js",
+      "baseHash": "ab5b48312e287809327d494e7a9542f2f178d94b"
+    },
     {
       "type": "derived",
       "file": "src-win/Libraries/NativeComponent/BaseViewConfig.windows.js",
diff --git a/vnext/src-win/Libraries/Modal/Modal.windows.js b/vnext/src-win/Libraries/Modal/Modal.windows.js
