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

---
 example/src/examples/ModalSheetViewTest01.tsx | 64 ++++++++++++-------
 example/src/examples/SharedExampleTypes.ts    |  1 +
 2 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/example/src/examples/ModalSheetViewTest01.tsx b/example/src/examples/ModalSheetViewTest01.tsx
index 71f33fb0..0622a4a4 100644
--- a/example/src/examples/ModalSheetViewTest01.tsx
+++ b/example/src/examples/ModalSheetViewTest01.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react';
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 import { ExampleItemCard, ObjectPropertyDisplay, CardButton, Colors } from 'react-native-ios-utilities';
 import { ModalSheetView, ModalSheetViewMainContent, type ModalSheetViewRef } from 'react-native-ios-modal';
@@ -11,6 +11,14 @@ import type { ExampleItemProps } from './SharedExampleTypes';
 export function ModalSheetViewTest01(props: ExampleItemProps) {
   const modalSheetViewRef = React.useRef<ModalSheetViewRef | null>(null);
 
+  const [
+    shouldMountRecursiveContent,
+    setShouldMountRecursiveContent,
+  ] = React.useState(false);
+
+  const recursionLevel = 
+    props.extraProps?.recursionLevel as any as number ?? 0;
+
   return (
     <ExampleItemCard
       style={props.style}
@@ -28,39 +36,51 @@ export function ModalSheetViewTest01(props: ExampleItemProps) {
         title={'Present Sheet Modal'}
         subtitle={'Present content as sheet'}
         onPress={async () => {
+          setShouldMountRecursiveContent(true);
           await modalSheetViewRef.current?.presentModal();
           console.log(
             'ModalSheetViewTest01',
-            '\n - present modal completed'
+            '\n - present modal completed',
+            `\n - recursionLevel: ${recursionLevel}`
           );
         }}
       />
+      <React.Fragment>
+        {(recursionLevel != 0) && (
+          <CardButton
+            title={'Dismiss Modal'}
+            subtitle={'Dismiss current modal'}
+            onPress={async () => {
+              await modalSheetViewRef.current?.dismissModal();
+              console.log(
+                'ModalSheetViewTest01',
+                '\n - dismiss modal completed',
+                `\n - recursionLevel: ${recursionLevel}`
+              );
+            }}
+          />
+        )}
+      </React.Fragment>
       <ModalSheetView
         ref={ref => modalSheetViewRef.current = ref}
       >
         <ModalSheetViewMainContent
           contentContainerStyle={styles.modalContent}
         >
-          <ExampleItemCard
-            title={'RNIDetachedViewTest02'}
-            style={styles.modalContentCard}
-          >
-            <ObjectPropertyDisplay
-              recursiveStyle={styles.debugDisplayInner}
-              object={undefined}
-            />
-            <CardButton
-              title={'Dismiss Modal'}
-              subtitle={'Dismiss current modal'}
-              onPress={async () => {
-                await modalSheetViewRef.current?.dismissModal();
-                console.log(
-                  'ModalSheetViewTest01',
-                  '\n - dismiss modal completed'
-                );
-              }}
-            />
-          </ExampleItemCard>
+          <React.Fragment>
+            {shouldMountRecursiveContent && (
+              <ModalSheetViewTest01
+                style={{
+                  ...props.style,
+                  ...styles.modalContentCard,
+                }}
+                index={props.index}
+                extraProps={{
+                  recursionLevel: recursionLevel + 1,
+                }}
+              />
+            )}
+          </React.Fragment>
         </ModalSheetViewMainContent>
       </ModalSheetView>
     </ExampleItemCard>
diff --git a/example/src/examples/SharedExampleTypes.ts b/example/src/examples/SharedExampleTypes.ts
index 0c4306b8..0fee3e04 100644
--- a/example/src/examples/SharedExampleTypes.ts
+++ b/example/src/examples/SharedExampleTypes.ts
@@ -4,4 +4,5 @@ import type { ViewStyle } from "react-native";
 export type ExampleItemProps = {
   index: number;
   style?: ViewStyle;
+  extraProps?: Record<string, unknown>;
 };
\ No newline at end of file