2022-05-10 01:34:02 +03:00
|
|
|
import { Spin, Skeleton, Modal as AntModal } from 'antd';
|
2022-09-07 10:00:28 +03:00
|
|
|
import React, { FC, ReactNode, useState } from 'react';
|
|
|
|
import styles from './Modal.module.scss';
|
2022-05-10 01:34:02 +03:00
|
|
|
|
2022-09-07 10:00:28 +03:00
|
|
|
export type ModalProps = {
|
2022-05-10 01:34:02 +03:00
|
|
|
title: string;
|
|
|
|
url?: string;
|
2022-10-11 03:11:29 +03:00
|
|
|
open: boolean;
|
2022-05-10 01:34:02 +03:00
|
|
|
handleOk?: () => void;
|
|
|
|
handleCancel?: () => void;
|
|
|
|
afterClose?: () => void;
|
|
|
|
children?: ReactNode;
|
2022-05-30 07:52:38 +03:00
|
|
|
height?: string;
|
2022-08-23 04:27:47 +03:00
|
|
|
width?: string;
|
2022-09-07 10:00:28 +03:00
|
|
|
};
|
2022-05-10 01:34:02 +03:00
|
|
|
|
2022-09-07 10:00:28 +03:00
|
|
|
export const Modal: FC<ModalProps> = ({
|
|
|
|
title,
|
|
|
|
url,
|
2022-10-11 03:11:29 +03:00
|
|
|
open,
|
2022-09-07 10:00:28 +03:00
|
|
|
handleOk,
|
|
|
|
handleCancel,
|
|
|
|
afterClose,
|
|
|
|
height,
|
|
|
|
width,
|
|
|
|
children,
|
|
|
|
}) => {
|
2022-05-10 01:34:02 +03:00
|
|
|
const [loading, setLoading] = useState(!!url);
|
|
|
|
|
|
|
|
const modalStyle = {
|
|
|
|
padding: '0px',
|
2022-08-23 04:27:47 +03:00
|
|
|
minHeight: height,
|
2022-10-20 01:44:24 +03:00
|
|
|
height: height ?? '100%',
|
2022-05-10 01:34:02 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
const iframe = url && (
|
|
|
|
<iframe
|
|
|
|
title={title}
|
|
|
|
src={url}
|
|
|
|
width="100%"
|
|
|
|
height="100%"
|
|
|
|
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
|
|
|
|
frameBorder="0"
|
|
|
|
allowFullScreen
|
2022-09-05 08:52:32 +03:00
|
|
|
// eslint-disable-next-line react/no-unknown-property
|
2022-05-10 01:34:02 +03:00
|
|
|
onLoad={() => setLoading(false)}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
|
|
|
const iframeDisplayStyle = loading ? 'none' : 'inline';
|
|
|
|
|
|
|
|
return (
|
|
|
|
<AntModal
|
|
|
|
title={title}
|
2022-10-11 03:11:29 +03:00
|
|
|
open={open}
|
2022-05-10 01:34:02 +03:00
|
|
|
onOk={handleOk}
|
|
|
|
onCancel={handleCancel}
|
|
|
|
afterClose={afterClose}
|
|
|
|
bodyStyle={modalStyle}
|
2022-08-23 04:27:47 +03:00
|
|
|
width={width}
|
2022-05-10 01:34:02 +03:00
|
|
|
zIndex={9999}
|
|
|
|
footer={null}
|
|
|
|
centered
|
|
|
|
destroyOnClose
|
|
|
|
>
|
|
|
|
<>
|
|
|
|
{loading && (
|
|
|
|
<Skeleton active={loading} style={{ padding: '10px' }} paragraph={{ rows: 10 }} />
|
|
|
|
)}
|
|
|
|
|
|
|
|
{iframe && <div style={{ display: iframeDisplayStyle }}>{iframe}</div>}
|
2022-09-07 10:00:28 +03:00
|
|
|
{children && <div className={styles.content}>{children}</div>}
|
|
|
|
{loading && <Spin className={styles.spinner} spinning={loading} size="large" />}
|
2022-05-10 01:34:02 +03:00
|
|
|
</>
|
|
|
|
</AntModal>
|
|
|
|
);
|
2022-09-07 10:00:28 +03:00
|
|
|
};
|
|
|
|
export default Modal;
|
2022-05-10 01:34:02 +03:00
|
|
|
|
|
|
|
Modal.defaultProps = {
|
|
|
|
url: undefined,
|
|
|
|
children: undefined,
|
|
|
|
handleOk: undefined,
|
|
|
|
handleCancel: undefined,
|
|
|
|
afterClose: undefined,
|
2022-08-23 04:27:47 +03:00
|
|
|
height: '40vh',
|
|
|
|
width: '70%',
|
2022-05-10 01:34:02 +03:00
|
|
|
};
|