/
index.tsx
68 lines (64 loc) · 2.71 KB
/
index.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
57
58
59
60
61
62
63
64
65
66
67
68
import { classNames, wbr } from "../../lib";
import type { DefaultThemeRenderContext } from "../DefaultThemeRenderContext";
import { JSX } from "../../../../utils";
import type { ContainerReflection, ReflectionCategory } from "../../../../models";
import { icons } from "./icon";
function renderCategory({ urlTo }: DefaultThemeRenderContext, item: ReflectionCategory, prependName = "") {
return (
<section class="tsd-index-section">
<h3 class="tsd-index-heading">{prependName ? `${prependName} - ${item.title}` : item.title}</h3>
<div class="tsd-index-list">
{item.children.map((item) => (
<>
<a
href={urlTo(item)}
class={classNames(
{ "tsd-index-link": true, deprecated: item.comment?.hasModifier("@deprecated") },
item.cssClasses
)}
>
{icons[item.kind]()}
<span>{item.name ? wbr(item.name) : <em>{wbr(item.kindString!)}</em>}</span>
</a>
{"\n"}
</>
))}
</div>
</section>
);
}
export function index(context: DefaultThemeRenderContext, props: ContainerReflection) {
let content: JSX.Element | JSX.Element[] = [];
if (props.categories?.length) {
content = props.categories.map((item) => renderCategory(context, item));
} else if (props.groups?.length) {
content = props.groups.flatMap((item) =>
item.categories
? item.categories.map((item2) => renderCategory(context, item2, item.title))
: renderCategory(context, item)
);
}
content = <div class="tsd-accordion-details">{content}</div>;
// Accordion is only needed if any children don't have their own document.
if (
[...(props.groups ?? []), ...(props.categories ?? [])].some(
(category) => !category.allChildrenHaveOwnDocument()
)
) {
content = (
<details class="tsd-index-content tsd-index-accordion" open={true}>
<summary class="tsd-accordion-summary tsd-index-summary">
<h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex={0}>
{icons.chevronSmall()} Index
</h5>
</summary>
{content}
</details>
);
}
return (
<section class="tsd-panel-group tsd-index-group">
<section class="tsd-panel tsd-index-panel">{content}</section>
</section>
);
}