🛠 Refactor: Replace ModalView.didOnLayout Usage

Summary: Replace `ModalView.didOnLayout` usage w/ event emitter + promise.
dominicstop · Jan 9, 2023 · ec121cb · ec121cb
1 parent 51c883d
commit ec121cb
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/src/components/ModalView/ModalView.tsx b/src/components/ModalView/ModalView.tsx
@@ -189,15 +189,12 @@ export class ModalView extends
         childProps: Helpers.isObject(childProps) ? childProps : null,
       });
 
-      // TODO: Use `Promise.all`
       // wait for view to mount
-      await new Promise((resolve) => {
-        this.didOnLayout = resolve;
-      });
-
-      // TODO: Use await event emitter
-      // reset didOnLayout
-      this.didOnLayout = null;
+      await Helpers.promiseWithTimeout(500, new Promise<void>((resolve) => {
+        this.emitter.once(ModalViewEmitterEvents.onLayoutModalContentContainer, () => {
+          resolve();
+        });
+      }));
     }
 
     try {
@@ -253,9 +250,11 @@ export class ModalView extends
     return true;
   }
 
-  _handleOnLayoutModalContentContainer: ViewProps['onLayout'] = () => {
-    const { didOnLayout } = this;
-    didOnLayout && didOnLayout();
+  _handleOnLayoutModalContentContainer: ViewProps['onLayout'] = (event) => {
+    this.emitter.emit(
+      ModalViewEmitterEvents.onLayoutModalContentContainer,
+      event.nativeEvent
+    );
   };
 
   // the child comp can call `props.getModalRef` to receive

diff --git a/src/components/ModalView/ModalViewEmitter.ts b/src/components/ModalView/ModalViewEmitter.ts
@@ -1,3 +1,4 @@
+import type { LayoutChangeEvent } from 'react-native';
 import type { TSEventEmitter } from '@dominicstop/ts-event-emitter';
 
 import type {
@@ -13,25 +14,32 @@ import type {
 import type { KeyMapType } from '../../types/UtilityTypes';
 
 export enum ModalViewEmitterEvents {
+  // `RNIModalView` Events
   onModalBlur = 'onModalBlur',
   onModalFocus = 'onModalFocus',
   onModalShow = 'onModalShow',
   onModalDismiss = 'onModalDismiss',
   onModalDidDismiss = 'onModalDidDismiss',
   onModalWillDismiss = 'onModalWillDismiss',
   onModalAttemptDismiss = 'onModalAttemptDismiss',
+
+  onLayoutModalContentContainer = 'onLayoutModalContentContainer',
 }
 
+// TODO: Remove `KeyMapType` usage
 export type ModalViewEmitterEventMap =
   // prettier-ignore
   KeyMapType<ModalViewEmitterEvents, {
+    // `RNIModalView` Events
     onModalBlur: OnModalBlurEventObject['nativeEvent'];
     onModalFocus: OnModalFocusEventObject['nativeEvent'];
     onModalShow: OnModalShowEventObject['nativeEvent'];
     onModalDismiss: OnModalDismissEventObject['nativeEvent'];
     onModalDidDismiss: OnModalDidDismissEventObject['nativeEvent'];
     onModalWillDismiss: OnModalWillDismissEventObject['nativeEvent'];
     onModalAttemptDismiss: OnModalAttemptDismissEventObject['nativeEvent'];
+
+    onLayoutModalContentContainer: LayoutChangeEvent['nativeEvent'];
   }
 >;