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