diff --git a/src/core/plugins/json-schema-2020-12/components/JSONViewer/JSONViewer.jsx b/src/core/plugins/json-schema-2020-12/components/JSONViewer/JSONViewer.jsx index 669c9ac7f32..1899c199351 100644 --- a/src/core/plugins/json-schema-2020-12/components/JSONViewer/JSONViewer.jsx +++ b/src/core/plugins/json-schema-2020-12/components/JSONViewer/JSONViewer.jsx @@ -15,7 +15,7 @@ import { import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context" import { isEmptyObject, isEmptyArray } from "../../fn" -const JSONViewer = ({ name, value, className }) => { +const JSONViewer = ({ name, value, className, hideArrayIndices = false }) => { const fn = useFn() const { path } = usePath(name) const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(name) @@ -55,13 +55,25 @@ const JSONViewer = ({ name, value, className }) => { /** * Rendering. */ + const isArrayIndex = typeof name === "string" && name.startsWith("#") + const shouldHideName = hideArrayIndices && isArrayIndex + if (isPrimitive) { return (
- - {name} - - + {!shouldHideName && ( + + {name} + + )} + {fn.stringify(value)}
@@ -71,9 +83,11 @@ const JSONViewer = ({ name, value, className }) => { if (isEmpty) { return (
- - {name} - + {!shouldHideName && ( + + {name} + + )} {Array.isArray(value) ? "empty array" : "empty object"} @@ -89,9 +103,11 @@ const JSONViewer = ({ name, value, className }) => { data-json-schema-level={level} > - - {name} - + {!shouldHideName && ( + + {name} + + )} { name={`#${index}`} value={item} className={className} + hideArrayIndices={hideArrayIndices} /> )) @@ -131,6 +148,7 @@ const JSONViewer = ({ name, value, className }) => { name={propertyName} value={propertyValue} className={className} + hideArrayIndices={false} /> ) @@ -148,6 +166,7 @@ JSONViewer.propTypes = { name: PropTypes.string.isRequired, value: PropTypes.any.isRequired, className: PropTypes.string, + hideArrayIndices: PropTypes.bool, } export default JSONViewer diff --git a/src/core/plugins/json-schema-2020-12/components/JSONViewer/_json-viewer.scss b/src/core/plugins/json-schema-2020-12/components/JSONViewer/_json-viewer.scss index 0342aa548d2..f508f927aaf 100644 --- a/src/core/plugins/json-schema-2020-12/components/JSONViewer/_json-viewer.scss +++ b/src/core/plugins/json-schema-2020-12/components/JSONViewer/_json-viewer.scss @@ -9,3 +9,7 @@ + .json-schema-2020-12-json-viewer__value--secondary::before { content: "="; } + +.json-schema-2020-12-json-viewer__value--no-name::before { + content: none !important; +} diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Enum/Enum.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/Enum/Enum.jsx index 4f440de713b..2f1aa08d2c1 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/Enum/Enum.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/Enum/Enum.jsx @@ -16,6 +16,7 @@ const Enum = ({ schema }) => { name="Enum" value={schema.enum} className="json-schema-2020-12-keyword json-schema-2020-12-keyword--enum" + hideArrayIndices={true} /> ) } diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Examples/Examples.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/Examples/Examples.jsx index f417fd383b9..25c6635118c 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/Examples/Examples.jsx +++ b/src/core/plugins/json-schema-2020-12/components/keywords/Examples/Examples.jsx @@ -19,6 +19,7 @@ const Examples = ({ schema }) => { name="Examples" value={schema.examples} className="json-schema-2020-12-keyword json-schema-2020-12-keyword--examples" + hideArrayIndices={true} /> ) }