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