diff --git a/example/src/constants/ExampleCardItems.ts b/example/src/constants/ExampleCardItems.ts index 3d12c37b..feeb8220 100644 --- a/example/src/constants/ExampleCardItems.ts +++ b/example/src/constants/ExampleCardItems.ts @@ -2,6 +2,7 @@ import { HomeScreen } from "../components/HomeScreen"; import { AppMetadataCard } from "../examples/AppMetadataCard"; import { ModalSheetViewTest01 } from "../examples/ModalSheetViewTest01"; +import { ModalSheetViewTest02 } from "../examples/ModalSheetViewTest02"; import type { ExampleItemProps } from "../examples/SharedExampleTypes"; import type { RouteEntry } from "./Routes"; @@ -48,6 +49,10 @@ export const EXAMPLE_ITEMS: Array = (() => { type: 'card', component: ModalSheetViewTest01, }, + { + type: 'card', + component: ModalSheetViewTest02, + }, ]; // if (SHARED_ENV.enableReactNavigation) { diff --git a/example/src/examples/ModalSheetViewTest02.tsx b/example/src/examples/ModalSheetViewTest02.tsx new file mode 100644 index 00000000..3e02db3d --- /dev/null +++ b/example/src/examples/ModalSheetViewTest02.tsx @@ -0,0 +1,163 @@ +/* eslint-disable react-hooks/exhaustive-deps */ +import * as React from 'react'; +import { StyleSheet } from 'react-native'; + +import { ExampleItemCard, ObjectPropertyDisplay, CardButton, Colors } from 'react-native-ios-utilities'; +import { ModalSheetView, ModalSheetViewContext, ModalSheetViewMainContent, useModalSheetViewEvents, type ModalSheetViewRef } from 'react-native-ios-modal'; + +import { LogListDisplay, type LogListDisplayRef } from '../components/LogListDisplay'; +import type { ExampleItemProps } from './SharedExampleTypes'; + + +function ModalContent(props: { + recursionLevel?: number +}){ + const nextModalRef = React.useRef(null); + const logListDisplayRef = React.useRef(null); + + const modalContext = React.useContext(ModalSheetViewContext); + const recursionLevel = props.recursionLevel ?? 0; + + useModalSheetViewEvents('onModalWillPresent', () => { + logListDisplayRef.current?.addItem('onModalWillPresent'); + }); + + useModalSheetViewEvents('onModalDidPresent', () => { + logListDisplayRef.current?.addItem('onModalDidPresent'); + }); + + useModalSheetViewEvents('onModalWillShow', () => { + logListDisplayRef.current?.addItem('onModalWillShow'); + }); + + useModalSheetViewEvents('onModalDidShow', () => { + logListDisplayRef.current?.addItem('onModalDidShow'); + }); + + useModalSheetViewEvents('onModalWillHide', () => { + logListDisplayRef.current?.addItem('onModalWillHide'); + }); + + useModalSheetViewEvents('onModalDidHide', () => { + logListDisplayRef.current?.addItem('onModalDidHide'); + }); + + useModalSheetViewEvents('onModalSheetStateWillChange', () => { + logListDisplayRef.current?.addItem('onModalSheetStateWillChange'); + }); + + useModalSheetViewEvents('onModalSheetStateDidChange', () => { + logListDisplayRef.current?.addItem('onModalSheetStateDidChange'); + }); + + return ( + + + + logListDisplayRef.current = ref} + /> + { + await nextModalRef.current?.presentModal(); + }} + /> + { + const prevModalRef = modalContext?.getModalSheetViewRef(); + + if(prevModalRef == null){ + return; + }; + + await prevModalRef.dismissModal(); + }} + /> + + nextModalRef.current = ref} + > + + + + ); +}; + +export function ModalSheetViewTest02(props: ExampleItemProps) { + const modalSheetViewRef = React.useRef(null); + + return ( + + { + await modalSheetViewRef.current?.presentModal(); + }} + /> + modalSheetViewRef.current = ref} + > + + + + ); +}; + +const styles = StyleSheet.create({ + debugDisplayInner: { + backgroundColor: `${Colors.PURPLE[200]}99`, + }, + modalContentContainer: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + paddingHorizontal: 12, + paddingVertical: 24, + }, + modalContentCard: { + alignSelf: 'stretch', + }, +}); \ No newline at end of file