atmosphere explorer
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

preview resize observer

Juliet 97d14852 1465e287

+14 -4
+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}