ReferenceNavigationScrollHandler() — supabase Function Reference

Architecture documentation for the ReferenceNavigationScrollHandler() function in Reference.navigation.client.tsx from the supabase codebase.

Function tsx DocumentationSystem ReferenceGen calls 1

Entity Profile

DocumentationSystem→ ReferenceGen→ ReferenceNavigationScrollHandler() — supabase Function Reference

Dependency Diagram

graph TD
  6d259035_40ba_010b_6a02_2f0b7d38f073["ReferenceNavigationScrollHandler()"]
  bc2b771b_9094_0de8_f360_db4beed8b338["isElementInViewport()"]
  6d259035_40ba_010b_6a02_2f0b7d38f073 -->|calls| bc2b771b_9094_0de8_f360_db4beed8b338
  style 6d259035_40ba_010b_6a02_2f0b7d38f073 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/docs/features/docs/Reference.navigation.client.tsx lines 125–180

export function ReferenceNavigationScrollHandler({
  children,
  ...rest
}: PropsWithChildren & HTMLAttributes<HTMLDivElement>) {
  const parentRef = useRef<HTMLElement>()
  const ref = useRef<HTMLDivElement>(null)
  const initialScrollHappened = useContext(ReferenceContentInitiallyScrolledContext)

  useEffect(() => {
    if (!ref.current) return

    let scrollingParent: HTMLElement = ref.current

    while (scrollingParent && !(scrollingParent.scrollHeight > scrollingParent.clientHeight)) {
      const parent = scrollingParent.parentElement
      if (!parent) break
      scrollingParent = parent
    }

    parentRef.current = scrollingParent
  }, [])

  const scrollActiveIntoView = useCallback(() => {
    const currentLink = ref.current?.querySelector('[aria-current=page]') as HTMLElement
    if (currentLink && !isElementInViewport(currentLink)) {
      // Calculate the offset of the current link relative to scrollingParent
      // and scroll the parent to the top of the link.
      const offsetTop = currentLink.offsetTop
      const parentOffsetTop = parentRef.current?.offsetTop ?? 0
      const scrollPosition = offsetTop - parentOffsetTop

      parentRef.current?.scrollTo({
        top: scrollPosition - 60 /* space for header + padding */,
      })
    }
  }, [])

  useEffect(() => {
    if (initialScrollHappened) {
      scrollActiveIntoView()
    }
  }, [initialScrollHappened, scrollActiveIntoView])

  useEffect(() => {
    const debouncedScrollActiveIntoView = debounce(scrollActiveIntoView, 150)

    window.addEventListener('scrollend', debouncedScrollActiveIntoView)
    return () => window.removeEventListener('scrollend', debouncedScrollActiveIntoView)
  }, [scrollActiveIntoView])

  return (
    <div ref={ref} {...rest}>
      {children}
    </div>
  )
}