Skip to content
Snippets Groups Projects
Commit e711f6c1 authored by Bernard Roland (Student Com20)'s avatar Bernard Roland (Student Com20)
Browse files

Different attempt at making the popup modal

parent 0d376028
No related branches found
No related tags found
No related merge requests found
@use 'styles/settings.scss'as s;
@use 'styles/functions.scss'as fn;
@use 'styles/settings.scss' as s;
@use 'styles/functions.scss' as fn;
.circular-progress {
position: relative;
......@@ -60,4 +61,4 @@
display: flex;
margin: 0 !important;
}
}
\ No newline at end of file
}
@use 'styles/settings.scss'as s;
@use 'styles/settings.scss' as s;
.tabs-container {
display: flex;
......@@ -71,4 +72,4 @@
box-shadow: 0 0 5px rgba(s.$black, 0.05);
transition: left 300ms ease;
}
}
\ No newline at end of file
}
import { ReactNode, useEffect } from 'react';
import { ReactNode, useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import './popup.scss';
const body = document.getElementsByTagName('body')[0];
interface Props {
children: ReactNode
onClose: Function
}
export default function Popup({ children, onClose }: Props) {
useEffect(() => {
body.style.overflow = 'hidden';
return () => {
body.style.overflow = '';
}
}, []);
const body = document.getElementsByTagName('body')[0];
const root = useRef<HTMLDivElement>(null);
useEffect(() => {
const onKeyDown = (e: KeyboardEvent) => {
......@@ -31,8 +25,33 @@ export default function Popup({ children, onClose }: Props) {
}
}, [onClose]);
useEffect(() => {
const ignoreEvent = (e: Event) => {
e.preventDefault();
return false;
};
const elements = [ root.current, body ];
const events = [
'scroll', 'wheel', 'mousewheel', 'DOMMouseScroll',
'keydown', 'keypress', 'keyup', 'touchmove',
'touchstart', 'touchend', 'focus', 'click'
];
for (const elem of elements) {
for (const event of events) {
elem?.addEventListener(event, ignoreEvent);
}
}
return () => {
for (const elem of elements) {
for (const event of events) {
elem?.removeEventListener(event, ignoreEvent);
}
}
}
});
return createPortal(
<div className="popup-container">
<div className="popup-container" ref={root}>
<div className="popup">
{children}
</div>
......
......@@ -12,10 +12,10 @@
justify-content: center;
z-index: 2000;
align-items: center;
& ~ div {
overflow: hidden;
}
.popup {
will-change: transform;
......
@use 'styles/settings.scss'as s;
@use 'styles/mixins.scss'as mx;
@use 'styles/settings.scss' as s;
@use 'styles/mixins.scss' as mx;
.task {
padding: 30px;
......@@ -78,4 +79,4 @@
right: -15px;
bottom: -20px;
}
}
\ No newline at end of file
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment