// @flow import * as React from "react"; import { darken } from "polished"; import breakpoint from "styled-components-breakpoint"; import useWindowScrollPosition from "@rehooks/window-scroll-position"; import HelpText from "components/HelpText"; import styled from "styled-components"; const HEADING_OFFSET = 20; type Props = { headings: { title: string, level: number, id: string }[], }; export default function Contents({ headings }: Props) { const [activeSlug, setActiveSlug] = React.useState(); const position = useWindowScrollPosition({ throttle: 100 }); React.useEffect(() => { for (let key = 0; key < headings.length; key++) { const heading = headings[key]; const element = window.document.getElementById( decodeURIComponent(heading.id) ); if (element) { const bounding = element.getBoundingClientRect(); if (bounding.top > HEADING_OFFSET) { const last = headings[Math.max(0, key - 1)]; setActiveSlug(last.id); return; } } } }, [position, headings]); // calculate the minimum heading level and adjust all the headings to make // that the top-most. This prevents the contents from being weirdly indented // if all of the headings in the document are level 3, for example. const minHeading = headings.reduce( (memo, heading) => (heading.level < memo ? heading.level : memo), Infinity ); const headingAdjustment = minHeading - 1; return (