1import React from 'react';
2import ReactMarkdown from 'react-markdown';
3
4import { InlineCode } from '~/components/base/code';
5import { B } from '~/components/base/paragraph';
6import { H2, H3Code } from '~/components/plugins/Headings';
7import { InterfaceDefinitionData, InterfaceValueData } from '~/components/plugins/api/APIDataTypes';
8import {
9  CommentTextBlock,
10  mdInlineRenderers,
11  resolveTypeName,
12  STYLES_OPTIONAL,
13} from '~/components/plugins/api/APISectionUtils';
14
15export type APISectionInterfacesProps = {
16  data: InterfaceDefinitionData[];
17};
18
19const renderInterfacePropertyRow = ({
20  name,
21  flags,
22  type,
23  comment,
24}: InterfaceValueData): JSX.Element => (
25  <tr key={name}>
26    <td>
27      <B>{name}</B>
28      {flags?.isOptional ? (
29        <>
30          <br />
31          <span css={STYLES_OPTIONAL}>(optional)</span>
32        </>
33      ) : null}
34    </td>
35    <td>
36      <InlineCode>{resolveTypeName(type)}</InlineCode>
37    </td>
38    <td>
39      {comment?.shortText ? (
40        <ReactMarkdown renderers={mdInlineRenderers}>{comment.shortText}</ReactMarkdown>
41      ) : (
42        '-'
43      )}
44    </td>
45  </tr>
46);
47
48const renderInterface = ({
49  name,
50  children,
51  comment,
52}: InterfaceDefinitionData): JSX.Element | null =>
53  children ? (
54    <div key={`interface-definition-${name}`}>
55      <H3Code>
56        <InlineCode>{name}</InlineCode>
57      </H3Code>
58      <CommentTextBlock comment={comment} />
59      <table>
60        <thead>
61          <tr>
62            <th>Name</th>
63            <th>Type</th>
64            <th>Description</th>
65          </tr>
66        </thead>
67        <tbody>{children.map(renderInterfacePropertyRow)}</tbody>
68      </table>
69    </div>
70  ) : null;
71
72const APISectionInterfaces: React.FC<APISectionInterfacesProps> = ({ data }) =>
73  data?.length ? (
74    <>
75      <H2 key="interfaces-header">Interfaces</H2>
76      {data.map(renderInterface)}
77    </>
78  ) : null;
79
80export default APISectionInterfaces;
81