forked from
pds.ls/pdsls
atmosphere explorer
preview resize observer
+14
-4
+14
-4
src/components/hover-card/base.tsx
+14
-4
src/components/hover-card/base.tsx
···
1
1
import { A } from "@solidjs/router";
2
-
import { createEffect, createSignal, JSX, Show } from "solid-js";
2
+
import { createSignal, JSX, onCleanup, Show } from "solid-js";
3
3
import { isTouchDevice } from "../../layout";
4
4
5
5
interface HoverCardProps {
···
27
27
const [previewHeight, setPreviewHeight] = createSignal(0);
28
28
let anchorRef!: HTMLSpanElement;
29
29
let previewRef!: HTMLDivElement;
30
+
let resizeObserver: ResizeObserver | null = null;
30
31
31
-
createEffect(() => {
32
-
if (show() && previewRef) setPreviewHeight(previewRef.offsetHeight);
32
+
const setupResizeObserver = (el: HTMLDivElement) => {
33
+
resizeObserver?.disconnect();
34
+
previewRef = el;
35
+
resizeObserver = new ResizeObserver(() => {
36
+
if (previewRef) setPreviewHeight(previewRef.offsetHeight);
37
+
});
38
+
resizeObserver.observe(el);
39
+
};
40
+
41
+
onCleanup(() => {
42
+
resizeObserver?.disconnect();
33
43
});
34
44
35
45
const isOverflowing = (previewHeight: number) =>
···
62
72
)}
63
73
<Show when={show() && !isTouchDevice}>
64
74
<div
65
-
ref={previewRef}
75
+
ref={setupResizeObserver}
66
76
class={`dark:bg-dark-300 dark:shadow-dark-700 pointer-events-none absolute left-[50%] z-50 block -translate-x-1/2 overflow-hidden rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 shadow-md dark:border-neutral-700 ${props.previewClass || ""} ${isOverflowing(previewHeight()) ? "bottom-7" : "top-7"}`}
67
77
>
68
78
{props.children}