1import React from 'react';
2
3import { InlineCode } from '~/components/base/code';
4import { LI, UL } from '~/components/base/list';
5import { H2, H3Code } from '~/components/plugins/Headings';
6import { EnumDefinitionData, EnumValueData } from '~/components/plugins/api/APIDataTypes';
7import { CommentTextBlock, mdInlineRenderers } from '~/components/plugins/api/APISectionUtils';
8
9export type APISectionEnumsProps = {
10  data: EnumDefinitionData[];
11};
12
13const renderEnum = ({ name, children, comment }: EnumDefinitionData): JSX.Element => (
14  <div key={`enum-definition-${name}`}>
15    <H3Code>
16      <InlineCode>{name}</InlineCode>
17    </H3Code>
18    <CommentTextBlock comment={comment} />
19    <UL>
20      {children.map((enumValue: EnumValueData) => (
21        <LI key={enumValue.name}>
22          <InlineCode>
23            {name}.{enumValue.name}
24          </InlineCode>
25          <CommentTextBlock comment={enumValue.comment} renderers={mdInlineRenderers} withDash />
26        </LI>
27      ))}
28    </UL>
29  </div>
30);
31
32const APISectionEnums: React.FC<APISectionEnumsProps> = ({ data }) =>
33  data?.length ? (
34    <>
35      <H2 key="enums-header">Enums</H2>
36      {data.map(renderEnum)}
37    </>
38  ) : null;
39
40export default APISectionEnums;
41