-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Fabric] Get Modal to host RN components in new hwnd (#13500)
* save state * add example * build but blank page still :( * clean up comments * visuals show up in new hwnd! * clean up code * better naming and unfork Modal examples * testing save state * Make the RN island a Modal member var * Failed attempt at skipping root view in CEH, leaving it for learning purposes * you can click on UI! * clean up code * Change files * save state * remove hardcoded rootTag * add width/height to example * add test * revert simple.tsx * remove test * update snapshot * feedback part 1: make Modal a RootComponentView * feedback part2: simplify MountChildren * fix deleting modal * feedback round2 * remove comment * remove imports * feedback part 3 * fix overrides * add simple layout - still has issues with padding/flex * feedback part4 * lint * update overrides * Change files * feedback --------- Co-authored-by: Daniel Ayala <[email protected]>
- Loading branch information
1 parent
dc70ca2
commit 15e5afb
Showing
22 changed files
with
2,293 additions
and
174 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
change/@office-iss-react-native-win32-f99cfd3f-e8be-4146-8f14-07aca4f2c5b1.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "prerelease", | ||
| "comment": "adds default Modal", | ||
| "packageName": "@office-iss/react-native-win32", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch" | ||
| } |
7 changes: 7 additions & 0 deletions
7
change/react-native-windows-283ad80a-9f48-40a3-b7a3-227795b6f110.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "prerelease", | ||
| "comment": "adds default modal that hosts fabric components", | ||
| "packageName": "react-native-windows", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
149 changes: 149 additions & 0 deletions
149
packages/@react-native-windows/tester/src/js/examples/Modal/ModalOnShow.windows.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @flow strict-local | ||
| * @format | ||
| */ | ||
|
|
||
| import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; | ||
|
|
||
| import * as React from 'react'; | ||
| import {Modal, Pressable, StyleSheet, Text, View} from 'react-native'; | ||
|
|
||
| function ModalOnShowOnDismiss(): React.Node { | ||
| const [modalShowComponent, setModalShowComponent] = React.useState(true); | ||
| const [modalVisible, setModalVisible] = React.useState(false); | ||
| const [onShowCount, setOnShowCount] = React.useState(0); | ||
| const [onDismissCount, setOnDismissCount] = React.useState(0); | ||
|
|
||
| return ( | ||
| <View style={styles.container}> | ||
| {modalShowComponent && ( | ||
| <Modal | ||
| animationType="slide" | ||
| transparent={true} | ||
| visible={modalVisible} | ||
| onShow={() => { | ||
| setOnShowCount(onShowCount + 1); | ||
| }} | ||
| onDismiss={() => { | ||
| setOnDismissCount(onDismissCount + 1); | ||
| }} | ||
| onRequestClose={() => { | ||
| setModalVisible(false); | ||
| }}> | ||
| <View | ||
| style={[ | ||
| styles.centeredView, | ||
| styles.modalBackdrop, | ||
| styles.widthHeight, | ||
| ]}> | ||
| <View style={styles.modalView}> | ||
| <Text testID="modal-on-show-count"> | ||
| onShow is called {onShowCount} times | ||
| </Text> | ||
| <Text testID="modal-on-dismiss-count"> | ||
| onDismiss is called {onDismissCount} times | ||
| </Text> | ||
| <Pressable | ||
| style={[styles.button, styles.buttonClose]} | ||
| onPress={() => setModalVisible(false)}> | ||
| <Text testID="dismiss-modal" style={styles.textStyle}> | ||
| Hide modal by setting visible to false | ||
| </Text> | ||
| </Pressable> | ||
| <Pressable | ||
| style={[styles.button, styles.buttonClose]} | ||
| onPress={() => setModalShowComponent(false)}> | ||
| <Text | ||
| testID="dismiss-modal-by-removing-component" | ||
| style={styles.textStyle}> | ||
| Hide modal by removing component | ||
| </Text> | ||
| </Pressable> | ||
| </View> | ||
| </View> | ||
| </Modal> | ||
| )} | ||
| <Text testID="on-show-count">onShow is called {onShowCount} times</Text> | ||
| <Text testID="on-dismiss-count"> | ||
| onDismiss is called {onDismissCount} times | ||
| </Text> | ||
| <Pressable | ||
| style={[styles.button, styles.buttonOpen]} | ||
| onPress={() => { | ||
| setModalShowComponent(true); | ||
| setModalVisible(true); | ||
| }}> | ||
| <Text testID="open-modal" style={styles.textStyle}> | ||
| Show Modal | ||
| </Text> | ||
| </Pressable> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| paddingVertical: 30, | ||
| }, | ||
| centeredView: { | ||
| // flex: 1, [Windows] | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| }, | ||
| modalBackdrop: { | ||
| backgroundColor: 'rgba(0, 0, 0, 0.5)', | ||
| }, | ||
| modalView: { | ||
| margin: 20, | ||
| backgroundColor: 'white', | ||
| borderRadius: 20, | ||
| padding: 35, | ||
| alignItems: 'center', | ||
| shadowColor: '#000', | ||
| shadowOffset: { | ||
| width: 0, | ||
| height: 2, | ||
| }, | ||
| shadowOpacity: 0.25, | ||
| shadowRadius: 4, | ||
| elevation: 5, | ||
| }, | ||
| button: { | ||
| borderRadius: 20, | ||
| padding: 10, | ||
| marginVertical: 20, | ||
| elevation: 2, | ||
| }, | ||
| buttonOpen: { | ||
| backgroundColor: '#F194FF', | ||
| }, | ||
| buttonClose: { | ||
| backgroundColor: '#2196F3', | ||
| }, | ||
| textStyle: { | ||
| color: 'white', | ||
| fontWeight: 'bold', | ||
| textAlign: 'center', | ||
| }, | ||
| // [Windows | ||
| widthHeight: { | ||
| width: 300, | ||
| height: 400, | ||
| }, | ||
| // Windows] | ||
| }); | ||
|
|
||
| export default ({ | ||
| title: "Modal's onShow/onDismiss", | ||
| name: 'onShow', | ||
| description: | ||
| 'onShow and onDismiss (iOS only) callbacks are called when a modal is shown/dismissed', | ||
| render: (): React.Node => <ModalOnShowOnDismiss />, | ||
| }: RNTesterModuleExample); |
Oops, something went wrong.