From a05400ffdefcd4aff786deff6bf3b5a6b99b9479 Mon Sep 17 00:00:00 2001
From: Dominic Go <dominic@dominicgo.dev>
Date: Wed, 2 Oct 2024 14:20:23 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AB=20Update:=20Ex=20-=20`ModalSheetVi?=
 =?UTF-8?q?ewTest03`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/constants/ExampleCardItems.ts     |   5 +
 example/src/examples/ModalSheetViewTest03.tsx | 157 ++++++++++++++++++
 2 files changed, 162 insertions(+)
 create mode 100644 example/src/examples/ModalSheetViewTest03.tsx

diff --git a/example/src/constants/ExampleCardItems.ts b/example/src/constants/ExampleCardItems.ts
index feeb8220..ee0e4104 100644
--- a/example/src/constants/ExampleCardItems.ts
+++ b/example/src/constants/ExampleCardItems.ts
@@ -3,6 +3,7 @@ import { AppMetadataCard } from "../examples/AppMetadataCard";
 
 import { ModalSheetViewTest01 } from "../examples/ModalSheetViewTest01";
 import { ModalSheetViewTest02 } from "../examples/ModalSheetViewTest02";
+import { ModalSheetViewTest03 } from "../examples/ModalSheetViewTest03";
 
 import type { ExampleItemProps } from "../examples/SharedExampleTypes";
 import type { RouteEntry } from "./Routes";
@@ -53,6 +54,10 @@ export const EXAMPLE_ITEMS: Array<ExampleItem> = (() => {
       type: 'card',
       component: ModalSheetViewTest02,
     },
+    {
+      type: 'card',
+      component: ModalSheetViewTest03,
+    },
   ]; 
 
   // if (SHARED_ENV.enableReactNavigation) {
diff --git a/example/src/examples/ModalSheetViewTest03.tsx b/example/src/examples/ModalSheetViewTest03.tsx
new file mode 100644
index 00000000..de4b511e
--- /dev/null
+++ b/example/src/examples/ModalSheetViewTest03.tsx
@@ -0,0 +1,157 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { ExampleItemCard, 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<ModalSheetViewRef | null>(null);
+  const presentationEventsLogListDisplayRef = React.useRef<LogListDisplayRef | null>(null);
+  const focusStateLogListDisplayRef = React.useRef<LogListDisplayRef | null>(null);
+
+  const modalContext = React.useContext(ModalSheetViewContext);
+  const recursionLevel = props.recursionLevel ?? 0;
+
+  useModalSheetViewEvents('onModalWillPresent', () => {
+    presentationEventsLogListDisplayRef.current?.addItem('onModalWillPresent');
+  });
+
+  useModalSheetViewEvents('onModalDidPresent', () => {
+    presentationEventsLogListDisplayRef.current?.addItem('onModalDidPresent');
+  });
+
+  useModalSheetViewEvents('onModalWillDismiss', () => {
+    presentationEventsLogListDisplayRef.current?.addItem('onModalWillDismiss');
+  });
+
+  useModalSheetViewEvents('onModalDidDismiss', () => {
+    presentationEventsLogListDisplayRef.current?.addItem('onModalDidDismiss');
+  });
+
+  useModalSheetViewEvents('onModalWillShow', () => {
+    presentationEventsLogListDisplayRef.current?.addItem('onModalWillShow');
+  });
+
+  useModalSheetViewEvents('onModalDidShow', () => {
+    presentationEventsLogListDisplayRef.current?.addItem('onModalDidShow');
+  });
+
+  useModalSheetViewEvents('onModalWillHide', () => {
+    presentationEventsLogListDisplayRef.current?.addItem('onModalWillHide');
+  });
+
+  useModalSheetViewEvents('onModalDidHide', () => {
+    presentationEventsLogListDisplayRef.current?.addItem('onModalDidHide');
+  });
+
+  useModalSheetViewEvents('onModalFocusChange', (eventPayload) => {
+    presentationEventsLogListDisplayRef.current?.addItem('onModalFocusChange');
+    focusStateLogListDisplayRef.current?.addItem(eventPayload.nextState);
+  });
+
+  useModalSheetViewEvents('onModalSheetStateWillChange', () => {
+    presentationEventsLogListDisplayRef.current?.addItem('onModalSheetStateWillChange');
+  });
+
+  useModalSheetViewEvents('onModalSheetStateDidChange', () => {
+    presentationEventsLogListDisplayRef.current?.addItem('onModalSheetStateDidChange');
+  });
+
+  return (
+    <ModalSheetViewMainContent
+      // temp fix
+      {...{...props}}
+      contentContainerStyle={styles.modalContentContainer}
+    >
+    <ExampleItemCard
+      style={styles.modalContentCard}
+      title={`Modal #${recursionLevel}`}
+    >
+      <LogListDisplay
+        ref={ref => presentationEventsLogListDisplayRef.current = ref}
+      />
+      <LogListDisplay
+        ref={ref => focusStateLogListDisplayRef.current = ref}
+      />
+      <CardButton
+        title={'Present Sheet Modal'}
+        subtitle={'Present content as sheet'}
+        onPress={async () => {
+          await nextModalRef.current?.presentModal();
+        }}
+      />
+      <CardButton
+        title={'Dismiss Modal'}
+        subtitle={'Dismiss current modal'}
+        onPress={async () => {
+          const prevModalRef = modalContext?.getModalSheetViewRef();
+          
+          if(prevModalRef == null){
+            return;
+          };
+
+          await prevModalRef.dismissModal();
+        }}
+      />
+    </ExampleItemCard>
+    <ModalSheetView
+      ref={ref => nextModalRef.current = ref}
+    >
+      <ModalContent
+        recursionLevel={recursionLevel + 1}
+      />
+    </ModalSheetView>
+    </ModalSheetViewMainContent>
+  );
+};
+
+export function ModalSheetViewTest03(props: ExampleItemProps) {
+  const modalSheetViewRef = React.useRef<ModalSheetViewRef | null>(null);
+
+  return (
+    <ExampleItemCard
+      style={props.style}
+      index={props.index}
+      title={'ModalSheetViewTest02'}
+      description={[
+        "TBA",
+      ]}
+    >
+      <CardButton
+        title={'Present Sheet Modal'}
+        subtitle={'Present content as sheet'}
+        onPress={async () => {
+          await modalSheetViewRef.current?.presentModal();
+        }}
+      />
+      <ModalSheetView
+        ref={ref => modalSheetViewRef.current = ref}
+      >
+        <ModalContent/>
+      </ModalSheetView>
+    </ExampleItemCard>
+  );
+};
+
+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