This repository has been archived by the owner on Jan 12, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 69
/
HeadersComponent.tsx
56 lines (47 loc) · 1.61 KB
/
HeadersComponent.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import React, { useRef, useContext } from "react";
import { useLockBodyScroll, useToggle } from "react-use";
import { plugins } from "@kyma-project/dc-markdown-render-engine";
import { GenericDocsContext } from "../../../services";
import { RenderedHeader } from "./RenderedHeader";
import { scrollSpyCallback, postProcessingHeaders } from "../helpers";
import { HeadersNavigationsWrapper, StyledHeadersNavigation } from "./styled";
const HN = plugins.HeadersNavigation;
export interface HeadersNavigationProps {
enableSmoothScroll?: boolean;
}
export const HeadersNavigation: React.FunctionComponent<HeadersNavigationProps> = ({
enableSmoothScroll = false,
children = null,
}) => {
const { showMobileRightNav } = useContext(GenericDocsContext);
const headersWrapperRef = useRef<HTMLDivElement>();
const [locked, toggleLocked] = useToggle(false);
useLockBodyScroll(locked);
const onMouseEnter = () => {
toggleLocked(true);
};
const onMouseLeave = () => {
toggleLocked(false);
};
return (
<HeadersNavigationsWrapper
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
ref={headersWrapperRef as any}
showMobileNav={showMobileRightNav}
className="headers-navigation-wrapper"
>
<HN
postProcessing={postProcessingHeaders}
enableSmoothScroll={enableSmoothScroll}
callback={scrollSpyCallback(headersWrapperRef)}
offset={16}
>
<StyledHeadersNavigation className="dc-markdown__toc-wrapper">
<RenderedHeader />
</StyledHeadersNavigation>
{children}
</HN>
</HeadersNavigationsWrapper>
);
};