jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui) - modal handle browser back button

Browse source
This commit is contained in:
Shekar Siri 2022-11-02 15:41:39 +01:00
parent 7a299fabc0
commit 007993608f
1 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
frontend/app/components/Modal/Modal.tsx
View file

@ -1,16 +1,26 @@
import React from 'react';
import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import ModalOverlay from './ModalOverlay';
import { useHistory } from 'react-router';
export default function Modal({ component, props, hideModal }: any) {
return component ? (
ReactDOM.createPortal(
<ModalOverlay hideModal={hideModal} left={!props.right} right={props.right}>
{component}
</ModalOverlay>,
document.querySelector('#modal-root')
)
) : (
<></>
);
const history = useHistory();
useEffect(() => {
return history.listen((location) => {
if (history.action === 'POP') {
document.querySelector('body').style.overflow = 'visible';
}
});
});
return component ? (
ReactDOM.createPortal(
<ModalOverlay hideModal={hideModal} left={!props.right} right={props.right}>
{component}
</ModalOverlay>,
document.querySelector('#modal-root')
)
) : (
<></>
);
}