1import React from 'react';
2import ReactMarkdown from 'react-markdown';
3
4import { InlineCode } from '~/components/base/code';
5import { LI, UL } from '~/components/base/list';
6import { B, Quote } from '~/components/base/paragraph';
7import { H2, H3Code, H4 } from '~/components/plugins/Headings';
8import { MethodDefinitionData, MethodSignatureData } from '~/components/plugins/api/APIDataTypes';
9import {
10  CommentTextBlock,
11  mdRenderers,
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): 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          {name}({parameters?.map(param => param.name).join(', ')})
34        </InlineCode>
35      </H3Code>
36      {comment?.tags
37        ?.filter(tag => tag.tag === 'deprecated')
38        .map(tag => (
39          <Quote>
40            <B>{tag.text}</B>
41          </Quote>
42        ))}
43      {parameters ? <H4>Arguments</H4> : null}
44      {parameters ? <UL>{parameters?.map(renderParam)}</UL> : null}
45      <CommentTextBlock comment={comment} />
46      {resolveTypeName(type) !== 'undefined' ? (
47        <div>
48          <H4>Returns</H4>
49          <UL>
50            <LI returnType>
51              <InlineCode>{resolveTypeName(type)}</InlineCode>
52            </LI>
53          </UL>
54          {comment?.returns ? (
55            <ReactMarkdown renderers={mdRenderers}>{comment.returns}</ReactMarkdown>
56          ) : null}
57        </div>
58      ) : null}
59      {index + 1 !== dataLength ? <hr /> : null}
60    </div>
61  ));
62
63const APISectionMethods: React.FC<APISectionMethodsProps> = ({
64  data,
65  apiName,
66  header = 'Methods',
67}) =>
68  data?.length ? (
69    <>
70      <H2 key="methods-header">{header}</H2>
71      {data.map((method, index) => renderMethod(method, index, data.length, apiName))}
72    </>
73  ) : null;
74
75export default APISectionMethods;
76