2022-12-10 12:14:48 +03:00
|
|
|
import './modal.css';
|
|
|
|
|
|
|
|
import { createPortal } from 'preact/compat';
|
2022-12-30 15:37:57 +03:00
|
|
|
import { useEffect, useRef } from 'preact/hooks';
|
2023-09-14 15:39:23 +03:00
|
|
|
import { useHotkeys } from 'react-hotkeys-hook';
|
2022-12-10 12:14:48 +03:00
|
|
|
|
|
|
|
const $modalContainer = document.getElementById('modal-container');
|
|
|
|
|
2023-09-14 15:39:23 +03:00
|
|
|
function Modal({ children, onClose, onClick, class: className }) {
|
2022-12-10 12:14:48 +03:00
|
|
|
if (!children) return null;
|
|
|
|
|
2022-12-30 15:37:57 +03:00
|
|
|
const modalRef = useRef();
|
|
|
|
useEffect(() => {
|
|
|
|
let timer = setTimeout(() => {
|
|
|
|
const focusElement = modalRef.current?.querySelector('[tabindex="-1"]');
|
|
|
|
if (focusElement) {
|
|
|
|
focusElement.focus();
|
|
|
|
}
|
|
|
|
}, 100);
|
|
|
|
return () => clearTimeout(timer);
|
|
|
|
}, []);
|
|
|
|
|
2023-10-25 21:19:01 +03:00
|
|
|
const escRef = useHotkeys(
|
|
|
|
'esc',
|
2023-10-26 06:16:34 +03:00
|
|
|
() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
onClose?.();
|
|
|
|
}, 0);
|
|
|
|
},
|
2023-10-25 21:19:01 +03:00
|
|
|
{
|
|
|
|
enabled: !!onClose,
|
2023-10-26 06:16:34 +03:00
|
|
|
// Using keyup and setTimeout above
|
|
|
|
// This will run "later" to prevent clash with esc handlers from other components
|
2023-10-25 21:19:01 +03:00
|
|
|
keydown: false,
|
|
|
|
keyup: true,
|
|
|
|
},
|
|
|
|
[onClose],
|
|
|
|
);
|
2023-09-14 15:39:23 +03:00
|
|
|
|
2022-12-10 12:14:48 +03:00
|
|
|
const Modal = (
|
2023-09-14 15:39:23 +03:00
|
|
|
<div
|
|
|
|
ref={(node) => {
|
|
|
|
modalRef.current = node;
|
|
|
|
escRef.current = node?.querySelector?.('[tabindex="-1"]') || node;
|
|
|
|
}}
|
|
|
|
className={className}
|
|
|
|
onClick={(e) => {
|
|
|
|
onClick?.(e);
|
|
|
|
if (e.target === e.currentTarget) {
|
|
|
|
onClose?.(e);
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
tabIndex="-1"
|
|
|
|
onFocus={(e) => {
|
2023-09-14 20:10:58 +03:00
|
|
|
if (e.target === e.currentTarget) {
|
|
|
|
modalRef.current?.querySelector?.('[tabindex="-1"]')?.focus?.();
|
|
|
|
}
|
2023-09-14 15:39:23 +03:00
|
|
|
}}
|
|
|
|
>
|
2022-12-10 12:14:48 +03:00
|
|
|
{children}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
|
|
|
return createPortal(Modal, $modalContainer);
|
|
|
|
|
|
|
|
// return createPortal(children, $modalContainer);
|
2022-12-16 08:27:04 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
export default Modal;
|