From 43ed0af1e9cae86afc7c1d459fdbdbfdc74b998d Mon Sep 17 00:00:00 2001
From: Dominic Go <dominic@dominicgo.dev>
Date: Thu, 3 Oct 2024 08:16:55 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AB=20Update:=20Ex=20-=20`ModalSheetVi?=
 =?UTF-8?q?ewTest04`=20Scaffolding?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/constants/ExampleCardItems.ts     |  5 ++
 example/src/examples/ModalSheetViewTest01.tsx |  3 +-
 example/src/examples/ModalSheetViewTest04.tsx | 82 +++++++++++++++++++
 3 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 example/src/examples/ModalSheetViewTest04.tsx

diff --git a/example/src/constants/ExampleCardItems.ts b/example/src/constants/ExampleCardItems.ts
index ee0e410..04caf15 100644
--- a/example/src/constants/ExampleCardItems.ts
+++ b/example/src/constants/ExampleCardItems.ts
@@ -4,6 +4,7 @@ import { AppMetadataCard } from "../examples/AppMetadataCard";
 import { ModalSheetViewTest01 } from "../examples/ModalSheetViewTest01";
 import { ModalSheetViewTest02 } from "../examples/ModalSheetViewTest02";
 import { ModalSheetViewTest03 } from "../examples/ModalSheetViewTest03";
+import { ModalSheetViewTest04 } from "../examples/ModalSheetViewTest04";
 
 import type { ExampleItemProps } from "../examples/SharedExampleTypes";
 import type { RouteEntry } from "./Routes";
@@ -58,6 +59,10 @@ export const EXAMPLE_ITEMS: Array<ExampleItem> = (() => {
       type: 'card',
       component: ModalSheetViewTest03,
     },
+    {
+      type: 'card',
+      component: ModalSheetViewTest04,
+    },
   ]; 
 
   // if (SHARED_ENV.enableReactNavigation) {
diff --git a/example/src/examples/ModalSheetViewTest01.tsx b/example/src/examples/ModalSheetViewTest01.tsx
index e753ff8..8b71846 100644
--- a/example/src/examples/ModalSheetViewTest01.tsx
+++ b/example/src/examples/ModalSheetViewTest01.tsx
@@ -3,10 +3,9 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
 import { ExampleItemCard, ObjectPropertyDisplay, CardButton, Colors } from 'react-native-ios-utilities';
-import { ModalSheetView, ModalSheetViewContext, ModalSheetMainContent, type ModalSheetViewRef } from 'react-native-ios-modal';
+import { ModalSheetView, ModalSheetViewContext, ModalSheetMainContent, type ModalSheetViewRef, type ModalMetrics } from 'react-native-ios-modal';
 
 import type { ExampleItemProps } from './SharedExampleTypes';
-import type { ModalMetrics } from '../../../src/types/ModalMetrics';
 
 let shouldEnableModalEventsLogging = false;
 
diff --git a/example/src/examples/ModalSheetViewTest04.tsx b/example/src/examples/ModalSheetViewTest04.tsx
new file mode 100644
index 0000000..fd8734a
--- /dev/null
+++ b/example/src/examples/ModalSheetViewTest04.tsx
@@ -0,0 +1,82 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { ExampleItemCard, CardButton, Colors } from 'react-native-ios-utilities';
+import { ModalSheetView, ModalSheetViewContext, ModalSheetMainContent, type ModalSheetViewRef, ModalSheetViewBottomAttachedContentOverlay } from 'react-native-ios-modal';
+
+import type { ExampleItemProps } from './SharedExampleTypes';
+
+
+export function ModalSheetViewTest04(props: ExampleItemProps) {
+  const modalSheetViewRef = React.useRef<ModalSheetViewRef | null>(null);
+  const modalContext = React.useContext(ModalSheetViewContext);
+
+
+  return (
+    <ExampleItemCard
+      style={props.style}
+      index={props.index}
+      title={'ModalSheetViewTest04'}
+      description={[
+        "TBA",
+      ]}
+    >
+      <CardButton
+        title={'Present Sheet Modal'}
+        subtitle={'Present content as sheet'}
+        onPress={async () => {
+          await modalSheetViewRef.current?.presentModal();
+        }}
+      />
+      <ModalSheetView
+        ref={ref => modalSheetViewRef.current = ref}
+      >
+        <ModalSheetMainContent
+          contentContainerStyle={styles.modalContent}
+        >
+          <View style={styles.modalContentDummy}>
+            <Text style={styles.modalContentDummyLabel}>
+              {'Main Content'}
+            </Text>
+          </View>
+        </ModalSheetMainContent>
+        <ModalSheetViewBottomAttachedContentOverlay
+          contentContainerStyle={styles.modalBottomOverlayContent}
+        >
+          <View style={styles.bottomContentDummy}>
+            <Text>
+              {'Bottom Content'}
+            </Text>
+          </View>
+        </ModalSheetViewBottomAttachedContentOverlay>
+      </ModalSheetView>
+    </ExampleItemCard>
+  );
+};
+
+const styles = StyleSheet.create({
+  debugDisplayInner: {
+    backgroundColor: `${Colors.PURPLE[200]}99`,
+  },
+  modalContent: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 24,
+  },
+  modalContentDummy: {
+    padding: 32,
+    backgroundColor: Colors.PURPLE[100],
+    borderRadius: 12,
+  },
+  modalContentDummyLabel: {
+    fontSize: 16,
+  },
+  modalBottomOverlayContent: {
+    backgroundColor: Colors.PURPLE[100],
+  },
+  bottomContentDummy: {
+  },
+});
\ No newline at end of file