|
|
|
@ -5,15 +5,17 @@ import FocusTrap from 'focus-trap-react'
|
|
|
|
|
|
|
|
|
|
import styles from './modal.module.css'
|
|
|
|
|
|
|
|
|
|
const PORTAL_ID = '__sos_modal';
|
|
|
|
|
|
|
|
|
|
export default function Modal({visible, title, children, onDeactivate}){
|
|
|
|
|
const [portalExists, setPortalExists] = useState(false);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const portalExists = !!document.querySelector('#sos-modal');
|
|
|
|
|
const portalExists = !!document.querySelector(`#${PORTAL_ID}`);
|
|
|
|
|
|
|
|
|
|
if (!portalExists) {
|
|
|
|
|
const portal = document.createElement('div');
|
|
|
|
|
portal.id = '#sos-modal';
|
|
|
|
|
portal.id = PORTAL_ID;
|
|
|
|
|
document.body.appendChild(portal);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -43,5 +45,5 @@ export default function Modal({visible, title, children, onDeactivate}){
|
|
|
|
|
</FocusTrap>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
), window.document.body)
|
|
|
|
|
), document.querySelector(`#${PORTAL_ID}`))
|
|
|
|
|
}
|
|
|
|
|