Skip to content

Commit 9195592

Browse files
Yajur-Groveracoates-msTatianaKapos
authored
[0.78] Backport fixes for Modal (#14500)
* Allow portals to have independent layout constraints and scale factor (#14315) * Allow portals to have independent layout constraints and scale factor * format * change files * fix * Change files * [Fabric] Fix modal height (#14343) * fix modal height * Change files * reverse change * add override * remove old change file * fix formatting * [Fabric] Use PopupWindowSiteBridge for Modal when USE_EXPERIMENTAL_WINUI3 is true (#14284) * add modal implementation with PopupWindowSiteBridge * Change files * add conditional * feedback * remove old change file --------- Co-authored-by: Andrew Coates <[email protected]> Co-authored-by: Tatiana Kapos <[email protected]>
1 parent 4541729 commit 9195592

35 files changed

+719
-262
lines changed

‎change/@react-native-windows-codegen-e7b6a9a3-a6de-499d-95bb-1510e5009dd2.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Fix UpdateState on generated base class",
4+
"packageName": "@react-native-windows/codegen",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎change/react-native-windows-7dda9927-204c-4610-a14f-f5aa37558a62.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "Allow portals to have independent layout constraints and scale factor (#14315)",
4+
"packageName": "react-native-windows",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎packages/@react-native-windows/codegen/src/generators/GenerateComponentWindows.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ void Register::_COMPONENT_NAME_::NativeComponent(
200200
builder.SetUpdateStateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
201201
const winrt::Microsoft::ReactNative::IComponentState &newState) noexcept {
202202
auto userData = view.UserData().as<TUserData>();
203-
userData->member(view, newState);
203+
userData->UpdateState(view, newState);
204204
});
205205
}
206206

‎packages/@react-native-windows/tester/overrides.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,12 @@
4141
"baseHash": "e840e1c091d2644d0a682b8baffad3b3dda2b207",
4242
"issue": 12869
4343
},
44+
{
45+
"type": "patch",
46+
"file": "src/js/examples/Modal/ModalOnShow.windows.js",
47+
"baseFile": "packages/rn-tester/js/examples/Modal/ModalOnShow.js",
48+
"baseHash": "911507abcf9172b5fdd1bb68faaf02562df704d4"
49+
},
4450
{
4551
"type": "patch",
4652
"file": "src/js/examples/Modal/ModalPresentation.windows.js",

‎packages/@react-native-windows/tester/src/js/examples/Modal/ModalOnShow.windows.js‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow strict-local
8+
* @format
9+
*/
10+
11+
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
12+
13+
import RNTesterText from '../../components/RNTesterText';
14+
import * as React from 'react';
15+
import {useState} from 'react';
16+
import {Modal, Pressable, StyleSheet, Text, View} from 'react-native';
17+
18+
function ModalOnShowOnDismiss(): React.Node {
19+
const [modalShowComponent, setModalShowComponent] = useState(true);
20+
const [modalVisible, setModalVisible] = useState(false);
21+
const [onShowCount, setOnShowCount] = useState(0);
22+
const [onDismissCount, setOnDismissCount] = useState(0);
23+
24+
return (
25+
<View style={styles.container}>
26+
{modalShowComponent && (
27+
<Modal
28+
animationType="slide"
29+
transparent={true}
30+
visible={modalVisible}
31+
onShow={() => {
32+
setOnShowCount(showCount => showCount + 1);
33+
}}
34+
onDismiss={() => {
35+
setOnDismissCount(dismissCount => dismissCount + 1);
36+
}}
37+
onRequestClose={() => {
38+
setModalVisible(false);
39+
}}>
40+
<View style={[styles.centeredView, styles.modalBackdrop]}>
41+
<View style={styles.modalView}>
42+
<Text testID="modal-on-show-count">
43+
onShow is called {onShowCount} times
44+
</Text>
45+
<Text testID="modal-on-dismiss-count">
46+
onDismiss is called {onDismissCount} times
47+
</Text>
48+
<Pressable
49+
style={[styles.button, styles.buttonClose]}
50+
onPress={() => setModalVisible(false)}>
51+
<Text testID="dismiss-modal" style={styles.textStyle}>
52+
Hide modal by setting visible to false
53+
</Text>
54+
</Pressable>
55+
<Pressable
56+
style={[styles.button, styles.buttonClose]}
57+
onPress={() => setModalShowComponent(false)}>
58+
<Text
59+
testID="dismiss-modal-by-removing-component"
60+
style={styles.textStyle}>
61+
Hide modal by removing component
62+
</Text>
63+
</Pressable>
64+
</View>
65+
</View>
66+
</Modal>
67+
)}
68+
<RNTesterText testID="on-show-count">
69+
onShow is called {onShowCount} times
70+
</RNTesterText>
71+
<RNTesterText testID="on-dismiss-count">
72+
onDismiss is called {onDismissCount} times
73+
</RNTesterText>
74+
<Pressable
75+
style={[styles.button, styles.buttonOpen]}
76+
onPress={() => {
77+
setModalShowComponent(true);
78+
setModalVisible(true);
79+
}}>
80+
<Text testID="open-modal" style={styles.textStyle}>
81+
Show Modal
82+
</Text>
83+
</Pressable>
84+
</View>
85+
);
86+
}
87+
88+
const styles = StyleSheet.create({
89+
container: {
90+
display: 'flex',
91+
alignItems: 'center',
92+
paddingVertical: 30,
93+
},
94+
centeredView: {
95+
// flex: 1, // [Windows] - This will cause the modal to stretch to be as tall as the availiable space given to it.
96+
justifyContent: 'center',
97+
alignItems: 'center',
98+
},
99+
modalBackdrop: {
100+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
101+
},
102+
modalView: {
103+
margin: 20,
104+
borderRadius: 20,
105+
padding: 35,
106+
alignItems: 'center',
107+
shadowColor: '#000',
108+
shadowOffset: {
109+
width: 0,
110+
height: 2,
111+
},
112+
shadowOpacity: 0.25,
113+
shadowRadius: 4,
114+
elevation: 5,
115+
},
116+
button: {
117+
borderRadius: 20,
118+
padding: 10,
119+
marginVertical: 20,
120+
elevation: 2,
121+
},
122+
buttonOpen: {
123+
backgroundColor: '#F194FF',
124+
},
125+
buttonClose: {
126+
backgroundColor: '#2196F3',
127+
},
128+
textStyle: {
129+
color: 'white',
130+
fontWeight: 'bold',
131+
textAlign: 'center',
132+
},
133+
});
134+
135+
export default ({
136+
title: "Modal's onShow/onDismiss",
137+
name: 'onShow',
138+
description:
139+
'onShow and onDismiss (iOS only) callbacks are called when a modal is shown/dismissed',
140+
render: (): React.Node => <ModalOnShowOnDismiss />,
141+
}: RNTesterModuleExample);

‎packages/@react-native-windows/tester/src/js/examples/Modal/ModalPresentation.windows.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -348,7 +348,7 @@ const styles = StyleSheet.create({
348348
marginTop: 6,
349349
},
350350
modalContainer: {
351-
flex: 1,
351+
//flex: 1, // [Windows] - This will cause the modal to stretch to be as tall as the availiable space given to it.
352352
justifyContent: 'center',
353353
padding: 20,
354354
},

‎packages/sample-custom-component/windows/SampleCustomComponent/codegen/react/components/SampleCustomComponent/CalendarView.g.h‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ void RegisterCalendarViewNativeComponent(
170170
builder.SetUpdateStateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
171171
const winrt::Microsoft::ReactNative::IComponentState &newState) noexcept {
172172
auto userData = view.UserData().as<TUserData>();
173-
userData->member(view, newState);
173+
userData->UpdateState(view, newState);
174174
});
175175
}
176176

‎packages/sample-custom-component/windows/SampleCustomComponent/codegen/react/components/SampleCustomComponent/DrawingIsland.g.h‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ void RegisterDrawingIslandNativeComponent(
150150
builder.SetUpdateStateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
151151
const winrt::Microsoft::ReactNative::IComponentState &newState) noexcept {
152152
auto userData = view.UserData().as<TUserData>();
153-
userData->member(view, newState);
153+
userData->UpdateState(view, newState);
154154
});
155155
}
156156

‎packages/sample-custom-component/windows/SampleCustomComponent/codegen/react/components/SampleCustomComponent/MovingLight.g.h‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ void RegisterMovingLightNativeComponent(
203203
builder.SetUpdateStateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
204204
const winrt::Microsoft::ReactNative::IComponentState &newState) noexcept {
205205
auto userData = view.UserData().as<TUserData>();
206-
userData->member(view, newState);
206+
userData->UpdateState(view, newState);
207207
});
208208
}
209209

‎vnext/Microsoft.ReactNative/Fabric/AbiPortalShadowNode.cpp‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT License.
3+
4+
#include "AbiPortalShadowNode.h"
5+
6+
#include <Fabric/Composition/ReactCompositionViewComponentBuilder.h>
7+
#include <react/debug/react_native_assert.h>
8+
#include <react/renderer/core/LayoutConstraints.h>
9+
#include <react/renderer/core/LayoutContext.h>
10+
#include <react/renderer/core/conversions.h>
11+
12+
#include <utility>
13+
14+
namespace Microsoft::ReactNative {
15+
16+
extern const char AbiPortalComponentName[] = "AbiPortal";
17+
18+
facebook::react::Size AbiPortalShadowNode::measureContent(
19+
const facebook::react::LayoutContext &layoutContext,
20+
const facebook::react::LayoutConstraints &layoutConstraints) const {
21+
return {0, 0}; // The portal placeholder node shouldn't take up any space
22+
}
23+
24+
void AbiPortalShadowNode::layout(facebook::react::LayoutContext layoutContext) {
25+
ensureUnsealed();
26+
auto layoutMetrics = getLayoutMetrics();
27+
28+
auto portalOwningShadowNode = ShadowNode::Unshared{};
29+
30+
if (getChildren().empty()) {
31+
return;
32+
}
33+
34+
// A Portal should only have a single child
35+
react_native_assert(getChildren().size() == 1);
36+
37+
const auto &childNode = getChildren()[0];
38+
39+
auto clonedShadowNode = ShadowNode::Unshared{};
40+
41+
portalOwningShadowNode = cloneTree(childNode->getFamily(), [&](const ShadowNode &oldShadowNode) {
42+
clonedShadowNode = oldShadowNode.clone({});
43+
return clonedShadowNode;
44+
});
45+
auto portalShadowNode = static_cast<AbiPortalShadowNode *>(portalOwningShadowNode.get());
46+
47+
auto &layoutableShadowNode = dynamic_cast<LayoutableShadowNode &>(*clonedShadowNode);
48+
49+
auto &state = getStateData();
50+
51+
facebook::react::LayoutConstraints layoutConstraints;
52+
layoutConstraints.layoutDirection = layoutMetrics.layoutDirection;
53+
54+
if (state.userdata) {
55+
// If the portal component set a state of type IPortalStateData,
56+
// extract constraint information from it, and use that for layout
57+
if (auto portalState = state.userdata.try_as<winrt::Microsoft::ReactNative::Composition::IPortalStateData>()) {
58+
auto stateConstraints = portalState.LayoutConstraints();
59+
60+
layoutConstraints.minimumSize = {stateConstraints.MinimumSize.Width, stateConstraints.MinimumSize.Height};
61+
layoutConstraints.maximumSize = {stateConstraints.MaximumSize.Width, stateConstraints.MaximumSize.Height};
62+
if (stateConstraints.LayoutDirection == winrt::Microsoft::ReactNative::LayoutDirection::LeftToRight) {
63+
layoutConstraints.layoutDirection = facebook::react::LayoutDirection::LeftToRight;
64+
} else if (stateConstraints.LayoutDirection == winrt::Microsoft::ReactNative::LayoutDirection::RightToLeft) {
65+
layoutConstraints.layoutDirection = facebook::react::LayoutDirection::RightToLeft;
66+
}
67+
}
68+
}
69+
70+
// Laying out the `ShadowNode` and the subtree starting from it.
71+
layoutableShadowNode.layoutTree(layoutContext, layoutConstraints);
72+
73+
auto childLayoutMetrics = layoutableShadowNode.getLayoutMetrics();
74+
childLayoutMetrics.frame.origin = {0, 0};
75+
layoutableShadowNode.setLayoutMetrics(childLayoutMetrics);
76+
77+
// Update the list of children to reflect the changes that we made.
78+
this->children_ = static_cast<AbiPortalShadowNode *>(portalOwningShadowNode.get())->children_;
79+
}
80+
81+
void AbiPortalShadowNode::Builder(winrt::Microsoft::ReactNative::IReactViewComponentBuilder builder) noexcept {
82+
m_builder = builder;
83+
}
84+
85+
winrt::Microsoft::ReactNative::IReactViewComponentBuilder AbiPortalShadowNode::Builder() const noexcept {
86+
return m_builder;
87+
}
88+
89+
void AbiPortalShadowNode::Proxy(winrt::Microsoft::ReactNative::ShadowNode proxy) noexcept {
90+
m_proxy = proxy;
91+
}
92+
93+
winrt::Microsoft::ReactNative::ShadowNode AbiPortalShadowNode::Proxy() const noexcept {
94+
return m_proxy;
95+
}
96+
97+
} // namespace Microsoft::ReactNative

0 commit comments

Comments
 (0)