⭐️ Impl: Call Deprecated Modal Events

Related: * `TODO:2023-03-04-13-15-11` - Refactor: Update Modal Events. * `TODO:2023-03-30-15-55-12` - Add invocation for deprecated events: `onModalFocus`, `onModalShow`, `onModalAttemptDismiss`, `onModalDismiss`, `onModalBlur`.
dominicstop · Apr 16, 2023 · b67d841 · b67d841
1 parent d0a3fe3
commit b67d841
Show file tree

Hide file tree

Showing 3 changed files with 213 additions and 5 deletions.
diff --git a/src/components/ModalView/ModalView.tsx b/src/components/ModalView/ModalView.tsx
@@ -6,6 +6,7 @@ import {
   ScrollView,
   Platform,
   ViewProps,
+  NativeSyntheticEvent,
 } from 'react-native';
 
 import { RNIWrapperView } from '../../temp';
@@ -33,6 +34,8 @@ import {
   OnPresentationControllerDidDismissEvent,
   OnPresentationControllerDidAttemptToDismissEvent,
   RNIModalView,
+  RNIModalBaseEvent,
+  RNIModalDeprecatedBaseEvent,
 } from '../../native_components/RNIModalView';
 
 import { RNIModalViewModule } from '../../native_modules/RNIModalViewModule';
@@ -49,6 +52,7 @@ import {
   NATIVE_ID_KEYS,
   VirtualizedListContext,
 } from './ModalViewConstants';
+import { ModalViewEmitterEventsDeprecated } from './ModalViewEmitterDeprecated';
 
 // prettier-ignore
 export class ModalView extends
@@ -317,42 +321,83 @@ export class ModalView extends
 
     props.onModalWillPresent?.(event);
     event.stopPropagation();
+
+    this.emitter.emit(
+      ModalViewEmitterEvents.onModalWillPresent,
+      event.nativeEvent
+    );
   };
 
   private _handleOnModalDidPresent: OnModalDidPresentEvent = (event) => {
     const props = this.props;
 
     props.onModalDidPresent?.(event);
     event.stopPropagation();
+
+    this.emitter.emit(
+      ModalViewEmitterEvents.onModalDidPresent,
+      event.nativeEvent
+    );
   };
 
   private _handleOnModalWillDismiss: OnModalWillDismissEvent = (event) => {
     const props = this.props;
 
     props.onModalWillDismiss?.(event);
     event.stopPropagation();
+
+    this.emitter.emit(
+      ModalViewEmitterEvents.onModalWillDismiss,
+      event.nativeEvent
+    );
   };
 
   private _handleOnModalDidDismiss: OnModalDidDismissEvent = (event) => {
     const props = this.props;
 
     props.onModalDidDismiss?.(event);
     event.stopPropagation();
+
+    this.emitter.emit(
+      ModalViewEmitterEvents.onModalDidDismiss,
+      event.nativeEvent
+    );
   };
 
   private _handleOnModalWillShow: OnModalWillShowEvent = (event) => {
     const props = this.props;
 
     props.onModalWillShow?.(event);
     event.stopPropagation();
+
+    this.emitter.emit(
+      ModalViewEmitterEvents.onModalWillShow,
+      event.nativeEvent
+    );
   };
 
   private _handleOnModalDidShow: OnModalDidShowEvent = (event) => {
     const props = this.props;
 
     props.onModalDidShow?.(event);
+    props.onModalShow?.(
+      ModalViewHelpers.createDeprecatedBaseEventObject(event)
+    );
+
     event.stopPropagation();
 
+    this.emitter.emit(
+      ModalViewEmitterEvents.onModalDidShow,
+      event.nativeEvent
+    );
+
+    this.emitter.emit(
+      ModalViewEmitterEventsDeprecated.onModalShow,
+      ModalViewHelpers.createDeprecatedEventObject(
+        event.nativeEvent
+      )
+    );
+
     this.setState({
       isModalVisible: true,
     });
@@ -362,15 +407,37 @@ export class ModalView extends
     const props = this.props;
 
     props.onModalWillHide?.(event);
+
+    this.emitter.emit(
+      ModalViewEmitterEvents.onModalWillHide,
+      event.nativeEvent
+    );
+
     event.stopPropagation();
   };
 
   private _handleOnModalDidHide: OnModalDidHideEvent = (event) => {
     const props = this.props;
 
     props.onModalDidHide?.(event);
+    props.onModalDismiss?.(
+      ModalViewHelpers.createDeprecatedBaseEventObject(event)
+    );
+
     event.stopPropagation();
 
+    this.emitter.emit(
+      ModalViewEmitterEvents.onModalDidHide,
+      event.nativeEvent
+    );
+
+    this.emitter.emit(
+      ModalViewEmitterEventsDeprecated.onModalDismiss,
+      ModalViewHelpers.createDeprecatedEventObject(
+        event.nativeEvent
+      )
+    );
+
     this.setState({
       isModalVisible: false,
     });
@@ -381,14 +448,35 @@ export class ModalView extends
 
     props.onModalWillFocus?.(event);
     event.stopPropagation();
+
+    this.emitter.emit(
+      ModalViewEmitterEvents.onModalWillFocus,
+      event.nativeEvent
+    );
   };
 
   private _handleOnModalDidFocus: OnModalDidFocusEvent = (event) => {
     const props = this.props;
 
     props.onModalDidFocus?.(event);
+    props.onModalFocus?.(
+      ModalViewHelpers.createDeprecatedBaseEventObject(event)
+    );
+
     event.stopPropagation();
 
+    this.emitter.emit(
+      ModalViewEmitterEvents.onModalDidFocus,
+      event.nativeEvent
+    );
+
+    this.emitter.emit(
+      ModalViewEmitterEventsDeprecated.onModalFocus,
+      ModalViewHelpers.createDeprecatedEventObject(
+        event.nativeEvent
+      )
+    );
+
     this.setState({
       isModalInFocus: true,
     });
@@ -399,14 +487,35 @@ export class ModalView extends
 
     props.onModalWillBlur?.(event);
     event.stopPropagation();
+
+    this.emitter.emit(
+      ModalViewEmitterEvents.onModalWillBlur,
+      event.nativeEvent
+    );
   };
 
   private _handleOnModalDidBlur: OnModalDidBlurEvent = (event) => {
     const props = this.props;
 
     props.onModalDidBlur?.(event);
+    props.onModalBlur?.(
+      ModalViewHelpers.createDeprecatedBaseEventObject(event)
+    );
+
     event.stopPropagation();
 
+    this.emitter.emit(
+      ModalViewEmitterEvents.onModalDidBlur,
+      event.nativeEvent
+    );
+
+    this.emitter.emit(
+      ModalViewEmitterEventsDeprecated.onModalBlur,
+      ModalViewHelpers.createDeprecatedEventObject(
+        event.nativeEvent
+      )
+    );
+
     this.setState({
       isModalInFocus: false,
     });
@@ -416,21 +525,69 @@ export class ModalView extends
     const props = this.props;
 
     props.onPresentationControllerWillDismiss?.(event);
+    props._onModalWillDismiss?.(
+      ModalViewHelpers.createDeprecatedBaseEventObject(event)
+    );
+
     event.stopPropagation();
+
+    this.emitter.emit(
+      ModalViewEmitterEvents.onPresentationControllerWillDismiss,
+      event.nativeEvent
+    );
+
+    this.emitter.emit(
+      ModalViewEmitterEventsDeprecated._onModalWillDismiss,
+      ModalViewHelpers.createDeprecatedEventObject(
+        event.nativeEvent
+      )
+    );
   };
 
   private _handleOnPresentationControllerDidDismiss: OnPresentationControllerDidDismissEvent = (event) => {
     const props = this.props;
 
     props.onPresentationControllerDidDismiss?.(event);
+    props._onModalDidDismiss?.(
+      ModalViewHelpers.createDeprecatedBaseEventObject(event)
+    );
+
     event.stopPropagation();
+
+    this.emitter.emit(
+      ModalViewEmitterEvents.onPresentationControllerDidDismiss,
+      event.nativeEvent
+    );
+
+    this.emitter.emit(
+      ModalViewEmitterEventsDeprecated._onModalDidDismiss,
+      ModalViewHelpers.createDeprecatedEventObject(
+        event.nativeEvent
+      )
+    );
   };
 
   private _handleOnPresentationControllerDidAttemptToDismiss: OnPresentationControllerDidAttemptToDismissEvent = (event) => {
     const props = this.props;
 
     props.onPresentationControllerDidAttemptToDismiss?.(event);
+    props.onModalAttemptDismiss?.(
+      ModalViewHelpers.createDeprecatedBaseEventObject(event)
+    );
+
     event.stopPropagation();
+
+    this.emitter.emit(
+      ModalViewEmitterEvents.onPresentationControllerDidAttemptToDismiss,
+      event.nativeEvent
+    );
+
+    this.emitter.emit(
+      ModalViewEmitterEventsDeprecated.onModalAttemptDismiss,
+      ModalViewHelpers.createDeprecatedEventObject(
+        event.nativeEvent
+      )
+    );
   };
 
  private _renderModal() {
@@ -562,4 +719,29 @@ const styles = StyleSheet.create({
   },
 });
 
-class ModalViewHelpers {}
+class ModalViewHelpers {
+  static createDeprecatedEventObject(
+    event: RNIModalBaseEvent
+  ): RNIModalDeprecatedBaseEvent {
+    return {
+      modalUUID: event.modalNativeID,
+      modalID: event.modalID,
+      reactTag: event.reactTag,
+      isInFocus: event.isModalInFocus,
+      modalLevel: event.modalIndex,
+      modalLevelPrev: event.modalIndexPrev,
+      isPresented: event.isModalPresented,
+    };
+  }
+
+  static createDeprecatedBaseEventObject(
+    event: NativeSyntheticEvent<RNIModalBaseEvent>
+  ): NativeSyntheticEvent<RNIModalDeprecatedBaseEvent> {
+    return {
+      ...event,
+      nativeEvent: ModalViewHelpers.createDeprecatedEventObject(
+        event.nativeEvent
+      ),
+    };
+  }
+}
diff --git a/src/components/ModalView/ModalViewEmitter.ts b/src/components/ModalView/ModalViewEmitter.ts
@@ -21,6 +21,11 @@ import type {
 
 import type { KeyMapType } from '../../types/UtilityTypes';
 
+import type { 
+  ModalViewEmitterEventMapDeprecated,
+  ModalViewEmitterEventsDeprecated
+} from './ModalViewEmitterDeprecated';
+
 export enum ModalViewEmitterEvents {
   // `RNIModalView` Events
   onModalWillPresent = 'onModalWillPresent',
@@ -70,6 +75,6 @@ export type ModalViewEmitterEventMap =
 >;
 
 export type ModalViewEventEmitter = TSEventEmitter<
-  ModalViewEmitterEvents,
-  ModalViewEmitterEventMap
+  ModalViewEmitterEvents & ModalViewEmitterEventsDeprecated,
+  ModalViewEmitterEventMap & ModalViewEmitterEventMapDeprecated
 >;
diff --git a/src/components/ModalView/ModalViewTypes.ts b/src/components/ModalView/ModalViewTypes.ts
@@ -1,5 +1,15 @@
 import type { ViewProps, ViewStyle } from 'react-native';
-import type { RNIModalViewProps } from 'src/native_components/RNIModalView';
+
+import type {
+  RNIModalViewProps,
+  OnModalFocusEvent,
+  OnModalShowEvent,
+  OnModalAttemptDismissEvent,
+  OnModalDismissEvent,
+  OnModalBlurEvent,
+  DeprecatedOnModalWillDismissEvent,
+  DeprecatedOnModalDidDismissEvent,
+} from 'src/native_components/RNIModalView';
 
 export type ModalViewBaseProps = Partial<
   Pick<
@@ -50,9 +60,20 @@ export type ModalViewBaseProps = Partial<
   children?: React.ReactNode;
 };
 
+/** @deprecated */
+export type ModalViewDeprecatedProps = {
+  /** @deprecated */ onModalFocus?: OnModalFocusEvent;
+  /** @deprecated */ onModalShow?: OnModalShowEvent;
+  /** @deprecated */ onModalAttemptDismiss?: OnModalAttemptDismissEvent;
+  /** @deprecated */ onModalDismiss?: OnModalDismissEvent;
+  /** @deprecated */ onModalBlur?: OnModalBlurEvent;
+  /** @deprecated */ _onModalWillDismiss?: DeprecatedOnModalWillDismissEvent;
+  /** @deprecated */ _onModalDidDismiss?: DeprecatedOnModalDidDismissEvent;
+};
+
 // prettier-ignore
 export type ModalViewProps =
-  ViewProps & ModalViewBaseProps;
+  ViewProps & ModalViewBaseProps & ModalViewDeprecatedProps;
 
 export type ModalViewState = {
   isModalVisible: boolean;