75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { InView } from "react-intersection-observer"
|
|
import { isElmWindow, useScrollController, useSidebar } from "docs-ui"
|
|
import checkElementInViewport from "../../../utils/check-element-in-viewport"
|
|
import { useEffect, useMemo } from "react"
|
|
import getSectionId from "../../../utils/get-section-id"
|
|
|
|
type H2Props = {
|
|
addToSidebar?: boolean
|
|
} & React.HTMLAttributes<HTMLHeadingElement>
|
|
|
|
const H2 = ({ addToSidebar = true, children, ...props }: H2Props) => {
|
|
const { activePath, setActivePath, addItems } = useSidebar()
|
|
const { getScrolledTop, scrollableElement } = useScrollController()
|
|
|
|
const handleViewChange = (
|
|
inView: boolean,
|
|
entry: IntersectionObserverEntry
|
|
) => {
|
|
if (!addToSidebar) {
|
|
return
|
|
}
|
|
const heading = entry.target
|
|
if (
|
|
(inView ||
|
|
checkElementInViewport(heading.parentElement || heading, 40)) &&
|
|
getScrolledTop() !== 0 &&
|
|
activePath !== heading.id
|
|
) {
|
|
// can't use next router as it doesn't support
|
|
// changing url without scrolling
|
|
history.pushState({}, "", `#${heading.id}`)
|
|
setActivePath(heading.id)
|
|
}
|
|
}
|
|
const id = getSectionId([children as string])
|
|
|
|
useEffect(() => {
|
|
if (id === (activePath || location.hash.replace("#", ""))) {
|
|
const elm = document.getElementById(id)
|
|
elm?.scrollIntoView()
|
|
}
|
|
|
|
addItems([
|
|
{
|
|
path: `${id}`,
|
|
title: children as string,
|
|
loaded: true,
|
|
},
|
|
])
|
|
}, [])
|
|
|
|
const root = useMemo(() => {
|
|
return isElmWindow(scrollableElement) ? document.body : scrollableElement
|
|
}, [scrollableElement])
|
|
|
|
return (
|
|
<InView
|
|
as="h2"
|
|
threshold={0.4}
|
|
skip={!addToSidebar}
|
|
initialInView={false}
|
|
{...props}
|
|
onChange={handleViewChange}
|
|
id={id}
|
|
root={root}
|
|
>
|
|
{children}
|
|
</InView>
|
|
)
|
|
}
|
|
|
|
export default H2
|