63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
|
|
import ModalFrame from './frame';
|
|
import ModalHeader from './header';
|
|
import ModalOverlay from './overlay';
|
|
import ModalCloseIcon from './close_icon';
|
|
|
|
type Props = {
|
|
title?: string,
|
|
isDismissible?: boolean,
|
|
shouldCloseOnEsc?: boolean,
|
|
shouldCloseOnClickOutside?: boolean,
|
|
onRequestClose?: () => void,
|
|
fullScreen?: boolean,
|
|
contentClassName?: string,
|
|
overlayClassName?: string,
|
|
children: React.ReactNode,
|
|
};
|
|
|
|
function Modal({
|
|
title = null,
|
|
isDismissible = true,
|
|
shouldCloseOnEsc = true,
|
|
shouldCloseOnClickOutside = true,
|
|
onRequestClose = () => {},
|
|
fullScreen = false,
|
|
contentClassName = '',
|
|
overlayClassName = '',
|
|
children,
|
|
}: Props) {
|
|
return createPortal(
|
|
<ModalOverlay
|
|
isDismissible={isDismissible}
|
|
onRequestClose={onRequestClose}
|
|
shouldCloseOnEsc={shouldCloseOnEsc}
|
|
shouldCloseOnClickOutside={shouldCloseOnClickOutside}
|
|
className={overlayClassName}
|
|
>
|
|
<ModalFrame
|
|
className={contentClassName}
|
|
fullScreen={fullScreen}
|
|
>
|
|
{ title && (
|
|
<ModalHeader title={title} />
|
|
) }
|
|
{ isDismissible && (
|
|
<button type="button" onClick={onRequestClose} className="mailpoet-modal-close">{ModalCloseIcon}</button>
|
|
) }
|
|
<div
|
|
className="mailpoet-modal-content"
|
|
role="document"
|
|
>
|
|
{ children }
|
|
</div>
|
|
</ModalFrame>
|
|
</ModalOverlay>,
|
|
document.getElementById('mailpoet-modal')
|
|
);
|
|
}
|
|
|
|
export default Modal;
|