peter
e257e2aca0
Prettier 3 (pinned), printWidth 100, double quotes — chosen to match the existing hand-formatting and minimise reflow. This commit is ONLY the mechanical format pass (`prettier --write`) plus the config/ignore/scripts, isolated so it never pollutes a feature diff. Verified behaviour-neutral: typecheck, eslint (0 errors), and vitest all green before and after. See .git-blame-ignore-revs — `git blame` skips this sha.
69 lines
3.5 KiB
TypeScript
69 lines
3.5 KiB
TypeScript
import { useEffect, useState, type CSSProperties } from "react";
|
|
|
|
// Scroll-affordance for a scroll container (typically one whose native scrollbar is hidden with
|
|
// `.no-scrollbar`, but the page scroller keeps its bar and takes the fade anyway):
|
|
// fades the top/bottom edge of the content to hint there's more to scroll, but only on the edge
|
|
// that's actually clipped (no fade at a boundary, none when it all fits). Returns a callback ref
|
|
// to attach to the scroller and the mask `style` to spread onto it. Uses a node-state callback
|
|
// ref (not useRef) so the effect (re)runs whenever the element attaches — e.g. a SidePanel that
|
|
// mounts collapsed and only renders its scroll body once expanded still wires up correctly.
|
|
// `fadeTop` gates the top edge only. Pass false when the scroller's top is a sticky element (a
|
|
// table's sticky header): fading there would eat into the header instead of hinting at content, and
|
|
// the header would visibly change as the fade turns on with the first scroll.
|
|
export function useScrollFade(
|
|
fadePx = 20,
|
|
fadeTop = true,
|
|
): {
|
|
ref: (node: HTMLElement | null) => void;
|
|
style: CSSProperties;
|
|
} {
|
|
const [el, setEl] = useState<HTMLElement | null>(null);
|
|
const [fade, setFade] = useState({ up: false, down: false });
|
|
|
|
useEffect(() => {
|
|
if (!el) return;
|
|
// Bail out when neither edge changed: `scroll` fires per frame, and the page scroller's
|
|
// hook sits above the whole page tree, so a new object here would re-render on every frame
|
|
// of every scroll. The two booleans only flip at the ends of the range.
|
|
const update = () => {
|
|
const up = el.scrollTop > 1;
|
|
const down = el.scrollTop + el.clientHeight < el.scrollHeight - 1;
|
|
setFade((prev) => (prev.up === up && prev.down === down ? prev : { up, down }));
|
|
};
|
|
update();
|
|
el.addEventListener("scroll", update, { passive: true });
|
|
// Watch the scroller AND its content. Content that grows or shrinks — a lazy page loading in,
|
|
// a thread's messages decrypting, a list being filtered — changes neither the scroller's own
|
|
// box nor its scrollTop, so without the children nothing would re-evaluate the edges.
|
|
const ro = new ResizeObserver(update);
|
|
ro.observe(el);
|
|
for (const child of Array.from(el.children)) ro.observe(child);
|
|
// Children get SWAPPED, and a ResizeObserver holding a detached node simply never fires
|
|
// again. Measured: the Plex page opened with no bottom fade over a 3119px list, because the
|
|
// node observed at mount was the Suspense fallback the real page then replaced. (Same
|
|
// lazy-page race that broke BackToTop.) So follow the child list: the records name exactly
|
|
// which nodes arrived and left, which keeps this O(1) per change rather than re-observing
|
|
// every child of a long list on each append.
|
|
const mo = new MutationObserver((records) => {
|
|
for (const rec of records) {
|
|
for (const node of Array.from(rec.addedNodes))
|
|
if (node instanceof Element) ro.observe(node);
|
|
for (const node of Array.from(rec.removedNodes))
|
|
if (node instanceof Element) ro.unobserve(node);
|
|
}
|
|
update();
|
|
});
|
|
mo.observe(el, { childList: true });
|
|
return () => {
|
|
el.removeEventListener("scroll", update);
|
|
ro.disconnect();
|
|
mo.disconnect();
|
|
};
|
|
}, [el]);
|
|
|
|
const mask = `linear-gradient(to bottom, transparent, #000 ${fade.up && fadeTop ? fadePx : 0}px, #000 calc(100% - ${
|
|
fade.down ? fadePx : 0
|
|
}px), transparent)`;
|
|
return { ref: setEl, style: { maskImage: mask, WebkitMaskImage: mask } };
|
|
}
|