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 {
8  MethodDefinitionData,
9  MethodSignatureData,
10  PropData,
11} from '~/components/plugins/api/APIDataTypes';
12import {
13  CommentTextBlock,
14  listParams,
15  mdComponents,
16  renderParam,
17  resolveTypeName,
18} from '~/components/plugins/api/APISectionUtils';
19
20export type APISectionMethodsProps = {
21  data: MethodDefinitionData[];
22  apiName?: string;
23  header?: string;
24};
25
26export const renderMethod = (
27  { signatures = [] }: MethodDefinitionData | PropData,
28  index?: number,
29  dataLength?: number,
30  apiName?: string,
31  header?: string
32): JSX.Element[] =>
33  signatures.map(({ name, parameters, comment, type }: MethodSignatureData) => (
34    <div key={`method-signature-${name}-${parameters?.length || 0}`}>
35      <H3Code>
36        <InlineCode>
37          {apiName && `${apiName}.`}
38          {header !== 'Hooks' ? `${name}(${listParams(parameters)})` : 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          )
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 components={mdComponents}>{comment.returns}</ReactMarkdown>
62          )}
63        </div>
64      ) : null}
65      {index !== undefined ? index + 1 !== dataLength && <hr /> : null}
66    </div>
67  ));
68
69const APISectionMethods = ({ data, apiName, header = 'Methods' }: APISectionMethodsProps) =>
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