diff --git a/example/src/examples/ModalSheetViewTest02.tsx b/example/src/examples/ModalSheetViewTest02.tsx index 66e8458..d0e07f9 100644 --- a/example/src/examples/ModalSheetViewTest02.tsx +++ b/example/src/examples/ModalSheetViewTest02.tsx @@ -3,63 +3,36 @@ 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 { ModalSheetView, ModalSheetViewContext, ModalSheetViewMainContent, useModalSheetViewEvents, type ModalSheetViewRef, type OnModalFocusChangeEventPayload } from 'react-native-ios-modal'; -import { LogListDisplay, type LogListDisplayRef } from '../components/LogListDisplay'; import type { ExampleItemProps } from './SharedExampleTypes'; +import type { OnModalSheetStateWillChangeEventPayload } from '../../../src/native_components/RNIModalSheetVIew'; function ModalContent(props: { recursionLevel?: number }){ const nextModalRef = React.useRef(null); - const logListDisplayRef = React.useRef(null); + + const [ + onModalSheetStateWillChangeEventPayload, + setOModalSheetStateWillChangeEventPayload, + ] = React.useState(null); + + const [ + focusChangeEventPayload, + setFocusChangeEventPayload + ] = React.useState(null); const modalContext = React.useContext(ModalSheetViewContext); const recursionLevel = props.recursionLevel ?? 0; - - useModalSheetViewEvents('onModalWillPresent', () => { - logListDisplayRef.current?.addItem('onModalWillPresent'); - }); - - useModalSheetViewEvents('onModalDidPresent', () => { - logListDisplayRef.current?.addItem('onModalDidPresent'); + + useModalSheetViewEvents('onModalFocusChange', (eventPayload) => { + setFocusChangeEventPayload(eventPayload); }); - useModalSheetViewEvents('onModalWillDismiss', () => { - logListDisplayRef.current?.addItem('onModalWillDismiss'); - }); - - useModalSheetViewEvents('onModalDidDismiss', () => { - logListDisplayRef.current?.addItem('onModalDidDismiss'); - }); - - 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('onModalFocusChange', () => { - logListDisplayRef.current?.addItem('onModalFocusChange'); - }); - - useModalSheetViewEvents('onModalSheetStateWillChange', () => { - logListDisplayRef.current?.addItem('onModalSheetStateWillChange'); - }); - - useModalSheetViewEvents('onModalSheetStateDidChange', () => { - logListDisplayRef.current?.addItem('onModalSheetStateDidChange'); + useModalSheetViewEvents('onModalSheetStateWillChange', (eventPayload) => { + setOModalSheetStateWillChangeEventPayload(eventPayload); }); return ( @@ -75,6 +48,9 @@ function ModalContent(props: { - logListDisplayRef.current = ref} + (null); - return (