From fe181ede902c3a27b38566e2d4c8a68f29b3c937 Mon Sep 17 00:00:00 2001 From: Vladimir Gorej Date: Wed, 19 Apr 2023 09:40:59 +0200 Subject: [PATCH] feat(json-schema-2020-12): detect expandable behavior Refs #8513 --- .../ExpandDeepButton/_expand-deep-button.scss | 1 + .../components/JSONSchema/JSONSchema.jsx | 21 ++++++++++++----- .../components/keywords/Properties.jsx | 3 +-- .../components/keywords/Title/_title.scss | 2 +- .../components/keywords/Type/_type.scss | 23 ++++++++++++++----- src/core/plugins/json-schema-2020-12/fn.js | 6 ++++- src/core/plugins/json-schema-2020-12/hoc.jsx | 9 +++++++- 7 files changed, 48 insertions(+), 17 deletions(-) diff --git a/src/core/plugins/json-schema-2020-12/components/ExpandDeepButton/_expand-deep-button.scss b/src/core/plugins/json-schema-2020-12/components/ExpandDeepButton/_expand-deep-button.scss index 476543c0e5a..7847ebef90f 100644 --- a/src/core/plugins/json-schema-2020-12/components/ExpandDeepButton/_expand-deep-button.scss +++ b/src/core/plugins/json-schema-2020-12/components/ExpandDeepButton/_expand-deep-button.scss @@ -3,4 +3,5 @@ font-size: 12px; color: rgb(175, 174, 174); border: none; + padding-right: 0; } 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 23ed1638793..5a15e3ef2cf 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, + useFn, useIsEmbedded, useIsExpandedDeeply, } from "../../hooks" @@ -18,11 +19,13 @@ import { } from "../../context" const JSONSchema = ({ schema, name }) => { + const fn = useFn() const isExpandedDeeply = useIsExpandedDeeply() const [expanded, setExpanded] = useState(isExpandedDeeply) const [expandedDeeply, setExpandedDeeply] = useState(false) const [level, nextLevel] = useLevel() const isEmbedded = useIsEmbedded() + const isExpandable = fn.isExpandable(schema) const Accordion = useComponent("Accordion") const KeywordProperties = useComponent("KeywordProperties") const KeywordType = useComponent("KeywordType") @@ -63,13 +66,19 @@ const JSONSchema = ({ schema, name }) => { })} >
- + {isExpandable ? ( + <> + + + + + + ) : ( - - + )}
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Properties.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/Properties.jsx index f2ba3844f3a..e0a4efa76f1 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/Properties.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/Properties.jsx @@ -4,10 +4,9 @@ import React from "react" import { schema } from "../../prop-types" -import { useFn, useComponent } from "../../hooks" +import { useComponent } from "../../hooks" const Properties = ({ schema }) => { - const fn = useFn() const JSONSchema = useComponent("JSONSchema") const properties = schema?.properties || {} diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Title/_title.scss b/src/core/plugins/json-schema-2020-12/components/keywords/Title/_title.scss index 11b5330cd2a..e4499aa31d5 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/Title/_title.scss +++ b/src/core/plugins/json-schema-2020-12/components/keywords/Title/_title.scss @@ -11,7 +11,7 @@ .json-schema-2020-12__title { @include text_code(); font-size: 12px; - vertical-align: bottom; + vertical-align: middle; } } } diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Type/_type.scss b/src/core/plugins/json-schema-2020-12/components/keywords/Type/_type.scss index 1251812d887..616dd630d4f 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/Type/_type.scss +++ b/src/core/plugins/json-schema-2020-12/components/keywords/Type/_type.scss @@ -1,7 +1,18 @@ -.json-schema-2020-12__type { - @include text_code(); - color: $prop-type-font-color; - font-size: 12px; - text-transform: lowercase; - font-weight: bold; +.json-schema-2020-12 { + &__type { + @include text_code(); + color: $prop-type-font-color; + font-size: 12px; + text-transform: lowercase; + font-weight: bold; + padding-left: 10px; + } + + &-property { + .json-schema-2020-12__type { + vertical-align: middle; + } + } } + + diff --git a/src/core/plugins/json-schema-2020-12/fn.js b/src/core/plugins/json-schema-2020-12/fn.js index 3d5ec7ae5a4..6df0730a6ba 100644 --- a/src/core/plugins/json-schema-2020-12/fn.js +++ b/src/core/plugins/json-schema-2020-12/fn.js @@ -63,7 +63,7 @@ export const getType = (schema, processedSchemas = new WeakSet()) => { schema.exclusiveMaximum || schema.multipleOf ) { - return "number|integer" + return "number | integer" } else if (schema.const !== undefined) { if (schema.const === null) { return "null" @@ -110,3 +110,7 @@ export const getType = (schema, processedSchemas = new WeakSet()) => { } export const isBooleanJSONSchema = (schema) => typeof schema === "boolean" + +export const isExpandable = (schema) => { + return schema?.description || schema?.properties +} diff --git a/src/core/plugins/json-schema-2020-12/hoc.jsx b/src/core/plugins/json-schema-2020-12/hoc.jsx index 6d2cd7a9175..fae7edacb2b 100644 --- a/src/core/plugins/json-schema-2020-12/hoc.jsx +++ b/src/core/plugins/json-schema-2020-12/hoc.jsx @@ -13,7 +13,13 @@ import Accordion from "./components/Accordion/Accordion" import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton" import ChevronRightIcon from "./components/icons/ChevronRight" import { JSONSchemaContext } from "./context" -import { getTitle, isBooleanJSONSchema, upperFirst, getType } from "./fn" +import { + getTitle, + isBooleanJSONSchema, + upperFirst, + getType, + isExpandable, +} from "./fn" export const withJSONSchemaContext = (Component, overrides = {}) => { const value = { @@ -38,6 +44,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => { getTitle, getType, isBooleanJSONSchema, + isExpandable, ...overrides.fn, }, }