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  InterfaceValueData,
10  MethodSignatureData,
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.map(param => renderParam(param))}
31        <B>Returns: </B>
32        <InlineCode>{resolveTypeName(type)}</InlineCode>
33        {signatureComment && (
34          <CommentTextBlock comment={signatureComment} components={mdInlineComponents} />
35        )}
36      </>
37    );
38  } else {
39    return comment ? <CommentTextBlock comment={comment} components={mdInlineComponents} /> : '-';
40  }
41};
42
43const renderInterfacePropertyRow = ({
44  name,
45  flags,
46  type,
47  comment,
48  signatures,
49}: InterfaceValueData): JSX.Element => (
50  <tr key={name}>
51    <td>
52      <B>
53        {name}
54        {signatures && signatures.length ? '()' : ''}
55      </B>
56      {renderFlags(flags)}
57    </td>
58    <td>{renderTypeOrSignatureType(type, signatures)}</td>
59    <td>{renderInterfaceComment(comment, signatures)}</td>
60  </tr>
61);
62
63const renderInterface = ({
64  name,
65  children,
66  comment,
67}: InterfaceDefinitionData): JSX.Element | null =>
68  children ? (
69    <div key={`interface-definition-${name}`}>
70      <H3Code>
71        <InlineCode>{name}</InlineCode>
72      </H3Code>
73      <CommentTextBlock comment={comment} />
74      <table>
75        <thead>
76          <tr>
77            <th>Name</th>
78            <th>Type</th>
79            <th>Description</th>
80          </tr>
81        </thead>
82        <tbody>{children.map(renderInterfacePropertyRow)}</tbody>
83      </table>
84    </div>
85  ) : null;
86
87const APISectionInterfaces = ({ data }: APISectionInterfacesProps) =>
88  data?.length ? (
89    <>
90      <H2 key="interfaces-header">Interfaces</H2>
91      {data.map(renderInterface)}
92    </>
93  ) : null;
94
95export default APISectionInterfaces;
96