102 lines
2.9 KiB
TypeScript
102 lines
2.9 KiB
TypeScript
import { CloseOutlined, MinusOutlined } from '@ant-design/icons';
|
|
import { Button, Modal } from 'antd';
|
|
import type { CSSProperties, ReactNode } from 'react';
|
|
import './FullscreenPreviewModal.css';
|
|
|
|
type FullscreenPreviewModalProps = {
|
|
open: boolean;
|
|
title?: ReactNode;
|
|
meta?: ReactNode;
|
|
actions?: ReactNode;
|
|
hideHeader?: boolean;
|
|
className?: string;
|
|
contentClassName?: string;
|
|
fillContent?: boolean;
|
|
modalStyle?: CSSProperties;
|
|
shellStyle?: CSSProperties;
|
|
zIndex?: number;
|
|
getContainer?: HTMLElement | (() => HTMLElement) | false;
|
|
maskClosable?: boolean;
|
|
minimizeLabel?: string;
|
|
onMinimize?: (() => void) | null;
|
|
onClose: () => void;
|
|
children: ReactNode;
|
|
};
|
|
|
|
export function FullscreenPreviewModal({
|
|
open,
|
|
title,
|
|
meta,
|
|
actions,
|
|
hideHeader = false,
|
|
className,
|
|
contentClassName,
|
|
fillContent = false,
|
|
modalStyle,
|
|
shellStyle,
|
|
zIndex = 1400,
|
|
getContainer,
|
|
maskClosable = true,
|
|
minimizeLabel = '최소화',
|
|
onMinimize,
|
|
onClose,
|
|
children,
|
|
}: FullscreenPreviewModalProps) {
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
footer={null}
|
|
title={null}
|
|
width="100vw"
|
|
style={modalStyle}
|
|
zIndex={zIndex}
|
|
getContainer={getContainer}
|
|
maskClosable={maskClosable}
|
|
onCancel={onClose}
|
|
className={['fullscreen-preview-modal', className ?? ''].filter(Boolean).join(' ')}
|
|
>
|
|
<div className="fullscreen-preview-modal__shell" style={shellStyle}>
|
|
{hideHeader ? null : (
|
|
<div className="fullscreen-preview-modal__header">
|
|
<div className="fullscreen-preview-modal__title-group">
|
|
{title ? <div className="fullscreen-preview-modal__title">{title}</div> : null}
|
|
{meta ? <div className="fullscreen-preview-modal__meta">{meta}</div> : null}
|
|
</div>
|
|
<div className="fullscreen-preview-modal__actions">
|
|
{actions}
|
|
{onMinimize ? (
|
|
<Button
|
|
type="text"
|
|
className="fullscreen-preview-modal__icon-button fullscreen-preview-modal__minimize-button"
|
|
aria-label={minimizeLabel}
|
|
onClick={onMinimize}
|
|
>
|
|
<MinusOutlined aria-hidden="true" />
|
|
</Button>
|
|
) : null}
|
|
<Button
|
|
type="text"
|
|
className="fullscreen-preview-modal__icon-button fullscreen-preview-modal__close-button"
|
|
aria-label="닫기"
|
|
icon={<CloseOutlined />}
|
|
onClick={onClose}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div
|
|
className={[
|
|
'fullscreen-preview-modal__content',
|
|
fillContent ? 'fullscreen-preview-modal__content--fill' : '',
|
|
contentClassName ?? '',
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|