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