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 = ({ name, children, comment }: InterfaceDefinitionData): JSX.Element => (
49  <div key={`interface-definition-${name}`}>
50    <H3Code>
51      <InlineCode>{name}</InlineCode>
52    </H3Code>
53    <CommentTextBlock comment={comment} />
54    <table>
55      <thead>
56        <tr>
57          <th>Name</th>
58          <th>Type</th>
59          <th>Description</th>
60        </tr>
61      </thead>
62      <tbody>{children.map(renderInterfacePropertyRow)}</tbody>
63    </table>
64  </div>
65);
66
67const APISectionInterfaces: React.FC<APISectionInterfacesProps> = ({ data }) =>
68  data?.length ? (
69    <>
70      <H2 key="interfaces-header">Interfaces</H2>
71      {data.map(renderInterface)}
72    </>
73  ) : null;
74
75export default APISectionInterfaces;
76