1import React from 'react';
2
3import { InlineCode } from '~/components/base/code';
4import { B } from '~/components/base/paragraph';
5import { H2, H3Code } from '~/components/plugins/Headings';
6import {
7  CommentData,
8  InterfaceDefinitionData,
9  MethodSignatureData,
10  PropData,
11} from '~/components/plugins/api/APIDataTypes';
12import {
13  CommentTextBlock,
14  mdInlineComponents,
15  renderFlags,
16  renderParam,
17  renderTypeOrSignatureType,
18  resolveTypeName,
19} from '~/components/plugins/api/APISectionUtils';
20
21export type APISectionInterfacesProps = {
22  data: InterfaceDefinitionData[];
23};
24
25const renderInterfaceComment = (comment?: CommentData, signatures?: MethodSignatureData[]) => {
26  if (signatures && signatures.length) {
27    const { type, parameters, comment: signatureComment } = signatures[0];
28    return (
29      <>
30        {parameters?.length ? parameters.map(param => renderParam(param)) : null}
31        <B>Returns: </B>
32        <InlineCode>{resolveTypeName(type)}</InlineCode>
33        {signatureComment && (
34          <>
35            <br />
36            <CommentTextBlock comment={signatureComment} components={mdInlineComponents} />
37          </>
38        )}
39      </>
40    );
41  } else {
42    return comment ? <CommentTextBlock comment={comment} components={mdInlineComponents} /> : '-';
43  }
44};
45
46const renderInterfacePropertyRow = ({
47  name,
48  flags,
49  type,
50  comment,
51  signatures,
52}: PropData): JSX.Element => (
53  <tr key={name}>
54    <td>
55      <B>
56        {name}
57        {signatures && signatures.length ? '()' : ''}
58      </B>
59      {renderFlags(flags)}
60    </td>
61    <td>{renderTypeOrSignatureType(type, signatures)}</td>
62    <td>{renderInterfaceComment(comment, signatures)}</td>
63  </tr>
64);
65
66const renderInterface = ({
67  name,
68  children,
69  comment,
70}: InterfaceDefinitionData): JSX.Element | null =>
71  children ? (
72    <div key={`interface-definition-${name}`}>
73      <H3Code>
74        <InlineCode>{name}</InlineCode>
75      </H3Code>
76      <CommentTextBlock comment={comment} />
77      <table>
78        <thead>
79          <tr>
80            <th>Name</th>
81            <th>Type</th>
82            <th>Description</th>
83          </tr>
84        </thead>
85        <tbody>{children.map(renderInterfacePropertyRow)}</tbody>
86      </table>
87    </div>
88  ) : null;
89
90const APISectionInterfaces = ({ data }: APISectionInterfacesProps) =>
91  data?.length ? (
92    <>
93      <H2 key="interfaces-header">Interfaces</H2>
94      {data.map(renderInterface)}
95    </>
96  ) : null;
97
98export default APISectionInterfaces;
99