This commit is contained in:
parent
80d711f75f
commit
e861f238f0
@ -61,14 +61,13 @@ export default function Modal(props: ModalProps) {
|
||||
|
||||
return createPortal(
|
||||
<div className={`modal${props.className ? ` ${props.className}` : ""}`} onClick={props.onClose}>
|
||||
<div className={props.bodyClassName || "modal-body"} onClick={props.onClose}>
|
||||
<div
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
props.onClick?.(e);
|
||||
}}>
|
||||
{props.children}
|
||||
</div>
|
||||
<div
|
||||
className={props.bodyClassName || "modal-body"}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
props.onClick?.(e);
|
||||
}}>
|
||||
{props.children}
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
|
@ -83,8 +83,14 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
|
||||
}
|
||||
}, [image, isVideo]);
|
||||
|
||||
const onClickBg = (e: React.MouseEvent) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
props.onClose();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="relative h-screen flex items-center flex-1 justify-center" onClick={onClickBg}>
|
||||
{mediaEl}
|
||||
<div className="select-none absolute flex flex-row items-center gap-4 left-0 top-0 p-4">
|
||||
<span
|
||||
@ -92,6 +98,8 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
|
||||
onClick={props.onClose}>
|
||||
<Icon name="x-close" size={24} />
|
||||
</span>
|
||||
</div>
|
||||
<div className="select-none absolute flex flex-row items-center gap-4 right-0 top-0 p-4">
|
||||
{props.images.length > 1 && `${idx + 1}/${props.images.length}`}
|
||||
</div>
|
||||
{props.images.length > 1 && (
|
||||
@ -116,7 +124,7 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user