💫 Update: Ex - ModalSheetViewTest04 Scaffolding

dominicstop · Oct 3, 2024 · 43ed0af · 43ed0af
1 parent 624fb46
commit 43ed0af
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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: {
+  },
+});