⭐️ Impl: JS Modal Events

Related: * `TODO:2023-03-04-13-15-11` - Refactor: Update Modal Events * `TODO:2023-03-30-16-36-50` - Update `ModalView` to use the new events.
dominicstop · Apr 14, 2023 · 7e9f6db · 7e9f6db
1 parent 7fa4a18
commit 7e9f6db
Show file tree

Hide file tree

Showing 6 changed files with 317 additions and 123 deletions.
diff --git a/src/components/ModalView/ModalView.tsx b/src/components/ModalView/ModalView.tsx
@@ -17,12 +17,21 @@ import * as Helpers from '../../functions/helpers';
 import { ModalContext } from '../../context/ModalContext';
 
 import {
-  OnModalAttemptDismissEvent,
-  OnModalBlurEvent,
+  OnModalWillPresentEvent,
+  OnModalDidPresentEvent,
+  OnModalWillDismissEvent,
   OnModalDidDismissEvent,
-  OnModalDismissEvent,
-  OnModalFocusEvent,
-  OnModalShowEvent,
+  OnModalWillShowEvent,
+  OnModalDidShowEvent,
+  OnModalWillHideEvent,
+  OnModalDidHideEvent,
+  OnModalWillFocusEvent,
+  OnModalDidFocusEvent,
+  OnModalWillBlurEvent,
+  OnModalDidBlurEvent,
+  OnPresentationControllerWillDismissEvent,
+  OnPresentationControllerDidDismissEvent,
+  OnPresentationControllerDidAttemptToDismissEvent,
   RNIModalView,
 } from '../../native_components/RNIModalView';
 
@@ -92,13 +101,21 @@ export class ModalView extends
       modalPresentationStyle,
 
       // native props - events
-      onModalShow,
-      onModalDismiss,
-      onModalBlur,
-      onModalFocus,
-      onModalDidDismiss,
+      onModalWillPresent,
+      onModalDidPresent,
       onModalWillDismiss,
-      onModalAttemptDismiss,
+      onModalDidDismiss,
+      onModalWillShow,
+      onModalDidShow,
+      onModalWillHide,
+      onModalDidHide,
+      onModalWillFocus,
+      onModalDidFocus,
+      onModalWillBlur,
+      onModalDidBlur,
+      onPresentationControllerWillDismiss,
+      onPresentationControllerDidDismiss,
+      onPresentationControllerDidAttemptToDismiss,
 
       // component props
       autoCloseOnUnmount,
@@ -157,13 +174,21 @@ export class ModalView extends
       modalID,
       allowModalForceDismiss,
       modalBGBlurEffectStyle,
-      onModalShow,
-      onModalDismiss,
-      onModalBlur,
-      onModalFocus,
-      onModalDidDismiss,
+      onModalWillPresent,
+      onModalDidPresent,
       onModalWillDismiss,
-      onModalAttemptDismiss,
+      onModalDidDismiss,
+      onModalWillShow,
+      onModalDidShow,
+      onModalWillHide,
+      onModalDidHide,
+      onModalWillFocus,
+      onModalDidFocus,
+      onModalWillBlur,
+      onModalDidBlur,
+      onPresentationControllerWillDismiss,
+      onPresentationControllerDidDismiss,
+      onPresentationControllerDidAttemptToDismiss,
       containerStyle,
 
       // C - View-Related Props
@@ -176,21 +201,6 @@ export class ModalView extends
     return this.emitter;
   };
 
-  setStateIsModalVisible = (nextModalVisibility: boolean) => {
-    const { isModalVisible: prevModalVisibility } = this.state;
-
-    const didModalVisibilityChange =
-      prevModalVisibility !== nextModalVisibility;
-
-    if (!didModalVisibilityChange) {
-      return;
-    }
-
-    this.setState({
-      isModalVisible: nextModalVisibility,
-    });
-  };
-
   setVisibility = async (
     nextVisible: boolean,
     childProps: object | null = null
@@ -302,97 +312,125 @@ export class ModalView extends
   // Native Event Handlers
   // ---------------------
 
-  private _handleOnModalBlur: OnModalBlurEvent = (event) => {
-    this.props.onModalBlur?.(event);
+  private _handleOnModalWillPresent: OnModalWillPresentEvent = (event) => {
+    const props = this.props;
+
+    props.onModalWillPresent?.(event);
     event.stopPropagation();
+  };
 
-    this.emitter.emit(
-      ModalViewEmitterEvents.onModalBlur,
-      event.nativeEvent
-    );
+  private _handleOnModalDidPresent: OnModalDidPresentEvent = (event) => {
+    const props = this.props;
 
-    this.setState({
-      isModalInFocus: false,
-    });
+    props.onModalDidPresent?.(event);
+    event.stopPropagation();
   };
 
-  private _handleOnModalFocus: OnModalFocusEvent = (event) => {
-    this.props.onModalFocus?.(event);
+  private _handleOnModalWillDismiss: OnModalWillDismissEvent = (event) => {
+    const props = this.props;
+
+    props.onModalWillDismiss?.(event);
     event.stopPropagation();
+  };
 
-    this.emitter.emit(
-      ModalViewEmitterEvents.onModalFocus,
-      event.nativeEvent
-    );
+  private _handleOnModalDidDismiss: OnModalDidDismissEvent = (event) => {
+    const props = this.props;
 
-    this.setState({
-      isModalInFocus: true,
-    });
+    props.onModalDidDismiss?.(event);
+    event.stopPropagation();
   };
 
-  private _handleOnModalShow: OnModalShowEvent = (event) => {
-    this.props.onModalShow?.(event);
+  private _handleOnModalWillShow: OnModalWillShowEvent = (event) => {
+    const props = this.props;
+
+    props.onModalWillShow?.(event);
     event.stopPropagation();
+  };
 
-    this.emitter.emit(
-      ModalViewEmitterEvents.onModalShow,
-      event.nativeEvent
-    );
+  private _handleOnModalDidShow: OnModalDidShowEvent = (event) => {
+    const props = this.props;
+
+    props.onModalDidShow?.(event);
+    event.stopPropagation();
 
-    this.setStateIsModalVisible(true);
+    this.setState({
+      isModalVisible: true,
+    });
   };
 
-  private _handleOnModalDismiss: OnModalDismissEvent = (event) => {
-    const props = this.getProps();
+  private _handleOnModalWillHide: OnModalWillHideEvent = (event) => {
+    const props = this.props;
 
-    this.props.onModalDismiss?.(event);
+    props.onModalWillHide?.(event);
     event.stopPropagation();
+  };
 
-    this.emitter.emit(
-      ModalViewEmitterEvents.onModalDismiss,
-      event.nativeEvent
-    );
+  private _handleOnModalDidHide: OnModalDidHideEvent = (event) => {
+    const props = this.props;
+
+    props.onModalDidHide?.(event);
+    event.stopPropagation();
 
     this.setState({
       isModalVisible: false,
-      childProps: null,
-
-      // reset state values from props
-      enableSwipeGesture: props.enableSwipeGesture,
-      isModalInPresentation: props.isModalInPresentation,
     });
   };
 
-  private _handleOnModalDidDismiss: OnModalDidDismissEvent = (event) => {
-    this.props.onModalDidDismiss?.(event);
+  private _handleOnModalWillFocus: OnModalWillFocusEvent = (event) => {
+    const props = this.props;
+
+    props.onModalWillFocus?.(event);
     event.stopPropagation();
+  };
 
-    this.emitter.emit(
-      ModalViewEmitterEvents.onModalDidDismiss,
-      event.nativeEvent
-    );
+  private _handleOnModalDidFocus: OnModalDidFocusEvent = (event) => {
+    const props = this.props;
+
+    props.onModalDidFocus?.(event);
+    event.stopPropagation();
 
-    this.setStateIsModalVisible(false);
+    this.setState({
+      isModalInFocus: true,
+    });
   };
 
-  private _handleOnModalWillDismiss: OnModalDidDismissEvent = (event) => {
-    this.props.onModalWillDismiss?.(event);
+  private _handleOnModalWillBlur: OnModalWillBlurEvent = (event) => {
+    const props = this.props;
+
+    props.onModalWillBlur?.(event);
     event.stopPropagation();
+  };
 
-    this.emitter.emit(
-      ModalViewEmitterEvents.onModalWillDismiss,
-      event.nativeEvent
-    );
+  private _handleOnModalDidBlur: OnModalDidBlurEvent = (event) => {
+    const props = this.props;
+
+    props.onModalDidBlur?.(event);
+    event.stopPropagation();
+
+    this.setState({
+      isModalInFocus: false,
+    });
   };
 
-  private _handleOnModalAttemptDismiss: OnModalAttemptDismissEvent = (event) => {
-    this.props.onModalAttemptDismiss?.(event);
+  private _handleOnPresentationControllerWillDismiss: OnPresentationControllerWillDismissEvent = (event) => {
+    const props = this.props;
+
+    props.onPresentationControllerWillDismiss?.(event);
     event.stopPropagation();
+  };
 
-    this.emitter.emit(
-      ModalViewEmitterEvents.onModalAttemptDismiss,
-      event.nativeEvent
-    );
+  private _handleOnPresentationControllerDidDismiss: OnPresentationControllerDidDismissEvent = (event) => {
+    const props = this.props;
+
+    props.onPresentationControllerDidDismiss?.(event);
+    event.stopPropagation();
+  };
+
+  private _handleOnPresentationControllerDidAttemptToDismiss: OnPresentationControllerDidAttemptToDismissEvent = (event) => {
+    const props = this.props;
+
+    props.onPresentationControllerDidAttemptToDismiss?.(event);
+    event.stopPropagation();
   };
 
  private _renderModal() {
@@ -424,13 +462,21 @@ export class ModalView extends
         }}
         style={styles.nativeModalView}
         onStartShouldSetResponder={this._shouldSetResponder}
-        onModalBlur={this._handleOnModalBlur}
-        onModalFocus={this._handleOnModalFocus}
-        onModalShow={this._handleOnModalShow}
-        onModalDismiss={this._handleOnModalDismiss}
-        onModalDidDismiss={this._handleOnModalDidDismiss}
+        onModalWillPresent={this._handleOnModalWillPresent}
+        onModalDidPresent={this._handleOnModalDidPresent}
         onModalWillDismiss={this._handleOnModalWillDismiss}
-        onModalAttemptDismiss={this._handleOnModalAttemptDismiss}
+        onModalDidDismiss={this._handleOnModalDidDismiss}
+        onModalWillShow={this._handleOnModalWillShow}
+        onModalDidShow={this._handleOnModalDidShow}
+        onModalWillHide={this._handleOnModalWillHide}
+        onModalDidHide={this._handleOnModalDidHide}
+        onModalWillFocus={this._handleOnModalWillFocus}
+        onModalDidFocus={this._handleOnModalDidFocus}
+        onModalWillBlur={this._handleOnModalWillBlur}
+        onModalDidBlur={this._handleOnModalDidBlur}
+        onPresentationControllerWillDismiss={this._handleOnPresentationControllerWillDismiss}
+        onPresentationControllerDidDismiss={this._handleOnPresentationControllerDidDismiss}
+        onPresentationControllerDidAttemptToDismiss={this._handleOnPresentationControllerDidAttemptToDismiss}
         {...overrideProps}
         {...viewProps}
       >
@@ -515,3 +561,5 @@ const styles = StyleSheet.create({
     right: 0,
   },
 });
+
+class ModalViewHelpers {}
diff --git a/src/components/ModalView/ModalViewEmitter.ts b/src/components/ModalView/ModalViewEmitter.ts
@@ -2,16 +2,42 @@ import type { LayoutChangeEvent } from 'react-native';
 import type { TSEventEmitter } from '@dominicstop/ts-event-emitter';
 
 import type {
-  OnModalDidDismissEventObject,
+  OnModalWillPresentEventObject,
+  OnModalDidPresentEventObject,
   OnModalWillDismissEventObject,
+  OnModalDidDismissEventObject,
+  OnModalWillShowEventObject,
+  OnModalDidShowEventObject,
+  OnModalWillHideEventObject,
+  OnModalDidHideEventObject,
+  OnModalWillFocusEventObject,
+  OnModalDidFocusEventObject,
+  OnModalWillBlurEventObject,
+  OnModalDidBlurEventObject,
+  OnPresentationControllerWillDismissEventObject,
+  OnPresentationControllerDidDismissEventObject,
+  OnPresentationControllerDidAttemptToDismissEventObject,
 } from 'src/native_components/RNIModalView';
 
 import type { KeyMapType } from '../../types/UtilityTypes';
 
 export enum ModalViewEmitterEvents {
   // `RNIModalView` Events
-  onModalDidDismiss = 'onModalDidDismiss',
+  onModalWillPresent = 'onModalWillPresent',
+  onModalDidPresent = 'onModalDidPresent',
   onModalWillDismiss = 'onModalWillDismiss',
+  onModalDidDismiss = 'onModalDidDismiss',
+  onModalWillShow = 'onModalWillShow',
+  onModalDidShow = 'onModalDidShow',
+  onModalWillHide = 'onModalWillHide',
+  onModalDidHide = 'onModalDidHide',
+  onModalWillFocus = 'onModalWillFocus',
+  onModalDidFocus = 'onModalDidFocus',
+  onModalWillBlur = 'onModalWillBlur',
+  onModalDidBlur = 'onModalDidBlur',
+  onPresentationControllerWillDismiss = 'onPresentationControllerWillDismiss',
+  onPresentationControllerDidDismiss = 'onPresentationControllerDidDismiss',
+  onPresentationControllerDidAttemptToDismiss = 'onPresentationControllerDidAttemptToDismiss',
 
   onLayoutModalContentContainer = 'onLayoutModalContentContainer',
 }
@@ -23,8 +49,21 @@ export type ModalViewEmitterEventMap =
   // prettier-ignore
   KeyMapType<ModalViewEmitterEvents, {
     // `RNIModalView` Events
-    onModalDidDismiss: OnModalDidDismissEventObject['nativeEvent'];
+    onModalWillPresent: OnModalWillPresentEventObject['nativeEvent'];
+    onModalDidPresent: OnModalDidPresentEventObject['nativeEvent'];
     onModalWillDismiss: OnModalWillDismissEventObject['nativeEvent'];
+    onModalDidDismiss: OnModalDidDismissEventObject['nativeEvent'];
+    onModalWillShow: OnModalWillShowEventObject['nativeEvent'];
+    onModalDidShow: OnModalDidShowEventObject['nativeEvent'];
+    onModalWillHide: OnModalWillHideEventObject['nativeEvent'];
+    onModalDidHide: OnModalDidHideEventObject['nativeEvent'];
+    onModalWillFocus: OnModalWillFocusEventObject['nativeEvent'];
+    onModalDidFocus: OnModalDidFocusEventObject['nativeEvent'];
+    onModalWillBlur: OnModalWillBlurEventObject['nativeEvent'];
+    onModalDidBlur: OnModalDidBlurEventObject['nativeEvent'];
+    onPresentationControllerWillDismiss: OnPresentationControllerWillDismissEventObject['nativeEvent'];
+    onPresentationControllerDidDismiss: OnPresentationControllerDidDismissEventObject['nativeEvent'];
+    onPresentationControllerDidAttemptToDismiss: OnPresentationControllerDidAttemptToDismissEventObject['nativeEvent'];
 
     onLayoutModalContentContainer: LayoutChangeEvent['nativeEvent'];
   }