fa7c94b4cc
* docs: migrate ui docs to docs universe * created yarn workspace * added eslint and tsconfig configurations * fix eslint configurations * fixed eslint configurations * shared tailwind configurations * added shared ui package * added more shared components * migrating more components * made details components shared * move InlineCode component * moved InputText * moved Loading component * Moved Modal component * moved Select components * Moved Tooltip component * moved Search components * moved ColorMode provider * Moved Notification components and providers * used icons package * use UI colors in api-reference * moved Navbar component * used Navbar and Search in UI docs * added Feedback to UI docs * general enhancements * fix color mode * added copy colors file from ui-preset * added features and enhancements to UI docs * move Sidebar component and provider * general fixes and preparations for deployment * update docusaurus version * adjusted versions * fix output directory * remove rootDirectory property * fix yarn.lock * moved code component * added vale for all docs MD and MDX * fix tests * fix vale error * fix deployment errors * change ignore commands * add output directory * fix docs test * general fixes * content fixes * fix announcement script * added changeset * fix vale checks * added nofilter option * fix vale error
69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import { InView } from "react-intersection-observer"
|
|
import { useSidebar } from "docs-ui"
|
|
import checkElementInViewport from "../../../utils/check-element-in-viewport"
|
|
import { useEffect } 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 handleViewChange = (
|
|
inView: boolean,
|
|
entry: IntersectionObserverEntry
|
|
) => {
|
|
if (!addToSidebar) {
|
|
return
|
|
}
|
|
const heading = entry.target
|
|
if (
|
|
(inView ||
|
|
checkElementInViewport(heading.parentElement || heading, 40)) &&
|
|
window.scrollY !== 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,
|
|
},
|
|
])
|
|
}, [])
|
|
|
|
return (
|
|
<InView
|
|
as="h2"
|
|
threshold={0.4}
|
|
skip={!addToSidebar}
|
|
initialInView={false}
|
|
{...props}
|
|
onChange={handleViewChange}
|
|
id={id}
|
|
>
|
|
{children}
|
|
</InView>
|
|
)
|
|
}
|
|
|
|
export default H2
|