0f6f56e764
- Improve scroll behavior between active sections - Improve lag when clicking on a sidebar item - Refactor internal working of the `SidebarProvider` to find active items faster. - Use Next.js's `useRouter` hook for changing the hash (since they added the option to disable scroll) - Change `isBrowser` from a hook to a provider since it's widely used across applications. - Other general improvements and fixes. Closes DOCS-952
53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import clsx from "clsx"
|
|
import { useActiveOnScroll, useSidebar } from "docs-ui"
|
|
import { useRouter } from "next/navigation"
|
|
import { useEffect, useRef } from "react"
|
|
|
|
export type SectionProps = {
|
|
checkActiveOnScroll?: boolean
|
|
} & React.AllHTMLAttributes<HTMLDivElement>
|
|
|
|
const Section = ({
|
|
children,
|
|
className,
|
|
checkActiveOnScroll = false,
|
|
}: SectionProps) => {
|
|
const sectionRef = useRef<HTMLDivElement>(null)
|
|
const { activeItemId } = useActiveOnScroll({
|
|
rootElm: sectionRef.current || undefined,
|
|
enable: checkActiveOnScroll,
|
|
useDefaultIfNoActive: false,
|
|
})
|
|
const { setActivePath } = useSidebar()
|
|
const router = useRouter()
|
|
|
|
useEffect(() => {
|
|
if ("scrollRestoration" in history) {
|
|
// disable scroll on refresh
|
|
history.scrollRestoration = "manual"
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (activeItemId.length) {
|
|
router.push(`#${activeItemId}`, {
|
|
scroll: false,
|
|
})
|
|
setActivePath(activeItemId)
|
|
}
|
|
}, [activeItemId])
|
|
|
|
return (
|
|
<div
|
|
ref={sectionRef}
|
|
className={clsx("[&_ul]:list-disc [&_ul]:px-1", "[&_h2]:pt-7", className)}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Section
|