/
DocItem.tsx
142 lines (125 loc) · 4.93 KB
/
DocItem.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
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
133
134
135
136
137
138
139
140
141
142
import { VscSymbolParameter } from '@react-icons/all-files/vsc/VscSymbolParameter';
import { ConstructorNode } from './ConstructorNode';
import { DeprecatedNode } from './DeprecatedNode';
import { EnumMemberNode } from './EnumMemberNode';
import { EventNode } from './EventNode';
import { InformationNode } from './InformationNode';
import { MethodNode } from './MethodNode';
import { Outline } from './Outline';
import { OverlayScrollbarsComponent } from './OverlayScrollbars';
import { ParameterNode } from './ParameterNode';
import { PropertyNode } from './PropertyNode';
import { ReturnNode } from './ReturnNode';
import { SeeNode } from './SeeNode';
import { SummaryNode } from './SummaryNode';
import { SyntaxHighlighter } from './SyntaxHighlighter';
import { TypeParameterNode } from './TypeParameterNode';
import { UnionMember } from './UnionMember';
import { Tab, TabList, TabPanel, Tabs } from './ui/Tabs';
async function OverloadNode({
node,
packageName,
version,
}: {
readonly node: any;
readonly packageName: string;
readonly version: string;
}) {
return (
<Tabs className="flex flex-col gap-4">
<TabList className="flex gap-2">
{node.overloads.map((overload: any) => {
return (
<Tab
id={`overload-${overload.displayName}-${overload.overloadIndex}`}
key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`}
className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm font-normal leading-none text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
>
<span>Overload {overload.overloadIndex}</span>
</Tab>
);
})}
</TabList>
{node.overloads.map((overload: any) => {
return (
<TabPanel
id={`overload-${overload.displayName}-${overload.overloadIndex}`}
key={`overload-tab-panel-${overload.displayName}-${overload.overloadIndex}`}
className="flex flex-col gap-8"
>
<DocItem node={overload} packageName={packageName} version={version} />
</TabPanel>
);
})}
</Tabs>
);
}
export function DocItem({
node,
packageName,
version,
}: {
readonly node: any;
readonly packageName: string;
readonly version: string;
}) {
if (node.overloads?.length) {
return <OverloadNode node={node} packageName={packageName} version={version} />;
}
return (
<>
<InformationNode node={node} version={version} />
<OverlayScrollbarsComponent
defer
options={{
overflow: { y: 'hidden' },
scrollbars: { autoHide: 'scroll', autoHideDelay: 500, autoHideSuspend: true, clickScroll: true },
}}
className="rounded-md border border-neutral-300 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-900"
>
<SyntaxHighlighter className="py-4 text-sm" lang="typescript" code={node.sourceExcerpt} />
</OverlayScrollbarsComponent>
{node.summary?.deprecatedBlock.length ? (
<DeprecatedNode deprecatedBlock={node.summary.deprecatedBlock} version={version} />
) : null}
{node.summary?.summarySection ? <SummaryNode node={node.summary.summarySection} version={version} /> : null}
{node.summary?.returnsBlock.length ? <ReturnNode node={node.summary.returnsBlock} version={version} /> : null}
{node.summary?.seeBlocks.length ? <SeeNode node={node.summary.seeBlocks} version={version} /> : null}
<Outline node={node} />
{node.constructor?.parametersString ? <ConstructorNode node={node.constructor} version={version} /> : null}
{node.typeParameters?.length ? (
<div className="flex flex-col gap-8">
<h2 className="flex place-items-center gap-2 p-2 text-xl font-bold">
<VscSymbolParameter aria-hidden className="flex-shrink-0" size={24} />
Type Parameters
</h2>
<TypeParameterNode description node={node.typeParameters} version={version} />
</div>
) : null}
{node.parameters?.length ? (
<div className="flex flex-col gap-8">
<h2 className="flex place-items-center gap-2 p-2 text-xl font-bold">
<VscSymbolParameter aria-hidden className="flex-shrink-0" size={24} />
Parameters
</h2>
<ParameterNode description node={node.parameters} version={version} />
</div>
) : null}
{node.members?.properties?.length ? (
<PropertyNode node={node.members.properties} packageName={packageName} version={version} />
) : null}
{node.members?.methods?.length ? (
<div>
<MethodNode node={node.members.methods} packageName={packageName} version={version} />
</div>
) : null}
{node.members?.events?.length ? (
<div>
<EventNode node={node.members.events} packageName={packageName} version={version} />
</div>
) : null}
{node.members?.length ? <EnumMemberNode node={node.members} packageName={packageName} version={version} /> : null}
{node.unionMembers?.length ? <UnionMember node={node.unionMembers} version={version} /> : null}
</>
);
}