Class PageNav

docs/App/PageNav.tsx:35–111

}

class PageNav extends Component<RouteComponentProps, NavState> {
  scrollSpy!: ScrollSpy;
  state: NavState = { activeId: null, links: [] };
  componentDidMount() {
    const { match } = this.props;

    // eslint-disable-next-line
    this.setState({ links: store.getPageHeadings(match.path) });
  }
  componentDidUpdate({ history, location }: RouteComponentProps) {
    const { hash } = this.props.location; // old hash
    const shouldRefresh = location.hash !== hash && history.action !== 'POP';

    // this makes everything work, need those fresh nodes
    if (shouldRefresh && this.scrollSpy.buildNodeList) {
      this.scrollSpy.buildNodeList();
    }
  }
  getSelected = (ids: readonly (string | null)[]) => {
    const activeId = ids[0];
    if (activeId !== this.state.activeId) {
      this.setState({ activeId });
    }
  };
  getScrollSpy: RefCallback<ScrollSpy> = (ref) => {
    if (!ref) return;
    this.scrollSpy = ref;
  };
  handleItemClick = ({
    event,
    hash,
  }: {
    readonly event: MouseEvent<HTMLDivElement>;
    readonly hash: string;
  }) => {
    event.preventDefault();
    const path = `#${hash}`;
    const el = document.querySelector<HTMLElement>(path);
    const { history } = this.props;

    if (el && el.offsetTop) {
      history.replace(path);
      animatedScrollTo(window, el.offsetTop);
    }
  };
  render() {
    const { activeId, links } = this.state;
    const isSmallDevice = window.innerWidth <= 769;

    return links && links.length ? (
      <Sticky preserveHeight={isSmallDevice}>
        <ScrollSpy ref={this.getScrollSpy} onChange={this.getSelected}>
          <Nav>
            {links.map((l) => {
              const hash = l.path.slice(1);
              const selected = hash === activeId;

              return l.level > 0 ? (