Skip to content

Commit

Permalink
add Summary component, cleanup PropertyDiscriminator and SchemaNodeDe…
Browse files Browse the repository at this point in the history 
…tails
  • Loading branch information
@sserrata
sserrata committed Oct 3, 2024
1 parent 0ce96dd commit d4cf52f
Showing 1 changed file with 69 additions and 65 deletions.
134 changes: 69 additions & 65 deletions packages/docusaurus-theme-openapi-docs/src/theme/Schema/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,54 @@ const Markdown: React.FC<MarkdownProps> = ({ text }) => {
);
};

interface SummaryProps {
name: string;
schemaName: string | undefined;
schema: {
deprecated?: boolean;
nullable?: boolean;
};
required?: boolean | string[];
}

const Summary: React.FC<SummaryProps> = ({
name,
schemaName,
schema,
required,
}) => {
const { deprecated, nullable } = schema;

const isRequired = Array.isArray(required)
? required.includes(name)
: required === true;

return (
<summary>
<span className="openapi-schema__container">
<strong
className={clsx("openapi-schema__property", {
"openapi-schema__strikethrough": deprecated,
})}
>
{name}
</strong>
<span className="openapi-schema__name"> {schemaName}</span>
{(isRequired || deprecated || nullable) && (
<span className="openapi-schema__divider" />
)}
{nullable && <span className="openapi-schema__nullable">nullable</span>}
{isRequired && (
<span className="openapi-schema__required">required</span>
)}
{deprecated && (
<span className="openapi-schema__deprecated">deprecated</span>
)}
</span>
</summary>
);
};

// Common props interface
interface SchemaProps {
schema: SchemaObject;
Expand Down Expand Up @@ -199,10 +247,12 @@ const PropertyDiscriminator: React.FC<SchemaEdgeProps> = ({
<span className="openapi-schema__required">required</span>
)}
</span>
{schema.description && <Markdown text={schema.description} />}
{getQualifierMessage(discriminator) && (
<Markdown text={getQualifierMessage(discriminator)} />
)}
<div style={{ marginLeft: "1rem" }}>
{schema.description && <Markdown text={schema.description} />}
{getQualifierMessage(discriminator) && (
<Markdown text={getQualifierMessage(discriminator)} />
)}
</div>
<DiscriminatorTabs className="openapi-tabs__discriminator">
{Object.keys(discriminator.mapping).map((key, index) => (
// @ts-ignore
Expand Down Expand Up @@ -259,7 +309,7 @@ const AdditionalProperties: React.FC<SchemaProps> = ({
additionalProperties.title || getSchemaName(additionalProperties);
const required = schema.required || false;
return (
<DetailsNode
<SchemaNodeDetails
name="property name*"
schemaName={title}
required={required}
Expand Down Expand Up @@ -296,76 +346,30 @@ const AdditionalProperties: React.FC<SchemaProps> = ({
return null;
};

interface DetailsNodeProps {
name: string;
schemaName: string;
schema: SchemaObject;
required: boolean | string[] | undefined;
nullable: boolean | undefined;
schemaType: "request" | "response";
}

const DetailsNode: React.FC<DetailsNodeProps> = ({
const SchemaNodeDetails: React.FC<SchemaEdgeProps> = ({
name,
schemaName,
schema,
required,
nullable,
schemaType,
}) => {
return (
<SchemaItem collapsible={true}>
<Details
className="openapi-markdown__details"
summary={
<summary>
<span className="openapi-schema__container">
<strong
className={clsx("openapi-schema__property", {
"openapi-schema__strikethrough": schema.deprecated,
})}
>
{name}
</strong>
<span className="openapi-schema__name"> {schemaName}</span>
{(Array.isArray(required)
? required.includes(name)
: required === true) ||
schema.deprecated ||
nullable ? (
<span className="openapi-schema__divider" />
) : null}
{nullable && (
<span className="openapi-schema__nullable">nullable</span>
)}
{Array.isArray(required) ? (
required.includes(name)
) : required === true ? (
<span className="openapi-schema__required">required</span>
) : null}
{schema.deprecated && (
<span className="openapi-schema__deprecated">deprecated</span>
)}
</span>
</summary>
<Summary
name={name}
schemaName={schemaName}
schema={schema}
required={required}
/>
}
>
<div style={{ marginLeft: "1rem" }}>
{schema.description && (
<div style={{ marginTop: ".5rem", marginBottom: ".5rem" }}>
<ReactMarkdown
children={createDescription(schema.description)}
rehypePlugins={[rehypeRaw]}
/>
</div>
)}
{schema.description && <Markdown text={schema.description} />}
{getQualifierMessage(schema) && (
<div style={{ marginTop: ".5rem", marginBottom: ".5rem" }}>
<ReactMarkdown
children={createDescription(getQualifierMessage(schema))}
rehypePlugins={[rehypeRaw]}
/>
</div>
<Markdown text={getQualifierMessage(schema)} />
)}
<SchemaNode schema={schema} schemaType={schemaType} />
</div>
Expand Down Expand Up @@ -545,7 +549,7 @@ const SchemaEdge: React.FC<SchemaEdgeProps> = ({

if (schema.items?.properties) {
return (
<DetailsNode
<SchemaNodeDetails
name={name}
schemaName={schemaName}
required={required}
Expand All @@ -558,7 +562,7 @@ const SchemaEdge: React.FC<SchemaEdgeProps> = ({

if (schema.items?.anyOf || schema.items?.oneOf) {
return (
<DetailsNode
<SchemaNodeDetails
name={name}
schemaName={schemaName}
required={required}
Expand All @@ -585,7 +589,7 @@ const SchemaEdge: React.FC<SchemaEdgeProps> = ({

if (mergedSchemas.oneOf || mergedSchemas.anyOf) {
return (
<DetailsNode
<SchemaNodeDetails
name={name}
schemaName={mergedSchemaName}
required={required}
Expand All @@ -598,7 +602,7 @@ const SchemaEdge: React.FC<SchemaEdgeProps> = ({

if (mergedSchemas.properties !== undefined) {
return (
<DetailsNode
<SchemaNodeDetails
name={name}
schemaName={mergedSchemaName}
required={required}
Expand All @@ -610,7 +614,7 @@ const SchemaEdge: React.FC<SchemaEdgeProps> = ({
}

if (mergedSchemas.items?.properties) {
<DetailsNode
<SchemaNodeDetails
name={name}
schemaName={mergedSchemaName}
required={required}
Expand Down

0 comments on commit d4cf52f

Please sign in to comment.