1import ReactMarkdown from 'react-markdown';
2
3import {
4  ClassDefinitionData,
5  GeneratedData,
6  PropData,
7} from '~/components/plugins/api/APIDataTypes';
8import { APISectionDeprecationNote } from '~/components/plugins/api/APISectionDeprecationNote';
9import { renderMethod } from '~/components/plugins/api/APISectionMethods';
10import {
11  CommentTextBlock,
12  getTagData,
13  getTagNamesList,
14  mdComponents,
15  STYLES_APIBOX,
16  TypeDocKind,
17  H3Code,
18  getCommentContent,
19  BoxSectionHeader,
20} from '~/components/plugins/api/APISectionUtils';
21import { H2, CODE } from '~/ui/components/Text';
22
23export type APISectionNamespacesProps = {
24  data: GeneratedData[];
25};
26
27const isMethod = (child: PropData, allowOverwrites: boolean = false) =>
28  child.kind &&
29  [TypeDocKind.Method, TypeDocKind.Function].includes(child.kind) &&
30  (allowOverwrites || !child.overwrites) &&
31  !child.name.startsWith('_') &&
32  !child?.implementationOf;
33
34const renderNamespace = (namespace: ClassDefinitionData, exposeInSidebar: boolean): JSX.Element => {
35  const { name, comment, children } = namespace;
36
37  const methods = children
38    ?.filter(child => isMethod(child))
39    .sort((a: PropData, b: PropData) => a.name.localeCompare(b.name));
40  const returnComment = getTagData('returns', comment);
41
42  return (
43    <div key={`class-definition-${name}`} css={STYLES_APIBOX}>
44      <APISectionDeprecationNote comment={comment} />
45      <H3Code tags={getTagNamesList(comment)}>
46        <CODE>{name}</CODE>
47      </H3Code>
48      <CommentTextBlock comment={comment} />
49      {returnComment && (
50        <>
51          <BoxSectionHeader text="Returns" />
52          <ReactMarkdown components={mdComponents}>
53            {getCommentContent(returnComment.content)}
54          </ReactMarkdown>
55        </>
56      )}
57      {methods?.length ? (
58        <>
59          <BoxSectionHeader text={`${name} Methods`} exposeInSidebar={exposeInSidebar} />
60          {methods.map(method => renderMethod(method, { exposeInSidebar }))}
61        </>
62      ) : undefined}
63    </div>
64  );
65};
66
67const APISectionNamespaces = ({ data }: APISectionNamespacesProps) => {
68  if (data?.length) {
69    const exposeInSidebar = data.length < 2;
70    return (
71      <>
72        <H2>Namespaces</H2>
73        {data.map(namespace => renderNamespace(namespace, exposeInSidebar))}
74      </>
75    );
76  }
77  return null;
78};
79
80export default APISectionNamespaces;
81