33417 handle close modal history

suneox · Dec 23, 2023 · 502b2a4 · 502b2a4
1 parent 5715b54
commit 502b2a4
Showing 1 changed file with 16 additions and 1 deletion.
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import withWindowDimensions from '@components/withWindowDimensions';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
@@ -23,8 +23,15 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
     const hideModal = () => {
         setStatusBarColor(previousStatusBarColor);
         onModalHide();
+        if (window.history.state.isModal) {
+            window.history.back();
+        }
     };
 
+    const handlePopStateRef = useRef(() => {
+        rest.onClose();
+    });
+
     const showModal = () => {
         const statusBarColor = StatusBar.getBackgroundColor() ?? theme.appBG;
 
@@ -36,9 +43,17 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
             setStatusBarColor(isFullScreenModal ? theme.appBG : StyleUtils.getThemeBackgroundColor(statusBarColor));
         }
 
+        window.history.pushState({isModal: true}, '', null);
+        window.addEventListener('popstate', handlePopStateRef.current);
         onModalShow?.();
     };
 
+    useEffect(() => {
+        return () => {
+            window.removeEventListener('popstate', handlePopStateRef.current);
+        };
+    }, []);
+
     return (
         <BaseModal
             // eslint-disable-next-line react/jsx-props-no-spreading