From 7c15f509b7a28dc7948ba58de289493691cb6eef Mon Sep 17 00:00:00 2001 From: Vladimir Gorej Date: Tue, 25 Apr 2023 14:27:31 +0200 Subject: [PATCH] feat(json-schema-2020-12): add support for defaultExpandedLevels opt optimizeExpansion config option was introduced as well to support rendering extensive or very complex schemas. Refs #8513 --- .../components/JSONSchema/JSONSchema.jsx | 82 ++++++++++--------- .../components/JSONSchema/_json-schema.scss | 4 + .../components/keywords/$defs.jsx | 40 +++++---- .../keywords/$vocabulary/$vocabulary.jsx | 9 +- .../keywords/AdditionalProperties.jsx | 7 +- .../components/keywords/AllOf.jsx | 51 ++++++++---- .../components/keywords/AnyOf.jsx | 51 ++++++++---- .../components/keywords/Contains.jsx | 8 +- .../components/keywords/DependentSchemas.jsx | 38 +++++---- .../components/keywords/Else.jsx | 5 +- .../components/keywords/If.jsx | 5 +- .../components/keywords/Items.jsx | 6 +- .../components/keywords/Not.jsx | 5 +- .../components/keywords/OneOf.jsx | 51 ++++++++---- .../PatternProperties/PatternProperties.jsx | 6 +- .../components/keywords/PrefixItems.jsx | 51 ++++++++---- .../keywords/Properties/Properties.jsx | 6 +- .../components/keywords/PropertyNames.jsx | 8 +- .../components/keywords/Then.jsx | 5 +- .../components/keywords/UnevaluatedItems.jsx | 9 +- .../keywords/UnevaluatedProperties.jsx | 9 +- .../components/keywords/_all.scss | 6 +- src/core/plugins/json-schema-2020-12/hoc.jsx | 17 ++++ src/core/plugins/json-schema-2020-12/hooks.js | 6 +- src/core/plugins/oas31/components/models.jsx | 27 ++++-- .../plugins/oas31/wrap-components/models.jsx | 5 +- 26 files changed, 343 insertions(+), 174 deletions(-) diff --git a/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx b/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx index ea62e825..937403eb 100644 --- a/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx +++ b/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx @@ -9,6 +9,7 @@ import * as propTypes from "../../prop-types" import { useComponent, useLevel, + useConfig, useFn, useIsEmbedded, useIsExpandedDeeply, @@ -23,6 +24,7 @@ import { const JSONSchema = forwardRef(({ schema, name }, ref) => { const fn = useFn() + const config = useConfig() const isExpandedDeeply = useIsExpandedDeeply() const [expanded, setExpanded] = useState(isExpandedDeeply) const [expandedDeeply, setExpandedDeeply] = useState(false) @@ -120,43 +122,49 @@ const JSONSchema = forwardRef(({ schema, name }, ref) => { - {expanded && ( -
- - {!isCircular && isExpandable && ( - <> - - - - - - - - - - - - - - - - - - - )} - - - - - - - {!isCircular && isExpandable && ( - - )} - - -
- )} +
+ {!expanded && config.optimizeExpansion ? null : ( + <> + + {!isCircular && isExpandable && ( + <> + + + + + + + + + + + + + + + + + + + )} + + + + + + + {!isCircular && isExpandable && ( + + )} + + + + )} +
diff --git a/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss b/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss index 5fdb824d..4eb46b29 100644 --- a/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss +++ b/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss @@ -20,6 +20,10 @@ &-body { @include expansion-border; margin: 2px 0; + + &--collapsed { + display: none; + } } &__limit { diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/$defs.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/$defs.jsx index 7bc83188..d109b556 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/$defs.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/$defs.jsx @@ -2,18 +2,15 @@ * @prettier */ import React, { useCallback, useState } from "react" +import classNames from "classnames" import { schema } from "../../prop-types" -import { useComponent, useIsExpandedDeeply } from "../../hooks" +import { useConfig, useComponent, useIsExpandedDeeply } from "../../hooks" import { JSONSchemaDeepExpansionContext } from "../../context" const $defs = ({ schema }) => { const $defs = schema?.$defs || {} - - if (Object.keys($defs).length === 0) { - return null - } - + const config = useConfig() const isExpandedDeeply = useIsExpandedDeeply() const [expanded, setExpanded] = useState(isExpandedDeeply) const [expandedDeeply, setExpandedDeeply] = useState(false) @@ -32,6 +29,13 @@ const $defs = ({ schema }) => { setExpandedDeeply(expandedDeepNew) }, []) + /** + * Rendering. + */ + if (Object.keys($defs).length === 0) { + return null + } + return (
@@ -42,15 +46,21 @@ const $defs = ({ schema }) => { object - {expanded && ( -
    - {Object.entries($defs).map(([schemaName, schema]) => ( -
  • - -
    • - ))} -
- )} +
    + {!expanded && config.optimizeExpansion ? null : ( + <> + {Object.entries($defs).map(([schemaName, schema]) => ( +
  • + +
    • + ))} + + )} +
) diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx index b56b7003..8efe641d 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx @@ -8,9 +8,6 @@ import { schema } from "../../../prop-types" import { useComponent, useIsExpandedDeeply } from "../../../hooks" const $vocabulary = ({ schema }) => { - if (!schema?.$vocabulary) return null - if (typeof schema.$vocabulary !== "object") return null - const isExpandedDeeply = useIsExpandedDeeply() const [expanded, setExpanded] = useState(isExpandedDeeply) const Accordion = useComponent("Accordion") @@ -19,6 +16,12 @@ const $vocabulary = ({ schema }) => { setExpanded((prev) => !prev) }, []) + /** + * Rendering. + */ + if (!schema?.$vocabulary) return null + if (typeof schema.$vocabulary !== "object") return null + return (
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/AdditionalProperties.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/AdditionalProperties.jsx index bfbfcec2..8ba6999c 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/AdditionalProperties.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/AdditionalProperties.jsx @@ -8,11 +8,14 @@ import { useFn, useComponent } from "../../hooks" const AdditionalProperties = ({ schema }) => { const fn = useFn() + const { additionalProperties } = schema + const JSONSchema = useComponent("JSONSchema") if (!fn.hasKeyword(schema, "additionalProperties")) return null - const { additionalProperties } = schema - const JSONSchema = useComponent("JSONSchema") + /** + * Rendering. + */ const name = ( Additional properties diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/AllOf.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/AllOf.jsx index f6fb1fa8..de4cbd75 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/AllOf.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/AllOf.jsx @@ -2,19 +2,21 @@ * @prettier */ import React, { useCallback, useState } from "react" +import classNames from "classnames" import { schema } from "../../prop-types" -import { useFn, useComponent, useIsExpandedDeeply } from "../../hooks" +import { + useFn, + useConfig, + useComponent, + useIsExpandedDeeply, +} from "../../hooks" import { JSONSchemaDeepExpansionContext } from "../../context" const AllOf = ({ schema }) => { const allOf = schema?.allOf || [] - - if (!Array.isArray(allOf) || allOf.length === 0) { - return null - } - const fn = useFn() + const config = useConfig() const isExpandedDeeply = useIsExpandedDeeply() const [expanded, setExpanded] = useState(isExpandedDeeply) const [expandedDeeply, setExpandedDeeply] = useState(false) @@ -34,6 +36,13 @@ const AllOf = ({ schema }) => { setExpandedDeeply(expandedDeepNew) }, []) + /** + * Rendering. + */ + if (!Array.isArray(allOf) || allOf.length === 0) { + return null + } + return (
@@ -44,18 +53,24 @@ const AllOf = ({ schema }) => { - {expanded && ( -
    - {allOf.map((schema, index) => ( -
  • - -
    • - ))} -
- )} +
    + {!expanded && config.optimizeExpansion ? null : ( + <> + {allOf.map((schema, index) => ( +
  • + +
    • + ))} + + )} +
) diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/AnyOf.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/AnyOf.jsx index 2b6041bc..28462bce 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/AnyOf.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/AnyOf.jsx @@ -2,19 +2,21 @@ * @prettier */ import React, { useCallback, useState } from "react" +import classNames from "classnames" import { schema } from "../../prop-types" -import { useFn, useComponent, useIsExpandedDeeply } from "../../hooks" +import { + useFn, + useConfig, + useComponent, + useIsExpandedDeeply, +} from "../../hooks" import { JSONSchemaDeepExpansionContext } from "../../context" const AnyOf = ({ schema }) => { const anyOf = schema?.anyOf || [] - - if (!Array.isArray(anyOf) || anyOf.length === 0) { - return null - } - const fn = useFn() + const config = useConfig() const isExpandedDeeply = useIsExpandedDeeply() const [expanded, setExpanded] = useState(isExpandedDeeply) const [expandedDeeply, setExpandedDeeply] = useState(false) @@ -34,6 +36,13 @@ const AnyOf = ({ schema }) => { setExpandedDeeply(expandedDeepNew) }, []) + /** + * Rendering. + */ + if (!Array.isArray(anyOf) || anyOf.length === 0) { + return null + } + return (
@@ -44,18 +53,24 @@ const AnyOf = ({ schema }) => { - {expanded && ( -
    - {anyOf.map((schema, index) => ( -
  • - -
    • - ))} -
- )} +
    + {!expanded && config.optimizeExpansion ? null : ( + <> + {anyOf.map((schema, index) => ( +
  • + +
    • + ))} + + )} +
) diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Contains.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/Contains.jsx index 1969e656..f58d4f50 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/Contains.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/Contains.jsx @@ -8,9 +8,6 @@ import { useFn, useComponent } from "../../hooks" const Contains = ({ schema }) => { const fn = useFn() - - if (!fn.hasKeyword(schema, "contains")) return null - const JSONSchema = useComponent("JSONSchema") const name = ( @@ -18,6 +15,11 @@ const Contains = ({ schema }) => { ) + /** + * Rendering. + */ + if (!fn.hasKeyword(schema, "contains")) return null + return (
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/DependentSchemas.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/DependentSchemas.jsx index c9e326dd..cc06399b 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/DependentSchemas.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/DependentSchemas.jsx @@ -2,17 +2,15 @@ * @prettier */ import React, { useCallback, useState } from "react" +import classNames from "classnames" import { schema } from "../../prop-types" -import { useComponent, useIsExpandedDeeply } from "../../hooks" +import { useConfig, useComponent, useIsExpandedDeeply } from "../../hooks" import { JSONSchemaDeepExpansionContext } from "../../context" const DependentSchemas = ({ schema }) => { const dependentSchemas = schema?.dependentSchemas || [] - - if (typeof dependentSchemas !== "object") return null - if (Object.keys(dependentSchemas).length === 0) return null - + const config = useConfig() const isExpandedDeeply = useIsExpandedDeeply() const [expanded, setExpanded] = useState(isExpandedDeeply) const [expandedDeeply, setExpandedDeeply] = useState(false) @@ -31,6 +29,12 @@ const DependentSchemas = ({ schema }) => { setExpandedDeeply(expandedDeepNew) }, []) + /** + * Rendering. + */ + if (typeof dependentSchemas !== "object") return null + if (Object.keys(dependentSchemas).length === 0) return null + return (
@@ -41,15 +45,21 @@ const DependentSchemas = ({ schema }) => { object - {expanded && ( -
    - {Object.entries(dependentSchemas).map(([schemaName, schema]) => ( -
  • - -
    • - ))} -
- )} +
    + {!expanded && config.optimizeExpansion ? null : ( + <> + {Object.entries(dependentSchemas).map(([schemaName, schema]) => ( +
  • + +
    • + ))} + + )} +
) diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Else.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/Else.jsx index 75bd6eec..25050a9a 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/Else.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/Else.jsx @@ -8,10 +8,13 @@ import { useFn, useComponent } from "../../hooks" const Else = ({ schema }) => { const fn = useFn() + const JSONSchema = useComponent("JSONSchema") + /** + * Rendering. + */ if (!fn.hasKeyword(schema, "else")) return null - const JSONSchema = useComponent("JSONSchema") const name = ( Else diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/If.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/If.jsx index ca935cac..3545cf5d 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/If.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/If.jsx @@ -8,10 +8,13 @@ import { useFn, useComponent } from "../../hooks" const If = ({ schema }) => { const fn = useFn() + const JSONSchema = useComponent("JSONSchema") + /** + * Rendering. + */ if (!fn.hasKeyword(schema, "if")) return null - const JSONSchema = useComponent("JSONSchema") const name = ( If diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Items.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/Items.jsx index 2802e9dd..cb2d7293 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/Items.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/Items.jsx @@ -7,9 +7,13 @@ import { schema } from "../../prop-types" import { useComponent } from "../../hooks" const Items = ({ schema }) => { + const JSONSchema = useComponent("JSONSchema") + + /** + * Rendering. + */ if (!schema?.items) return null - const JSONSchema = useComponent("JSONSchema") const name = ( Items diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Not.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/Not.jsx index 1ecb61d1..68577411 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/Not.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/Not.jsx @@ -8,10 +8,13 @@ import { useFn, useComponent } from "../../hooks" const Not = ({ schema }) => { const fn = useFn() + const JSONSchema = useComponent("JSONSchema") + /** + * Rendering. + */ if (!fn.hasKeyword(schema, "not")) return null - const JSONSchema = useComponent("JSONSchema") const name = ( Not diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/OneOf.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/OneOf.jsx index 7ec08e0b..56e1f477 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/OneOf.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/OneOf.jsx @@ -2,19 +2,21 @@ * @prettier */ import React, { useCallback, useState } from "react" +import classNames from "classnames" import { schema } from "../../prop-types" -import { useFn, useComponent, useIsExpandedDeeply } from "../../hooks" +import { + useFn, + useConfig, + useComponent, + useIsExpandedDeeply, +} from "../../hooks" import { JSONSchemaDeepExpansionContext } from "../../context" const OneOf = ({ schema }) => { const oneOf = schema?.oneOf || [] - - if (!Array.isArray(oneOf) || oneOf.length === 0) { - return null - } - const fn = useFn() + const config = useConfig() const isExpandedDeeply = useIsExpandedDeeply() const [expanded, setExpanded] = useState(isExpandedDeeply) const [expandedDeeply, setExpandedDeeply] = useState(false) @@ -34,6 +36,13 @@ const OneOf = ({ schema }) => { setExpandedDeeply(expandedDeepNew) }, []) + /** + * Rendering. + */ + if (!Array.isArray(oneOf) || oneOf.length === 0) { + return null + } + return (
@@ -44,18 +53,24 @@ const OneOf = ({ schema }) => { - {expanded && ( -
    - {oneOf.map((schema, index) => ( -
  • - -
    • - ))} -
- )} +
    + {!expanded && config.optimizeExpansion ? null : ( + <> + {oneOf.map((schema, index) => ( +
  • + +
    • + ))} + + )} +
) diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/PatternProperties/PatternProperties.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/PatternProperties/PatternProperties.jsx index 6b91b6dd..5c10c656 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/PatternProperties/PatternProperties.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/PatternProperties/PatternProperties.jsx @@ -8,13 +8,15 @@ import { useComponent } from "../../../hooks" const PatternProperties = ({ schema }) => { const patternProperties = schema?.patternProperties || {} + const JSONSchema = useComponent("JSONSchema") + /** + * Rendering. + */ if (Object.keys(patternProperties).length === 0) { return null } - const JSONSchema = useComponent("JSONSchema") - return (
    diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/PrefixItems.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/PrefixItems.jsx index 47ed17bd..f91804d3 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/PrefixItems.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/PrefixItems.jsx @@ -2,19 +2,21 @@ * @prettier */ import React, { useCallback, useState } from "react" +import classNames from "classnames" import { schema } from "../../prop-types" -import { useFn, useComponent, useIsExpandedDeeply } from "../../hooks" +import { + useFn, + useConfig, + useComponent, + useIsExpandedDeeply, +} from "../../hooks" import { JSONSchemaDeepExpansionContext } from "../../context" const PrefixItems = ({ schema }) => { const prefixItems = schema?.prefixItems || [] - - if (!Array.isArray(prefixItems) || prefixItems.length === 0) { - return null - } - const fn = useFn() + const config = useConfig() const isExpandedDeeply = useIsExpandedDeeply() const [expanded, setExpanded] = useState(isExpandedDeeply) const [expandedDeeply, setExpandedDeeply] = useState(false) @@ -34,6 +36,13 @@ const PrefixItems = ({ schema }) => { setExpandedDeeply(expandedDeepNew) }, []) + /** + * Rendering. + */ + if (!Array.isArray(prefixItems) || prefixItems.length === 0) { + return null + } + return (
    @@ -44,18 +53,24 @@ const PrefixItems = ({ schema }) => { - {expanded && ( -
      - {prefixItems.map((schema, index) => ( -
    • - -
      • - ))} -
    - )} +
      + {!expanded && config.optimizeExpansion ? null : ( + <> + {prefixItems.map((schema, index) => ( +
    • + +
      • + ))} + + )} +
    ) diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Properties/Properties.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/Properties/Properties.jsx index 938ec07a..06a4e082 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/Properties/Properties.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/Properties/Properties.jsx @@ -8,13 +8,15 @@ import { useComponent } from "../../../hooks" const Properties = ({ schema }) => { const properties = schema?.properties || {} + const JSONSchema = useComponent("JSONSchema") + /** + * Rendering. + */ if (Object.keys(properties).length === 0) { return null } - const JSONSchema = useComponent("JSONSchema") - return (
      diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/PropertyNames.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/PropertyNames.jsx index b84c0bd0..dfca5bc5 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/PropertyNames.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/PropertyNames.jsx @@ -8,9 +8,6 @@ import { useFn, useComponent } from "../../hooks" const PropertyNames = ({ schema }) => { const fn = useFn() - - if (!fn.hasKeyword(schema, "propertyNames")) return null - const { propertyNames } = schema const JSONSchema = useComponent("JSONSchema") const name = ( @@ -19,6 +16,11 @@ const PropertyNames = ({ schema }) => { ) + /** + * Rendering. + */ + if (!fn.hasKeyword(schema, "propertyNames")) return null + return (
      diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Then.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/Then.jsx index f3bfff67..0e05f462 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/Then.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/Then.jsx @@ -8,10 +8,13 @@ import { useFn, useComponent } from "../../hooks" const Then = ({ schema }) => { const fn = useFn() + const JSONSchema = useComponent("JSONSchema") + /** + * Rendering. + */ if (!fn.hasKeyword(schema, "then")) return null - const JSONSchema = useComponent("JSONSchema") const name = ( Then diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/UnevaluatedItems.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/UnevaluatedItems.jsx index 4c145d57..e9a1aa16 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/UnevaluatedItems.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/UnevaluatedItems.jsx @@ -8,11 +8,14 @@ import { useFn, useComponent } from "../../hooks" const UnevaluatedItems = ({ schema }) => { const fn = useFn() - - if (!fn.hasKeyword(schema, "unevaluatedItems")) return null - const { unevaluatedItems } = schema const JSONSchema = useComponent("JSONSchema") + + /** + * Rendering. + */ + if (!fn.hasKeyword(schema, "unevaluatedItems")) return null + const name = ( Unevaluated items diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/UnevaluatedProperties.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/UnevaluatedProperties.jsx index e10efee3..4fa6814d 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/UnevaluatedProperties.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/UnevaluatedProperties.jsx @@ -8,11 +8,14 @@ import { useFn, useComponent } from "../../hooks" const UnevaluatedProperties = ({ schema }) => { const fn = useFn() - - if (!fn.hasKeyword(schema, "unevaluatedProperties")) return null - const { unevaluatedProperties } = schema const JSONSchema = useComponent("JSONSchema") + + /** + * Rendering. + */ + if (!fn.hasKeyword(schema, "unevaluatedProperties")) return null + const name = ( Unevaluated properties diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/_all.scss b/src/core/plugins/json-schema-2020-12/components/keywords/_all.scss index 0fecfab8..54d8ef68 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/_all.scss +++ b/src/core/plugins/json-schema-2020-12/components/keywords/_all.scss @@ -1,9 +1,13 @@ .json-schema-2020-12-keyword { margin: 5px 0 5px 0; - & > ul { + &__children { @include expansion-border; padding: 0; + + &--collapsed { + display: none; + } } &__name { diff --git a/src/core/plugins/json-schema-2020-12/hoc.jsx b/src/core/plugins/json-schema-2020-12/hoc.jsx index ca42b0c9..48e42a0d 100644 --- a/src/core/plugins/json-schema-2020-12/hoc.jsx +++ b/src/core/plugins/json-schema-2020-12/hoc.jsx @@ -88,6 +88,23 @@ export const withJSONSchemaContext = (Component, overrides = {}) => { }, config: { default$schema: "https://json-schema.org/draft/2020-12/schema", + /** + * Defines an upper exclusive boundary of the level range for automatic expansion. + * + * 0 -> do nothing + * 1 -> [0]...(1) + * 2 -> [0]...(2) + * 3 -> [0]...(3) + */ + defaultExpandedLevels: 0, // 2 = 0...2 + /** + * Can be turned on for complex and extensive schemas. + * Child schemas are not rendered until parent schema is expanded. + * + * By default, entire schema tree is rendered and collapsed parts of the + * tree are hidden with css. + */ + optimizeExpansion: false, ...overrides.config, }, fn: { diff --git a/src/core/plugins/json-schema-2020-12/hooks.js b/src/core/plugins/json-schema-2020-12/hooks.js index 0e433671..2afd91eb 100644 --- a/src/core/plugins/json-schema-2020-12/hooks.js +++ b/src/core/plugins/json-schema-2020-12/hooks.js @@ -39,7 +39,11 @@ export const useIsEmbedded = () => { } export const useIsExpandedDeeply = () => { - return useContext(JSONSchemaDeepExpansionContext) + const [level] = useLevel() + const { defaultExpandedLevels } = useConfig() + const isExpandedByDefault = defaultExpandedLevels - level > 0 + + return isExpandedByDefault || useContext(JSONSchemaDeepExpansionContext) } export const useRenderedSchemas = (schema = undefined) => { diff --git a/src/core/plugins/oas31/components/models.jsx b/src/core/plugins/oas31/components/models.jsx index b3d65b74..8129cd71 100644 --- a/src/core/plugins/oas31/components/models.jsx +++ b/src/core/plugins/oas31/components/models.jsx @@ -15,6 +15,7 @@ const Models = ({ fn, }) => { const schemas = specSelectors.selectSchemas() + const hasSchemas = Object.keys(schemas).length > 0 const schemasPath = ["components", "schemas"] const { docExpansion, defaultModelsExpandDepth } = getConfigs() const isOpenDefault = defaultModelsExpandDepth > 0 && docExpansion !== "none" @@ -34,15 +35,19 @@ const Models = ({ /** * Event handlers. */ + const handleCollapse = useCallback(() => { layoutActions.show(schemasPath, !isOpen) - }, [layoutActions, schemasPath, isOpen]) + }, [isOpen, layoutActions]) - const handleModelsRef = useCallback((node) => { - if (node !== null) { - layoutActions.readyToScroll(schemasPath, node) - } - }, []) + const handleModelsRef = useCallback( + (node) => { + if (node !== null) { + layoutActions.readyToScroll(schemasPath, node) + } + }, + [layoutActions] + ) const handleJSONSchema202012Ref = (schemaName) => (node) => { if (node !== null) { @@ -50,6 +55,14 @@ const Models = ({ } } + /** + * Rendering. + */ + + if (!hasSchemas || defaultModelsExpandDepth < 0) { + return null + } + return (
      { - const { getComponent, fn } = getSystem() + const { getComponent, fn, getConfigs } = getSystem() + const configs = getConfigs() if (ModelsWrapper.ModelsWithJSONContext) { return @@ -61,7 +62,6 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => { "JSONSchema202012KeywordDescription", true ) - const Accordion = getComponent("JSONSchema202012Accordion") const ExpandDeepButton = getComponent("JSONSchema202012ExpandDeepButton") const ChevronRightIcon = getComponent("JSONSchema202012ChevronRightIcon") @@ -70,6 +70,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => { ModelsWrapper.ModelsWithJSONContext = withSchemaContext(Models, { config: { default$schema: "https://spec.openapis.org/oas/3.1/dialect/base", + defaultExpandedLevels: configs.defaultModelsExpandDepth - 1, }, components: { JSONSchema,