⭐️ Impl: ModalSheetViewContext - Add Sheet State Metrics

dominicstop · Sep 29, 2024 · 2662f62 · 2662f62
1 parent 65b307a
commit 2662f62
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 0 deletions.
diff --git a/src/components/ModalSheetView/ModalSheetView.tsx b/src/components/ModalSheetView/ModalSheetView.tsx
@@ -10,6 +10,9 @@ import { RNIModalSheetView, type RNIModalSheetViewRef } from '../../native_compo
 import { ModalSheetViewContext, type ModalSheetViewContextType } from '../../context/ModalSheetViewContext';
 import { useLazyRef } from '../../hooks/useLazyRef';
 
+import { DEFAULT_MODAL_SHEET_VIEW_METRICS as MODAL_SHEET_STATE_METRICS_DEFAULT } from './ModalSheetViewConstants';
+import type { RNIModalSheetStateMetrics } from '../../types/RNIModalSheetStateMetrics';
+
 
 export const ModalSheetView = React.forwardRef<
   ModalSheetViewRef,
@@ -18,6 +21,16 @@ export const ModalSheetView = React.forwardRef<
 
   const nativeRef = React.useRef<RNIModalSheetViewRef | null>();
 
+  const [
+    prevModalSheetStateMetrics,
+    setPrevModalSheetStateMetrics,
+  ] = React.useState<RNIModalSheetStateMetrics | undefined>();
+
+  const [
+    currentModalSheetStateMetrics,
+    setCurrentModalSheetStateMetrics,
+  ] = React.useState<RNIModalSheetStateMetrics>(MODAL_SHEET_STATE_METRICS_DEFAULT);
+
   const callbacksToInvokeOnNextRender = React.useRef<Array<() => void>>([]);
   React.useEffect(() => {
     const totalItems = callbacksToInvokeOnNextRender.current.length;
@@ -117,6 +130,8 @@ export const ModalSheetView = React.forwardRef<
   });
 
   const contextValue: ModalSheetViewContextType = {
+    prevModalSheetStateMetrics,
+    currentModalSheetStateMetrics,
     getModalSheetViewRef: () => rawRef.current!
   };
 
@@ -132,6 +147,13 @@ export const ModalSheetView = React.forwardRef<
           props.onModalDidHide?.(event);
           event.stopPropagation();
         }}
+        onModalSheetStateDidChange={(event) => {
+          setPrevModalSheetStateMetrics(event.nativeEvent.prevState);
+          setCurrentModalSheetStateMetrics(event.nativeEvent.currentState);
+
+          props.onModalSheetStateDidChange?.(event);
+          event.stopPropagation();
+        }}
       >
         {children}
       </RNIModalSheetView>

diff --git a/src/components/ModalSheetView/ModalSheetViewConstants.ts b/src/components/ModalSheetView/ModalSheetViewConstants.ts
@@ -0,0 +1,10 @@
+import type { RNIModalSheetStateMetrics } from "../../types/RNIModalSheetStateMetrics";
+
+export const DEFAULT_MODAL_SHEET_VIEW_METRICS: RNIModalSheetStateMetrics = {
+  state: 'dismissed',
+  isDismissed: true,
+  isDismissing: false,
+  isPresented: false,
+  isPresenting: false,
+  simplified: 'dismissed'
+};
diff --git a/src/context/ModalSheetViewContext.ts b/src/context/ModalSheetViewContext.ts
@@ -1,7 +1,11 @@
 import React from 'react';
 import type { ModalSheetViewRef } from '../components/ModalSheetView';
+import type { RNIModalSheetStateMetrics } from '../types/RNIModalSheetStateMetrics';
 
 export type ModalSheetViewContextType = {
+  prevModalSheetStateMetrics: RNIModalSheetStateMetrics | undefined;
+  currentModalSheetStateMetrics: RNIModalSheetStateMetrics;
+
   getModalSheetViewRef: () => ModalSheetViewRef;
 };