fix: codelisting

This commit is contained in:
iCrawl
2022-08-17 21:24:38 +02:00
parent 2f1ec7401c
commit e147c5bd64
2 changed files with 31 additions and 11 deletions

View File

@@ -2,7 +2,9 @@ import { Badge, Group, Stack, Title } from '@mantine/core';
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import { HyperlinkedText } from './HyperlinkedText'; import { HyperlinkedText } from './HyperlinkedText';
import { TSDoc } from './tsdoc/TSDoc'; import { TSDoc } from './tsdoc/TSDoc';
import type { DocProperty } from '~/DocModel/DocProperty'; import type { DocItem } from '~/DocModel/DocItem';
import type { AnyDocNodeJSON } from '~/DocModel/comment/CommentNode';
import type { TokenDocumentation } from '~/util/parse.server';
export enum CodeListingSeparatorType { export enum CodeListingSeparatorType {
Type = ':', Type = ':',
@@ -10,30 +12,40 @@ export enum CodeListingSeparatorType {
} }
export function CodeListing({ export function CodeListing({
prop, name,
separator = CodeListingSeparatorType.Type, separator = CodeListingSeparatorType.Type,
typeTokens,
readonly = false,
optional = false,
summary,
comment,
children, children,
}: { }: {
prop: ReturnType<DocProperty['toJSON']>; name: string;
separator?: CodeListingSeparatorType; separator?: CodeListingSeparatorType;
typeTokens: TokenDocumentation[];
readonly?: boolean;
optional?: boolean;
summary?: ReturnType<DocItem['toJSON']>['summary'];
comment?: AnyDocNodeJSON | null;
children?: ReactNode; children?: ReactNode;
}) { }) {
return ( return (
<Stack spacing="xs" key={prop.name}> <Stack spacing="xs" key={name}>
<Group> <Group>
{prop.readonly ? <Badge variant="filled">Readonly</Badge> : null} {readonly ? <Badge variant="filled">Readonly</Badge> : null}
{prop.optional ? <Badge variant="filled">Optional</Badge> : null} {optional ? <Badge variant="filled">Optional</Badge> : null}
<Title order={4} className="font-mono"> <Title order={4} className="font-mono">
{prop.name} {name}
</Title> </Title>
<Title order={4}>{separator}</Title> <Title order={4}>{separator}</Title>
<Title order={4} className="font-mono break-all"> <Title order={4} className="font-mono break-all">
<HyperlinkedText tokens={prop.propertyTypeTokens} /> <HyperlinkedText tokens={typeTokens} />
</Title> </Title>
</Group> </Group>
<Group> <Group>
{prop.summary && <TSDoc node={prop.summary} />} {summary && <TSDoc node={summary} />}
{prop.comment && <TSDoc node={prop.comment} />} {comment && <TSDoc node={comment} />}
{children} {children}
</Group> </Group>
</Stack> </Stack>

View File

@@ -6,7 +6,15 @@ export function PropertyList({ data }: { data: ReturnType<DocProperty['toJSON']>
return ( return (
<Stack> <Stack>
{data.map((prop) => ( {data.map((prop) => (
<CodeListing key={prop.name} prop={prop} /> <CodeListing
key={prop.name}
name={prop.name}
typeTokens={prop.propertyTypeTokens}
readonly={prop.readonly}
optional={prop.optional}
summary={prop.summary}
comment={prop.comment}
/>
))} ))}
</Stack> </Stack>
); );