1import React from 'react';
2
3import { InlineCode } from '~/components/base/code';
4import { UL } from '~/components/base/list';
5import { B, P } from '~/components/base/paragraph';
6import { H2, H4 } from '~/components/plugins/Headings';
7import {
8  ClassDefinitionData,
9  GeneratedData,
10  PropData,
11} from '~/components/plugins/api/APIDataTypes';
12import { renderMethod } from '~/components/plugins/api/APISectionMethods';
13import { renderProp } from '~/components/plugins/api/APISectionProps';
14import {
15  CommentTextBlock,
16  resolveTypeName,
17  TypeDocKind,
18} from '~/components/plugins/api/APISectionUtils';
19
20export type APISectionClassesProps = {
21  data: GeneratedData[];
22};
23
24const renderProperty = (prop: PropData) => {
25  return prop.signatures?.length ? renderMethod(prop) : renderProp(prop, prop?.defaultValue, true);
26};
27
28const renderClass = (
29  { name, comment, type, extendedTypes, children }: ClassDefinitionData,
30  classCount: number
31): JSX.Element => {
32  const properties = children?.filter(
33    child => child.kind === TypeDocKind.Property && !child.overwrites && !child.name.startsWith('_')
34  );
35  const methods = children?.filter(child => child.kind === TypeDocKind.Method && !child.overwrites);
36  return (
37    <div key={`class-definition-${name}`}>
38      <H2>{name}</H2>
39      {extendedTypes?.length && (
40        <P>
41          <B>Type: </B>
42          {type ? <InlineCode>{resolveTypeName(type)}</InlineCode> : 'Class'}
43          <span> extends </span>
44          <InlineCode>{resolveTypeName(extendedTypes[0])}</InlineCode>
45        </P>
46      )}
47      <CommentTextBlock comment={comment} />
48      {properties?.length ? (
49        <>
50          {classCount === 1 ? <H2>{name} Properties</H2> : <H4>{name} Properties</H4>}
51          <UL>{properties.map(renderProperty)}</UL>
52        </>
53      ) : null}
54      {methods?.length ? (
55        <>
56          {classCount === 1 ? <H2>{name} Methods</H2> : <H4>{name} Methods</H4>}
57          <>{methods.map(renderProperty)}</>
58        </>
59      ) : null}
60    </div>
61  );
62};
63
64const APISectionClasses = ({ data }: APISectionClassesProps) =>
65  data?.length ? <>{data.map(cls => renderClass(cls, data?.length))}</> : null;
66
67export default APISectionClasses;
68