diff --git a/src/components/ModalView/ModalView.tsx b/src/components/ModalView/ModalView.tsx index e63317c4..2b835f04 100644 --- 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 index 60c031a5..a82f1f01 100644 --- 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 > & { // TODO: See TODO:2023-03-04-13-02-45 - Refactor: Rename to diff --git a/src/native_components/RNIModalView/RNIModalViewEvents.ts b/src/native_components/RNIModalView/RNIModalViewEvents.ts index 901bb8bb..9a3c41eb 100644 --- a/src/native_components/RNIModalView/RNIModalViewEvents.ts +++ b/src/native_components/RNIModalView/RNIModalViewEvents.ts @@ -46,26 +46,76 @@ export type RNIModalBaseEvent = RNIModalData & { /** * Based on `RNIOnModalFocusEventData` */ -export type RNIOnModalFocusEvent = RNIModalData & {}; +export type RNIOnModalFocusEvent = RNIModalBaseEvent & { + senderInfo: RNIModalData; + isInitial: boolean; +}; // Native Event Object // ------------------- -// TODO - See TODO:2023-03-04-13-06-27 - Impl: Update -// `RNIModalView` Native Events -export type OnModalWillDismissEventObject = NativeSyntheticEvent< +export type OnModalWillPresentEventObject = NativeSyntheticEvent< + RNIModalBaseEvent & {} +>; +export type OnModalDidPresentEventObject = NativeSyntheticEvent< RNIModalBaseEvent & {} >; -// TODO - See TODO:2023-03-04-13-06-27 - Impl: Update -// `RNIModalView` Native Events +export type OnModalWillDismissEventObject = NativeSyntheticEvent< + RNIModalBaseEvent & {} +>; export type OnModalDidDismissEventObject = NativeSyntheticEvent< RNIModalBaseEvent & {} >; +export type OnModalWillShowEventObject = NativeSyntheticEvent< + RNIModalBaseEvent & {} +>; +export type OnModalDidShowEventObject = NativeSyntheticEvent< + RNIModalBaseEvent & {} +>; + +export type OnModalWillHideEventObject = NativeSyntheticEvent< + RNIModalBaseEvent & {} +>; +export type OnModalDidHideEventObject = NativeSyntheticEvent< + RNIModalBaseEvent & {} +>; + +export type OnPresentationControllerWillDismissEventObject = + NativeSyntheticEvent; + +export type OnPresentationControllerDidDismissEventObject = + NativeSyntheticEvent; + +export type OnPresentationControllerDidAttemptToDismissEventObject = + NativeSyntheticEvent; + +export type OnModalWillFocusEventObject = NativeSyntheticEvent< + RNIOnModalFocusEvent & {} +>; +export type OnModalDidFocusEventObject = NativeSyntheticEvent< + RNIOnModalFocusEvent & {} +>; + +export type OnModalWillBlurEventObject = NativeSyntheticEvent< + RNIOnModalFocusEvent & {} +>; +export type OnModalDidBlurEventObject = NativeSyntheticEvent< + RNIOnModalFocusEvent & {} +>; + // Event Handler Types // ------------------- +export type OnModalWillPresentEvent = ( + event: OnModalWillPresentEventObject +) => void; + +export type OnModalDidPresentEvent = ( + event: OnModalDidPresentEventObject +) => void; + export type OnModalWillDismissEvent = ( event: OnModalWillDismissEventObject ) => void; @@ -73,3 +123,33 @@ export type OnModalWillDismissEvent = ( export type OnModalDidDismissEvent = ( event: OnModalDidDismissEventObject ) => void; + +export type OnModalWillShowEvent = (event: OnModalWillShowEventObject) => void; + +export type OnModalDidShowEvent = (event: OnModalDidShowEventObject) => void; + +export type OnModalWillHideEvent = (event: OnModalWillHideEventObject) => void; + +export type OnModalDidHideEvent = (event: OnModalDidHideEventObject) => void; + +export type OnPresentationControllerWillDismissEvent = ( + event: OnPresentationControllerWillDismissEventObject +) => void; + +export type OnPresentationControllerDidDismissEvent = ( + event: OnPresentationControllerDidDismissEventObject +) => void; + +export type OnPresentationControllerDidAttemptToDismissEvent = ( + event: OnPresentationControllerDidAttemptToDismissEventObject +) => void; + +export type OnModalWillFocusEvent = ( + event: OnModalWillFocusEventObject +) => void; + +export type OnModalDidFocusEvent = (event: OnModalDidFocusEventObject) => void; + +export type OnModalWillBlurEvent = (event: OnModalWillBlurEventObject) => void; + +export type OnModalDidBlurEvent = (event: OnModalDidBlurEventObject) => void; diff --git a/src/native_components/RNIModalView/RNIModalViewTypes.ts b/src/native_components/RNIModalView/RNIModalViewTypes.ts index 8dbbb813..199ea2c5 100644 --- a/src/native_components/RNIModalView/RNIModalViewTypes.ts +++ b/src/native_components/RNIModalView/RNIModalViewTypes.ts @@ -10,13 +10,21 @@ import type { import type { ViewManagerConstantMap } from 'src/types/ViewModuleRelatedTypes'; import type { - OnModalShowEvent, - OnModalDismissEvent, - OnModalBlurEvent, - OnModalFocusEvent, - OnModalDidDismissEvent, + OnModalWillPresentEvent, + OnModalDidPresentEvent, OnModalWillDismissEvent, - OnModalAttemptDismissEvent, + OnModalDidDismissEvent, + OnModalWillShowEvent, + OnModalDidShowEvent, + OnModalWillHideEvent, + OnModalDidHideEvent, + OnModalWillFocusEvent, + OnModalDidFocusEvent, + OnModalWillBlurEvent, + OnModalDidBlurEvent, + OnPresentationControllerWillDismissEvent, + OnPresentationControllerDidDismissEvent, + OnPresentationControllerDidAttemptToDismissEvent, } from './RNIModalViewEvents'; export type RNIModalViewBaseProps = { @@ -47,15 +55,27 @@ export type RNIModalViewBaseProps = { // // * Rename - Add `will/did` prefix and deprecate prev. props // - onModalShow: OnModalShowEvent; - onModalDismiss: OnModalDismissEvent; - - onModalBlur: OnModalBlurEvent; - onModalFocus: OnModalFocusEvent; + onModalWillPresent: OnModalWillPresentEvent; + onModalDidPresent: OnModalDidPresentEvent; - onModalDidDismiss: OnModalDidDismissEvent; onModalWillDismiss: OnModalWillDismissEvent; - onModalAttemptDismiss: OnModalAttemptDismissEvent; + onModalDidDismiss: OnModalDidDismissEvent; + + onModalWillShow: OnModalWillShowEvent; + onModalDidShow: OnModalDidShowEvent; + + onModalWillHide: OnModalWillHideEvent; + onModalDidHide: OnModalDidHideEvent; + + onModalWillFocus: OnModalWillFocusEvent; + onModalDidFocus: OnModalDidFocusEvent; + + onModalWillBlur: OnModalWillBlurEvent; + onModalDidBlur: OnModalDidBlurEvent; + + onPresentationControllerWillDismiss: OnPresentationControllerWillDismissEvent; + onPresentationControllerDidDismiss: OnPresentationControllerDidDismissEvent; + onPresentationControllerDidAttemptToDismiss: OnPresentationControllerDidAttemptToDismissEvent; }; export type RNIModalViewProps = Partial & RNIModalViewBaseProps; diff --git a/src/native_components/RNIModalView/index.ts b/src/native_components/RNIModalView/index.ts index 1f5f7f75..4e2b1da7 100644 --- a/src/native_components/RNIModalView/index.ts +++ b/src/native_components/RNIModalView/index.ts @@ -1,4 +1,3 @@ - export * from './RNIModalView'; export * from './RNIModalViewEvents'; export * from './RNIModalViewDeprecatedEvents';