💫 Update: Ex - Test09

dominicstop · Apr 22, 2023 · 72aae7e · 72aae7e
1 parent 72183b5
commit 72aae7e
Showing 1 changed file with 55 additions and 6 deletions.
diff --git a/example/src/examples/Test09.tsx b/example/src/examples/Test09.tsx
@@ -5,36 +5,85 @@ import type { ExampleProps } from './SharedExampleTypes';
 
 import { ExampleCard } from '../components/ExampleCard';
 
+import * as Helpers from '../functions/Helpers';
+
 import { CardBody, CardButton, CardTitle } from '../components/Card';
 
-import { ModalView } from 'react-native-ios-modal';
+import { ModalView, RNIModalCustomSheetDetent } from 'react-native-ios-modal';
+import { ObjectPropertyDisplay } from '../components/ObjectPropertyDisplay';
+
+const CUSTOM_DETENTS: RNIModalCustomSheetDetent[] = [
+  {
+    key: 'custom_small',
+    mode: 'constant',
+    sizeConstant: 375,
+  },
+  {
+    key: 'custom_75%',
+    mode: 'relative',
+    sizeMultiplier: 0.75,
+  },
+  {
+    key: 'custom_100%',
+    mode: 'relative',
+    sizeMultiplier: 1,
+  },
+];
 
 export function Test09(props: ExampleProps) {
   const modalRef = React.useRef<ModalView>(null);
 
   const [counter, setCounter] = React.useState(0);
+  const [eventData, setEventData] = React.useState(null);
+
+  const currentDetent = Helpers.getNextItemInCyclicArray(
+    counter,
+    CUSTOM_DETENTS
+  );
+
+  const objectToDisplay = {
+    counter,
+    currentDetent,
+    eventData,
+  };
 
   return (
     <ExampleCard
       style={props.style}
       index={props.index}
       title={'Test09'}
-      subtitle={'test - TBA'}
-      description={['desc - TBA']}
+      subtitle={'Custom Sheet Detent Test'}
+      description={['Test for using custom detents iOS 16 API']}
     >
       <ModalView
         // TBA
         ref={modalRef}
         containerStyle={styles.modalContainer}
+        modalSheetDetents={CUSTOM_DETENTS}
+        sheetSelectedDetentIdentifier={currentDetent.key}
+        onModalDidChangeSelectedDetentIdentifier={({ nativeEvent }) => {
+          setEventData((prev) => ({
+            ...prev,
+            detentCurrent: nativeEvent.sheetDetentStringCurrent,
+            detentPrev: nativeEvent.sheetDetentStringPrevious,
+          }));
+        }}
+        onModalDetentDidCompute={({ nativeEvent }) => {
+          setEventData((prev) => ({
+            ...prev,
+            detentHeight: nativeEvent.maximumDetentValue,
+          }));
+        }}
       >
         <React.Fragment>
           <CardBody style={styles.modalCard}>
-            <CardTitle title={'Title - TBA'} />
+            <CardTitle title={'Custom Detents Test'} />
+            <ObjectPropertyDisplay object={objectToDisplay} />
           </CardBody>
           <CardButton
-            title={'🌼 TBA'}
+            title={'🌼 Change Current Detent'}
             onPress={() => {
-              // TBA
+              setCounter((prevCount) => prevCount + 1);
             }}
           />
         </React.Fragment>