108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
import React, { useEffect, useRef, useState } from "react";
|
|
import { View, findNodeHandle } from "react-native";
|
|
import Modal from "react-native-modal";
|
|
import { sendAsAnalyticsEvent } from "../../App/common/hooks/useAnalyticsEvent";
|
|
import { CtaData, CtaType } from "../../App/common/interface";
|
|
import { ModalView } from "../../App/common/interface/modals/ModalView";
|
|
import { GetModalView } from "../../App/common/modals/modalViewResolver";
|
|
import { NativeDeeplinkNavigatorModule } from "../../App/common/native-module/NativeModules";
|
|
import styles from "../../App/common/styles/BaseBottomSheetComponentStyles";
|
|
import { BOTTOMSHEET_ANIMATION_DURATION } from "../../App/common/constants/NumericalConstants";
|
|
import { GenericActionPayload } from "../../App/common/actions/GenericAction";
|
|
import {
|
|
invalidateCacheWithUrl,
|
|
shouldInvalidateSavedData,
|
|
} from "../../App/common/utilities/CacheUtils";
|
|
import { setStringPreference } from "../../App/common/utilities/SharedPreferenceUtils";
|
|
|
|
const BaseBottomSheetComponent = ({
|
|
onBottomSheetAnimationEnd,
|
|
showModal,
|
|
onClose,
|
|
modalView,
|
|
handleActions,
|
|
}: {
|
|
onBottomSheetAnimationEnd?: (id: number | null) => void;
|
|
showModal: boolean;
|
|
onClose: () => void;
|
|
modalView: ModalView | undefined;
|
|
handleActions: (actionPayload?: GenericActionPayload) => void;
|
|
}) => {
|
|
const [isModalVisible, setModalVisible] = useState(showModal);
|
|
const modalRef = useRef(null);
|
|
|
|
const closeModal = () => {
|
|
setModalVisible(false);
|
|
setTimeout(() => {
|
|
onClose();
|
|
}, BOTTOMSHEET_ANIMATION_DURATION);
|
|
};
|
|
|
|
const invalidatePostApiData = () => {
|
|
return setStringPreference("POST_API_CALLED", "false");
|
|
};
|
|
|
|
const handleModalClick = (cta: CtaData) => {
|
|
if (invalidateCacheWithUrl(cta.url) || shouldInvalidateSavedData(cta)) {
|
|
invalidatePostApiData();
|
|
}
|
|
switch (cta?.type) {
|
|
case CtaType.DISMISS_MODAL:
|
|
if (!!cta?.analyticsEventProperties) {
|
|
sendAsAnalyticsEvent(cta?.analyticsEventProperties);
|
|
}
|
|
closeModal();
|
|
break;
|
|
default:
|
|
try {
|
|
NativeDeeplinkNavigatorModule.navigateToNaviDeeplinkNavigator(
|
|
JSON.stringify(cta),
|
|
);
|
|
} catch (error) {
|
|
// #TODO: Handle the error gracefully using Sentry.
|
|
console.error("Error while navigating to deep link:", error);
|
|
}
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
setModalVisible(showModal);
|
|
if (typeof onBottomSheetAnimationEnd === "function") {
|
|
const nodeId = findNodeHandle(modalRef?.current);
|
|
onBottomSheetAnimationEnd(nodeId);
|
|
}
|
|
}, [showModal]);
|
|
|
|
return (
|
|
<Modal
|
|
onBackdropPress={() => {
|
|
closeModal();
|
|
}}
|
|
onBackButtonPress={() => {
|
|
closeModal();
|
|
}}
|
|
hasBackdrop={true}
|
|
backdropOpacity={0.65}
|
|
isVisible={isModalVisible}
|
|
swipeDirection="down"
|
|
onSwipeComplete={() => closeModal()}
|
|
onModalHide={() => onClose()}
|
|
animationIn="slideInUp"
|
|
animationOut="slideOutDown"
|
|
animationInTiming={BOTTOMSHEET_ANIMATION_DURATION}
|
|
animationOutTiming={BOTTOMSHEET_ANIMATION_DURATION}
|
|
useNativeDriverForBackdrop={true}
|
|
style={styles.modal}
|
|
>
|
|
<View ref={modalRef} style={styles.modalContent}>
|
|
{/* <View style={styles.barContainer}>
|
|
<Text style={styles.barIcon} />
|
|
</View> */}
|
|
{GetModalView.getModal(modalView!!, handleModalClick, handleActions)}
|
|
</View>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default BaseBottomSheetComponent;
|