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  listParams,
11  mdComponents,
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' ? `${name}(${listParams(parameters)})` : name}
35        </InlineCode>
36      </H3Code>
37      <CommentTextBlock
38        comment={comment}
39        beforeContent={
40          parameters ? (
41            <>
42              <H4>Arguments</H4>
43              <UL>{parameters?.map(renderParam)}</UL>
44            </>
45          ) : undefined
46        }
47      />
48      {resolveTypeName(type) !== 'undefined' ? (
49        <div>
50          <H4>Returns</H4>
51          <UL>
52            <LI returnType>
53              <InlineCode>{resolveTypeName(type)}</InlineCode>
54            </LI>
55          </UL>
56          {comment?.returns ? (
57            <ReactMarkdown components={mdComponents}>{comment.returns}</ReactMarkdown>
58          ) : null}
59        </div>
60      ) : null}
61      {index + 1 !== dataLength ? <hr /> : null}
62    </div>
63  ));
64
65const APISectionMethods: React.FC<APISectionMethodsProps> = ({
66  data,
67  apiName,
68  header = 'Methods',
69}) =>
70  data?.length ? (
71    <>
72      <H2 key="methods-header">{header}</H2>
73      {data.map((method, index) => renderMethod(method, index, data.length, apiName, header))}
74    </>
75  ) : null;
76
77export default APISectionMethods;
78