MediaAttachmentGrid: fix viewer DOM not removed
All checks were successful
/ depoly (push) Successful in 1m5s

This commit is contained in:
thislight 2024-09-14 21:17:03 +08:00
parent 980f8cff7e
commit 2b2cc2000a
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
2 changed files with 17 additions and 13 deletions

View file

@ -2,6 +2,8 @@ import type { mastodon } from "masto";
import { import {
type Component, type Component,
For, For,
createEffect,
createRenderEffect,
createSignal, createSignal,
onCleanup, onCleanup,
onMount, onMount,
@ -15,6 +17,7 @@ const MediaAttachmentGrid: Component<{
attachments: mastodon.v1.MediaAttachment[]; attachments: mastodon.v1.MediaAttachment[];
}> = (props) => { }> = (props) => {
let rootRef: HTMLElement; let rootRef: HTMLElement;
const [dispose, setDispose] = createSignal<() => void>();
const [viewerIndex, setViewerIndex] = createSignal<number>(); const [viewerIndex, setViewerIndex] = createSignal<number>();
const viewerOpened = () => typeof viewerIndex() !== "undefined"; const viewerOpened = () => typeof viewerIndex() !== "undefined";
const gridTemplateColumns = () => { const gridTemplateColumns = () => {
@ -28,31 +31,32 @@ const MediaAttachmentGrid: Component<{
return "repeat(3, minmax(40px, auto))"; return "repeat(3, minmax(40px, auto))";
}; };
const openViewerFor = (index: number) => { createRenderEffect((lastDispose?: () => void) => {
setViewerIndex(index); lastDispose?.();
const vidx = viewerIndex();
if (typeof vidx === "undefined") return;
const container = document.createElement("div"); const container = document.createElement("div");
container.setAttribute("role", "presentation"); container.setAttribute("role", "presentation");
document.body.appendChild(container); document.body.appendChild(container);
return render(() => {
onCleanup(() => {
document.body.removeChild(container);
});
let dispose: () => void;
const removeContainer = () => {
setViewerIndex(undefined);
document.body.removeChild(container);
dispose();
};
dispose = render(() => {
return ( return (
<MediaViewer <MediaViewer
show={viewerOpened()} show={viewerOpened()}
index={viewerIndex() || 0} index={viewerIndex() || 0}
onIndexUpdated={setViewerIndex} onIndexUpdated={setViewerIndex}
media={props.attachments} media={props.attachments}
onClose={removeContainer} onClose={() => setViewerIndex()}
/> />
); );
}, container); }, container);
});
const openViewerFor = (index: number) => {
setViewerIndex(index);
}; };
css` css`

View file

@ -323,7 +323,7 @@ const MediaViewer: ParentComponent<MediaViewerProps> = (props) => {
boxShadow: showControls() ? "var(--tutu-shadow-e6)" : undefined, boxShadow: showControls() ? "var(--tutu-shadow-e6)" : undefined,
}} }}
> >
<IconButton onClick={props.onClose}> <IconButton onClick={props.onClose} disableRipple>
<Close /> <Close />
</IconButton> </IconButton>
</Toolbar> </Toolbar>