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