1import { css } from '@emotion/react';
2import { theme } from '@expo/styleguide';
3import React from 'react';
4
5import { InlineCode } from '~/components/base/code';
6import { LI, UL } from '~/components/base/list';
7import { P } from '~/components/base/paragraph';
8import { H2, H3Code } from '~/components/plugins/Headings';
9import { EnumDefinitionData, EnumValueData } from '~/components/plugins/api/APIDataTypes';
10import { CommentTextBlock, mdInlineComponents } from '~/components/plugins/api/APISectionUtils';
11
12export type APISectionEnumsProps = {
13  data: EnumDefinitionData[];
14};
15
16const STYLES_ENUM_VALUE = css({ color: theme.text.secondary, fontSize: '75%' });
17
18const sortByValue = (a: EnumValueData, b: EnumValueData) => {
19  if (a.defaultValue && b.defaultValue) {
20    if (a.defaultValue.includes(`'`) && b.defaultValue.includes(`'`)) {
21      return a.defaultValue.localeCompare(b.defaultValue);
22    } else {
23      return parseInt(a.defaultValue, 10) - parseInt(b.defaultValue, 10);
24    }
25  }
26  return 0;
27};
28
29const renderEnum = ({ name, children, comment }: EnumDefinitionData): JSX.Element => (
30  <div key={`enum-definition-${name}`}>
31    <H3Code>
32      <InlineCode>{name}</InlineCode>
33    </H3Code>
34    <CommentTextBlock comment={comment} />
35    <UL>
36      {children.sort(sortByValue).map((enumValue: EnumValueData) => (
37        <LI key={enumValue.name}>
38          <span css={{ fontSize: '120%' }}>
39            <InlineCode>{enumValue.name}</InlineCode>
40          </span>
41          {enumValue.comment ? (
42            <CommentTextBlock
43              comment={enumValue.comment}
44              components={mdInlineComponents}
45              withDash
46            />
47          ) : null}
48          {enumValue?.defaultValue && (
49            <P>
50              <InlineCode customCss={STYLES_ENUM_VALUE}>
51                {name}.{enumValue.name} ＝ {enumValue?.defaultValue}
52              </InlineCode>
53            </P>
54          )}
55        </LI>
56      ))}
57    </UL>
58  </div>
59);
60
61const APISectionEnums = ({ data }: APISectionEnumsProps) =>
62  data?.length ? (
63    <>
64      <H2 key="enums-header">Enums</H2>
65      {data.map(renderEnum)}
66    </>
67  ) : null;
68
69export default APISectionEnums;
70