From 4d63a30e4226038b622d504b233fd1fe581da464 Mon Sep 17 00:00:00 2001
From: Dominic Go <18517029+dominicstop@users.noreply.github.com>
Date: Sat, 22 Apr 2023 10:32:12 +0800
Subject: [PATCH] =?UTF-8?q?=E2=AD=90=EF=B8=8F=20Impl:=20`ModalViewState.fo?=
 =?UTF-8?q?cusState`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ModalView/ModalView.tsx     | 14 +++++++++++++-
 src/components/ModalView/ModalViewState.ts |  4 ++++
 src/components/ModalView/index.ts          |  1 +
 src/context/ModalContext.ts                |  1 +
 src/types/RNIModalTypes.ts                 |  7 +++++++
 5 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/components/ModalView/ModalView.tsx b/src/components/ModalView/ModalView.tsx
index ab59ca24..88a6c214 100644
--- a/src/components/ModalView/ModalView.tsx
+++ b/src/components/ModalView/ModalView.tsx
@@ -78,6 +78,7 @@ export class ModalView extends
       enableSwipeGesture: defaultProps.enableSwipeGesture,
       isModalInPresentation: defaultProps.isModalInPresentation,
       isModalInFocus: false,
+      focusState: 'INITIAL',
     };
   }
 
@@ -483,6 +484,10 @@ export class ModalView extends
       ModalViewEmitterEvents.onModalWillFocus,
       event.nativeEvent
     );
+
+    this.setState({
+      focusState: event.nativeEvent.modalFocusState,
+    });
   };
 
   private _handleOnModalDidFocus: OnModalDidFocusEvent = (event) => {
@@ -509,6 +514,7 @@ export class ModalView extends
 
     this.setState({
       isModalInFocus: true,
+      focusState: event.nativeEvent.modalFocusState,
     });
   };
 
@@ -522,6 +528,10 @@ export class ModalView extends
       ModalViewEmitterEvents.onModalWillBlur,
       event.nativeEvent
     );
+
+    this.setState({
+      focusState: event.nativeEvent.modalFocusState,
+    });
   };
 
   private _handleOnModalDidBlur: OnModalDidBlurEvent = (event) => {
@@ -548,6 +558,7 @@ export class ModalView extends
 
     this.setState({
       isModalInFocus: false,
+      focusState: event.nativeEvent.modalFocusState,
     });
   };
 
@@ -620,7 +631,7 @@ export class ModalView extends
     );
   };
 
-  private _handleOnModalDetentDidCompute: 
+  private _handleOnModalDetentDidCompute:
     OnModalDetentDidComputeEvent = (event) => {
 
     const props = this.props;
@@ -736,6 +747,7 @@ export class ModalView extends
         value={{
           isModalInFocus: state.isModalInFocus,
           isModalVisible: state.isModalVisible,
+          focusState: state.focusState,
 
           // pass down function to get modal refs
           getModalRef: this._handleGetModalRef,
diff --git a/src/components/ModalView/ModalViewState.ts b/src/components/ModalView/ModalViewState.ts
index 500bfb03..c4ff86b7 100644
--- a/src/components/ModalView/ModalViewState.ts
+++ b/src/components/ModalView/ModalViewState.ts
@@ -1,7 +1,11 @@
+import type { RNIModalFocusState } from 'src/types/RNIModalTypes';
+
 export type ModalViewState = {
   isModalVisible: boolean;
   childProps: unknown;
   enableSwipeGesture: boolean;
   isModalInPresentation: boolean;
   isModalInFocus: boolean;
+
+  focusState: RNIModalFocusState;
 };
diff --git a/src/components/ModalView/index.ts b/src/components/ModalView/index.ts
index 7885e561..a3952db5 100644
--- a/src/components/ModalView/index.ts
+++ b/src/components/ModalView/index.ts
@@ -1,4 +1,5 @@
 export * from './ModalView';
 export * from './ModalViewProps';
+export * from './ModalViewState';
 export * from './ModalViewEmitter';
 export * from './ModalViewEmitterDeprecated';
diff --git a/src/context/ModalContext.ts b/src/context/ModalContext.ts
index 58e1453c..8a6f2d5a 100644
--- a/src/context/ModalContext.ts
+++ b/src/context/ModalContext.ts
@@ -16,6 +16,7 @@ export type ModalContextType = Partial<
       ModalViewState,
       | 'isModalInFocus'
       | 'isModalVisible'
+      | 'focusState'
     >
   // `ModalView` Methods #2
   & {
diff --git a/src/types/RNIModalTypes.ts b/src/types/RNIModalTypes.ts
index 0f3db326..7be32b8a 100644
--- a/src/types/RNIModalTypes.ts
+++ b/src/types/RNIModalTypes.ts
@@ -10,3 +10,10 @@ export type RNIModalCustomSheetDetent = {
   key: string;
   sizeConstant: number;
 };
+
+export type RNIModalFocusState =
+  | 'INITIAL'
+  | 'FOCUSING'
+  | 'FOCUSED'
+  | 'BLURRING'
+  | 'BLURRED';