components/anchor-bar/anchor-bar.react.tsx

Functions

Imports

It imports components/anchor-bar/anchor-bar.ts. No module of this repo imports it.

Source

1import { useEffect, useRef, useState } from "react";
2import { goToSection, markSections, measureBar, meetsRule, scrollParent, watchSections } from "./anchor-bar.ts";
3
4export interface AnchorBarProps {
5  // The view's sections, in order; each id is the id of the block or h2 it links to.
6  sections: Array<{ id: string; label: string }>;
7  // Show the bar even when the view is short or has fewer than three sections.
8  always?: boolean;
9  label?: string;
10}
11
12export function AnchorBar({ sections, always = false, label = "On this page" }: AnchorBarProps) {
13  const nav = useRef<HTMLElement>(null);
14  const [shown, setShown] = useState(always);
15  const [current, setCurrent] = useState<string | null>(null);
16  const ids = sections.map((s) => s.id).join(" ");
17
18  // The rule, measured now and again whenever the window or the content changes size, so a
19  // view that fills in after it loads gets its bar when it earns one (the Portal's Anchors).
20  useEffect(() => {
21    const el = nav.current;
22    if (!el) return;
23    const scroller = scrollParent(el);
24    const headings = () => sections.map((s) => document.getElementById(s.id)).filter((h): h is HTMLElement => h !== null);
25    // The bar's own height does not count, or showing it could tip the rule.
26    const apply = () => setShown(always || meetsRule(headings(), scroller, el.offsetHeight));
27    apply();
28    const ro = new ResizeObserver(apply);
29    ro.observe(scroller ?? document.documentElement);
30    ro.observe(el);
31    const scope = el.closest("main") ?? document.body;
32    const mo = new MutationObserver(apply);
33    mo.observe(scope, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-section", "id", "hidden"] });
34    return () => {
35      ro.disconnect();
36      mo.disconnect();
37    };
38    // The section ids identify what to watch.
39  }, [ids, always]);
40
41  // While the bar shows: stop each section below it, and mark the current one.
42  useEffect(() => {
43    const el = nav.current;
44    if (!el || !shown) return;
45    const scroller = scrollParent(el);
46    const headings = sections.map((s) => document.getElementById(s.id)).filter((h): h is HTMLElement => h !== null);
47    markSections(headings);
48    // After the next frame, once the bar is shown and has a height.
49    const frame = requestAnimationFrame(() => measureBar(el, scroller));
50    const stop = watchSections(headings, setCurrent, scroller);
51    return () => {
52      stop();
53      cancelAnimationFrame(frame);
54    };
55  }, [ids, shown]);
56
57  return (
58    <nav ref={nav} className="cap-anchors" aria-label={label} data-cap="anchor-bar" hidden={!shown}>
59      <span className="cap-anchors-label" aria-hidden="true">
60        {label}
61      </span>
62      <ul className="cap-anchors-list">
63        {sections.map((s) => (
64          <li key={s.id}>
65            <a
66              href={`#${s.id}`}
67              aria-current={current === s.id ? "location" : undefined}
68              onClick={(e) => {
69                const h = document.getElementById(s.id);
70                if (!h || e.ctrlKey || e.metaKey || e.shiftKey || e.button !== 0) return;
71                e.preventDefault();
72                goToSection(h);
73              }}
74            >
75              {s.label}
76            </a>
77          </li>
78        ))}
79      </ul>
80    </nav>
81  );
82}