Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | import React, { ReactNode, useEffect } from 'react';
import { IconButton } from '@mui/material';
import Icon from '../Icon/Icon';
import './styles.scss';
export interface Props {
children: ReactNode;
belowComponent?: ReactNode;
open: boolean;
onClose?: () => void;
onEscapeClose?: boolean;
onClickOutClose?: boolean;
minHeight?: string | number;
}
const OverlayModal = (props: Props) => {
const {
children,
belowComponent,
open,
onClose,
onEscapeClose = true,
onClickOutClose = true,
minHeight = '300px',
} = props;
useEffect(() => {
if (!open || !onEscapeClose) {
return;
}
const handleEscape = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
onClose?.();
}
};
document.addEventListener('keydown', handleEscape);
return () => {
document.removeEventListener('keydown', handleEscape);
};
}, [open, onEscapeClose, onClose]);
const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
if (
onClickOutClose &&
event.target instanceof HTMLElement &&
event.target.classList.contains('overlay-modal-backdrop')
) {
onClose?.();
}
};
return open ? (
<div className={'overlay-modal-backdrop'} onClick={handleBackdropClick}>
<div className={'overlay-modal-container'}>
<IconButton onClick={onClose} className={'overlay-modal-close'}>
<Icon size={'xlarge'} name='close' className={'icon-close'} />
</IconButton>
<div className='overlay-modal' style={{ minHeight }}>
<div className='overlay-modal-content'>{children}</div>
</div>
{belowComponent && <div className='overlay-modal-below'>{belowComponent}</div>}
</div>
</div>
) : null;
};
export default OverlayModal;
|