Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | import { Box, Flex, Grid } from "@chakra-ui/react";
import { FunctionComponent, useEffect } from "react";
import {
Route,
Switch,
useRouteMatch,
useLocation,
Redirect,
} from "react-router-dom";
import { ChooseSubmodule } from "./ChooseSubmodule";
import { API_URL_RESOURCE, DOCS_CONTAINER_ID } from "./constants";
import { NavDrawer } from "./NavDrawer";
import { PackageReadme } from "./PackageReadme";
import { usePackageState } from "./PackageState";
import { PackageTypeDocs } from "./PackageTypeDocs";
import { PrimaryDocNavigation } from "./PrimaryDocNavigation";
import { SecondaryDocNavigation } from "./SecondaryDocNavigation";
import { StickyNavContainer } from "./StickyNavContainer";
// We want the nav to be sticky, but it should account for the sticky heading as well, which is 72px
const TOP_OFFSET = "4.5rem";
const DOCS_ROOT_ID = "apidocs_header";
const SubmoduleSelector: FunctionComponent = () => {
const {
assembly: { data },
} = usePackageState();
return Object.keys(data?.submodules ?? {}).length > 0 ? (
<Flex
borderBottom="1px solid"
borderColor="borderColor"
justify="center"
py={4}
>
<ChooseSubmodule />
</Flex>
) : null;
};
export const PackageDocs: FunctionComponent = () => {
const { path } = useRouteMatch();
const { markdownDocs } = usePackageState();
const { hash, pathname, search } = useLocation();
useEffect(() => {
window.requestAnimationFrame(() => {
if (hash) {
const target = document.querySelector(
`[data-heading-id="${hash}"]`
) as HTMLElement;
target?.scrollIntoView(true);
} else {
window.scrollTo(0, 0);
}
});
// Subscribe to doc loading state so that we run this effect after docs load as well
}, [hash, pathname, markdownDocs.isLoading]);
return (
<Grid
columnGap={4}
h="full"
templateColumns={{
base: "1fr",
lg: "minmax(20rem, 1fr) 3fr minmax(16rem, 0.9fr)",
}}
width="100%"
>
{/* Primary Nav */}
<StickyNavContainer
borderRight="1px solid"
borderRightColor="borderColor"
offset={TOP_OFFSET}
pl={6}
pr={4}
top={TOP_OFFSET}
>
<SubmoduleSelector />
<Box overflowY="auto" py={4}>
<PrimaryDocNavigation />
</Box>
</StickyNavContainer>
{/* Docs */}
<Box
h="max-content"
id={DOCS_CONTAINER_ID}
maxWidth="100%"
overflow="hidden"
py={4}
sx={{
a: {
scrollMarginTop: TOP_OFFSET,
},
}}
>
<Switch>
<Redirect
exact
from={`${path}/${API_URL_RESOURCE}`}
to={{ pathname: path, search }}
/>
<Route exact path={path}>
<PackageReadme />
</Route>
<Route exact path={`${path}/${API_URL_RESOURCE}/:typeId`}>
<PackageTypeDocs rootId={DOCS_ROOT_ID} />
</Route>
</Switch>
</Box>
{/* Secondary Nav */}
<StickyNavContainer
borderLeft="1px solid"
borderLeftColor="borderColor"
offset={TOP_OFFSET}
pl={6}
pr={4}
top={TOP_OFFSET}
>
<Box overflowY="auto" py={4}>
<SecondaryDocNavigation />
</Box>
</StickyNavContainer>
<NavDrawer />
</Grid>
);
};
|