1import React from 'react';
2import ReactMarkdown from 'react-markdown';
3
4import { InlineCode } from '~/components/base/code';
5import { LI, UL } from '~/components/base/list';
6import { H2, H3Code, H4 } from '~/components/plugins/Headings';
7import { MethodDefinitionData, MethodSignatureData } from '~/components/plugins/api/APIDataTypes';
8import {
9  CommentTextBlock,
10  mdRenderers,
11  renderParam,
12  resolveTypeName,
13} from '~/components/plugins/api/APISectionUtils';
14
15export type APISectionMethodsProps = {
16  data: MethodDefinitionData[];
17  apiName?: string;
18  header?: string;
19};
20
21const renderMethod = (
22  { signatures }: MethodDefinitionData,
23  index: number,
24  dataLength?: number,
25  apiName?: string,
26  header?: string
27): JSX.Element[] =>
28  signatures.map(({ name, parameters, comment, type }: MethodSignatureData) => (
29    <div key={`method-signature-${name}-${parameters?.length || 0}`}>
30      <H3Code>
31        <InlineCode>
32          {apiName ? `${apiName}.` : ''}
33          {header !== 'Hooks'
34            ? `${name}(${parameters ? parameters?.map(param => param.name).join(', ') : ''})`
35            : name}
36        </InlineCode>
37      </H3Code>
38      <CommentTextBlock
39        comment={comment}
40        beforeContent={
41          parameters ? (
42            <>
43              <H4>Arguments</H4>
44              <UL>{parameters?.map(renderParam)}</UL>
45            </>
46          ) : undefined
47        }
48      />
49      {resolveTypeName(type) !== 'undefined' ? (
50        <div>
51          <H4>Returns</H4>
52          <UL>
53            <LI returnType>
54              <InlineCode>{resolveTypeName(type)}</InlineCode>
55            </LI>
56          </UL>
57          {comment?.returns ? (
58            <ReactMarkdown renderers={mdRenderers}>{comment.returns}</ReactMarkdown>
59          ) : null}
60        </div>
61      ) : null}
62      {index + 1 !== dataLength ? <hr /> : null}
63    </div>
64  ));
65
66const APISectionMethods: React.FC<APISectionMethodsProps> = ({
67  data,
68  apiName,
69  header = 'Methods',
70}) =>
71  data?.length ? (
72    <>
73      <H2 key="methods-header">{header}</H2>
74      {data.map((method, index) => renderMethod(method, index, data.length, apiName, header))}
75    </>
76  ) : null;
77
78export default APISectionMethods;
79