48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { CloseCircleOutlined, CloseOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
|
|
import { Button, Modal, Space, Tabs } from 'antd';
|
|
import React, { useEffect, useState } from 'react'
|
|
|
|
const PopupDialog: React.FC<{
|
|
onClose: () => void;
|
|
width: number;
|
|
title: React.ReactNode;
|
|
data: any;
|
|
render: (data: any, fullScreen: boolean) => React.ReactNode;
|
|
}> = ({ data, width, title, onClose, render }) => {
|
|
|
|
const [fullscreen, setFullscreen] = useState(false);
|
|
|
|
const FullBtn = fullscreen ? FullscreenExitOutlined : FullscreenOutlined;
|
|
|
|
if (!data) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
open
|
|
title={(
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
{title}
|
|
<div style={{ flexGrow: 1 }}></div>
|
|
<Space>
|
|
<FullBtn style={{ cursor: 'pointer' }} onClick={() => setFullscreen(!fullscreen)} />
|
|
<CloseOutlined style={{ cursor: 'pointer' }} onClick={() => { onClose(); setFullscreen(false); }} />
|
|
</Space>
|
|
</div>
|
|
)}
|
|
className={fullscreen ? 'fullscreen' : undefined}
|
|
width={fullscreen ? undefined : width}
|
|
onCancel={onClose}
|
|
footer={null}
|
|
closable={false}
|
|
bodyStyle={{ padding: 0 }}
|
|
destroyOnClose
|
|
maskClosable={false}
|
|
>
|
|
{data ? render(data, fullscreen) : null}
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default PopupDialog |