💫 Update: Ex - ModalSheetViewTest01

dominicstop · Sep 27, 2024 · 52280f2 · 52280f2
1 parent c1078e6
commit 52280f2
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 22 deletions.
diff --git 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
@@ -4,4 +4,5 @@ import type { ViewStyle } from "react-native";
 export type ExampleItemProps = {
   index: number;
   style?: ViewStyle;
+  extraProps?: Record<string, unknown>;
 };