kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(json-schema-2020-12): consolidate existing code + styles

Browse Source 
Refs #8513
This commit is contained in:
Vladimir Gorej
2023-04-21 21:24:09 +02:00
committed by Vladimír Gorej
parent a8e351f462
commit d404bbd6d9
40 changed files with 418 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss
View File

@@ -32,21 +32,6 @@
border-radius: 4px;
}
&-core-keyword {
color: #6b6b6b;
font-size: 12px;
font-style: italic;
margin-left: 20px;
font-weight: bold;
&__value {
color: #6b6b6b;
font-style: italic;
font-size: 12px;
font-weight: normal;
}
}
//&-note {
// @include text_headline($section-models-model-title-font-color);
// padding: 10px 0 0 20px;
@@ -55,8 +40,4 @@
//}
}
.json-schema-2020-12-core-keyword + .json-schema-2020-12-core-keyword__value::before {
content: '='
}

16
src/core/plugins/json-schema-2020-12/components/_all.scss
View File

@@ -6,18 +6,4 @@
@import './JSONSchema/json-schema';
@import './Accordion/accordion';
@import './ExpandDeepButton/expand-deep-button';
@import './keywords/$vocabulary/$vocabulary';
@import './keywords/$defs/$defs';
@import './keywords/AllOf/all-of';
@import './keywords/AnyOf/any-of';
@import './keywords/OneOf/one-of';
@import './keywords/Not/not';
@import './keywords/If/if';
@import './keywords/Then/then';
@import './keywords/Else/else';
@import './keywords/DependentSchemas/dependent-schemas';
@import './keywords/Type/type';
@import './keywords/Format/format';
@import './keywords/Description/description';
@import './keywords/Title/title';
@import './keywords/Properties/properties';
@import './keywords/all';

8
src/core/plugins/json-schema-2020-12/components/keywords/$anchor.jsx
View File

@@ -9,9 +9,11 @@ const $anchor = ({ schema }) => {
if (!schema?.$anchor) return null
return (
<div className="json-schema-2020-12__$anchor">
<span className="json-schema-2020-12-core-keyword">$anchor</span>
<span className="json-schema-2020-12-core-keyword__value">
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$anchor">
<span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
$anchor
</span>
<span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
{schema.$anchor}
</span>
</div>

8
src/core/plugins/json-schema-2020-12/components/keywords/$comment.jsx
View File

@@ -9,9 +9,11 @@ const $comment = ({ schema }) => {
if (!schema?.$comment) return null
return (
<div className="json-schema-2020-12__$comment">
<span className="json-schema-2020-12-core-keyword">$comment</span>
<span className="json-schema-2020-12-core-keyword__value">
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$comment">
<span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
$comment
</span>
<span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
{schema.$comment}
</span>
</div>

14
src/core/plugins/json-schema-2020-12/components/keywords/$defs/$defs.jsx → src/core/plugins/json-schema-2020-12/components/keywords/$defs.jsx
View File

@@ -3,8 +3,8 @@
*/
import React, { useCallback, useState } from "react"
import { schema } from "../../../prop-types"
import { useComponent, useIsExpandedDeeply } from "../../../hooks"
import { schema } from "../../prop-types"
import { useComponent, useIsExpandedDeeply } from "../../hooks"
const $defs = ({ schema }) => {
const $defs = schema?.$defs || {}
@@ -23,15 +23,17 @@ const $defs = ({ schema }) => {
}, [])
return (
<div className="json-schema-2020-12__$defs">
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$defs">
<Accordion expanded={expanded} onChange={handleExpansion}>
<span className="json-schema-2020-12-core-keyword">$defs</span>
<span className="json-schema-2020-12__type">object</span>
<span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
$defs
</span>
</Accordion>
<span className="json-schema-2020-12__type">object</span>
{expanded && (
<ul>
{Object.entries($defs).map(([schemaName, schema]) => (
<li key={schemaName} className="json-schema-2020-12-$def">
<li key={schemaName} className="json-schema-2020-12-property">
<JSONSchema name={schemaName} schema={schema} />
</li>
))}

12
src/core/plugins/json-schema-2020-12/components/keywords/$defs/_$defs.scss
View File

@@ -1,12 +0,0 @@
.json-schema-2020-12 {
&__\$defs {
& ul {
@include expansion-border;
padding: 0;
}
}
&-\$def {
@extend .json-schema-2020-12-property;
}
}

8
src/core/plugins/json-schema-2020-12/components/keywords/$dynamicAnchor.jsx
View File

@@ -9,9 +9,11 @@ const $dynamicAnchor = ({ schema }) => {
if (!schema?.$dynamicAnchor) return null
return (
<div className="json-schema-2020-12__$dynamicAnchor">
<span className="json-schema-2020-12-core-keyword">$dynamicAnchor</span>
<span className="json-schema-2020-12-core-keyword__value">
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$dynamicAnchor">
<span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
$dynamicAnchor
</span>
<span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
{schema.$dynamicAnchor}
</span>
</div>

8
src/core/plugins/json-schema-2020-12/components/keywords/$dynamicRef.jsx
View File

@@ -9,9 +9,11 @@ const $dynamicRef = ({ schema }) => {
if (!schema?.$dynamicRef) return null
return (
<div className="json-schema-2020-12__$dynamicRef">
<span className="json-schema-2020-12-core-keyword">$dynamicRef</span>
<span className="json-schema-2020-12-core-keyword__value">
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$dynamicRef">
<span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
$dynamicRef
</span>
<span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
{schema.$dynamicRef}
</span>
</div>

8
src/core/plugins/json-schema-2020-12/components/keywords/$id.jsx
View File

@@ -9,9 +9,11 @@ const $id = ({ schema }) => {
if (!schema?.$id) return null
return (
<div className="json-schema-2020-12__$id">
<span className="json-schema-2020-12-core-keyword">$id</span>
<span className="json-schema-2020-12-core-keyword__value">
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$id">
<span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
$id
</span>
<span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
{schema.$id}
</span>
</div>

8
src/core/plugins/json-schema-2020-12/components/keywords/$ref.jsx
View File

@@ -9,9 +9,11 @@ const $ref = ({ schema }) => {
if (!schema?.$ref) return null
return (
<div className="json-schema-2020-12__$ref">
<span className="json-schema-2020-12-core-keyword">$ref</span>
<span className="json-schema-2020-12-core-keyword__value">
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$ref">
<span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
$ref
</span>
<span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
{schema.$ref}
</span>
</div>

8
src/core/plugins/json-schema-2020-12/components/keywords/$schema.jsx
View File

@@ -9,9 +9,11 @@ const $schema = ({ schema }) => {
if (!schema?.$schema) return null
return (
<div className="json-schema-2020-12__$schema">
<span className="json-schema-2020-12-core-keyword">$schema</span>
<span className="json-schema-2020-12-core-keyword__value">
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$schema">
<span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
$schema
</span>
<span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
{schema.$schema}
</span>
</div>

14
src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx
View File

@@ -20,21 +20,23 @@ const $vocabulary = ({ schema }) => {
}, [])
return (
<div className="json-schema-2020-12__$vocabulary">
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$vocabulary">
<Accordion expanded={expanded} onChange={handleExpansion}>
<span className="json-schema-2020-12-core-keyword">$vocabulary</span>
<span className="json-schema-2020-12__type">object</span>
<span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
$vocabulary
</span>
</Accordion>
<span className="json-schema-2020-12__type">object</span>
<ul>
{expanded &&
Object.entries(schema.$vocabulary).map(([uri, enabled]) => (
<li
key={uri}
className={classNames("json-schema-2020-12__$vocabulary-uri", {
"json-schema-2020-12__$vocabulary-uri--disabled": !enabled,
className={classNames("json-schema-2020-12-$vocabulary-uri", {
"json-schema-2020-12-$vocabulary-uri--disabled": !enabled,
})}
>
<span className="json-schema-2020-12-core-keyword__value">
<span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
{uri}
</span>
</li>

6
src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/_$vocabulary.scss
View File

@@ -1,11 +1,13 @@
.json-schema-2020-12 {
&__\$vocabulary {
&-keyword--\$vocabulary {
ul {
@include expansion-border;
}
}
&__\$vocabulary-uri {
&-\$vocabulary-uri {
margin-left: 35px;
&--disabled {
text-decoration: line-through;
}

68
src/core/plugins/json-schema-2020-12/components/keywords/AllOf.jsx Normal file
View File

@@ -0,0 +1,68 @@
/**
* @prettier
*/
import React, { useCallback, useState } from "react"
import { schema } from "../../prop-types"
import { useFn, 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 isExpandedDeeply = useIsExpandedDeeply()
const [expanded, setExpanded] = useState(isExpandedDeeply)
const [expandedDeeply, setExpandedDeeply] = useState(false)
const Accordion = useComponent("Accordion")
const ExpandDeepButton = useComponent("ExpandDeepButton")
const JSONSchema = useComponent("JSONSchema")
const KeywordType = useComponent("KeywordType")
/**
* Event handlers.
*/
const handleExpansion = useCallback(() => {
setExpanded((prev) => !prev)
}, [])
const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
setExpanded(expandedDeepNew)
setExpandedDeeply(expandedDeepNew)
}, [])
return (
<JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--allOf">
<Accordion expanded={expanded} onChange={handleExpansion}>
<span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
All of
</span>
</Accordion>
<ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
<KeywordType schema={{ allOf }} />
{expanded && (
<ul>
{allOf.map((schema, index) => (
<li key={`#${index}`} className="json-schema-2020-12-property">
<JSONSchema
name={`#${index} ${fn.getTitle(schema)}`}
schema={schema}
/>
</li>
))}
</ul>
)}
</div>
</JSONSchemaDeepExpansionContext.Provider>
)
}
AllOf.propTypes = {
schema: schema.isRequired,
}
export default AllOf

56
src/core/plugins/json-schema-2020-12/components/keywords/AllOf/AllOf.jsx
View File

@@ -1,56 +0,0 @@
/**
* @prettier
*/
import React, { useCallback, useState } from "react"
import { schema } from "../../../prop-types"
import { useFn, useComponent, useIsExpandedDeeply } from "../../../hooks"
const AllOf = ({ schema }) => {
const allOf = schema?.allOf || []
if (!Array.isArray(allOf) || allOf.length === 0) {
return null
}
const fn = useFn()
const isExpandedDeeply = useIsExpandedDeeply()
const [expanded, setExpanded] = useState(isExpandedDeeply)
const Accordion = useComponent("Accordion")
const JSONSchema = useComponent("JSONSchema")
const handleExpansion = useCallback(() => {
setExpanded((prev) => !prev)
}, [])
return (
<div className="json-schema-2020-12__allOf">
<Accordion expanded={expanded} onChange={handleExpansion}>
<span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--allOf">
All of
</span>
<span className="json-schema-2020-12__type">
{fn.getType({ allOf })}
</span>
</Accordion>
{expanded && (
<ul>
{allOf.map((schema, index) => (
<li key={`#${index}`} className="json-schema-2020-12-property">
<JSONSchema
name={`#${index} ${fn.getTitle(schema)}`}
schema={schema}
/>
</li>
))}
</ul>
)}
</div>
)
}
AllOf.propTypes = {
schema: schema.isRequired,
}
export default AllOf

19
src/core/plugins/json-schema-2020-12/components/keywords/AllOf/_all-of.scss
View File

@@ -1,19 +0,0 @@
.json-schema-2020-12 {
&__allOf {
margin: 5px 0 5px 0;
& > ul {
@include expansion-border;
padding: 0;
}
}
&-core-keyword {
&--allOf {
color: $text-code-default-font-color;
font-style: normal;
}
}
}

68
src/core/plugins/json-schema-2020-12/components/keywords/AnyOf.jsx Normal file
View File

@@ -0,0 +1,68 @@
/**
* @prettier
*/
import React, { useCallback, useState } from "react"
import { schema } from "../../prop-types"
import { useFn, 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 isExpandedDeeply = useIsExpandedDeeply()
const [expanded, setExpanded] = useState(isExpandedDeeply)
const [expandedDeeply, setExpandedDeeply] = useState(false)
const Accordion = useComponent("Accordion")
const ExpandDeepButton = useComponent("ExpandDeepButton")
const JSONSchema = useComponent("JSONSchema")
const KeywordType = useComponent("KeywordType")
/**
* Event handlers.
*/
const handleExpansion = useCallback(() => {
setExpanded((prev) => !prev)
}, [])
const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
setExpanded(expandedDeepNew)
setExpandedDeeply(expandedDeepNew)
}, [])
return (
<JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--anyOf">
<Accordion expanded={expanded} onChange={handleExpansion}>
<span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
Any of
</span>
</Accordion>
<ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
<KeywordType schema={{ anyOf }} />
{expanded && (
<ul>
{anyOf.map((schema, index) => (
<li key={`#${index}`} className="json-schema-2020-12-property">
<JSONSchema
name={`#${index} ${fn.getTitle(schema)}`}
schema={schema}
/>
</li>
))}
</ul>
)}
</div>
</JSONSchemaDeepExpansionContext.Provider>
)
}
AnyOf.propTypes = {
schema: schema.isRequired,
}
export default AnyOf

56
src/core/plugins/json-schema-2020-12/components/keywords/AnyOf/AnyOf.jsx
View File

@@ -1,56 +0,0 @@
/**
* @prettier
*/
import React, { useCallback, useState } from "react"
import { schema } from "../../../prop-types"
import { useFn, useComponent, useIsExpandedDeeply } from "../../../hooks"
const AnyOf = ({ schema }) => {
const anyOf = schema?.anyOf || []
if (!Array.isArray(anyOf) || anyOf.length === 0) {
return null
}
const fn = useFn()
const isExpandedDeeply = useIsExpandedDeeply()
const [expanded, setExpanded] = useState(isExpandedDeeply)
const Accordion = useComponent("Accordion")
const JSONSchema = useComponent("JSONSchema")
const handleExpansion = useCallback(() => {
setExpanded((prev) => !prev)
}, [])
return (
<div className="json-schema-2020-12__anyOf">
<Accordion expanded={expanded} onChange={handleExpansion}>
<span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--anyOf">
Any of
</span>
<span className="json-schema-2020-12__type">
{fn.getType({ anyOf })}
</span>
</Accordion>
{expanded && (
<ul>
{anyOf.map((schema, index) => (
<li key={`#${index}`} className="json-schema-2020-12-property">
<JSONSchema
name={`#${index} ${fn.getTitle(schema)}`}
schema={schema}
/>
</li>
))}
</ul>
)}
</div>
)
}
AnyOf.propTypes = {
schema: schema.isRequired,
}
export default AnyOf

13
src/core/plugins/json-schema-2020-12/components/keywords/AnyOf/_any-of.scss
View File

@@ -1,13 +0,0 @@
.json-schema-2020-12 {
&__anyOf {
@extend .json-schema-2020-12__allOf;
}
&-core-keyword {
&--anyOf {
@extend .json-schema-2020-12-core-keyword--allOf;
}
}
}

62
src/core/plugins/json-schema-2020-12/components/keywords/DependentSchemas.jsx Normal file
View File

@@ -0,0 +1,62 @@
/**
* @prettier
*/
import React, { useCallback, useState } from "react"
import { schema } from "../../prop-types"
import { 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 isExpandedDeeply = useIsExpandedDeeply()
const [expanded, setExpanded] = useState(isExpandedDeeply)
const [expandedDeeply, setExpandedDeeply] = useState(false)
const Accordion = useComponent("Accordion")
const ExpandDeepButton = useComponent("ExpandDeepButton")
const JSONSchema = useComponent("JSONSchema")
/**
* Event handlers.
*/
const handleExpansion = useCallback(() => {
setExpanded((prev) => !prev)
}, [])
const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
setExpanded(expandedDeepNew)
setExpandedDeeply(expandedDeepNew)
}, [])
return (
<JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--dependentSchemas">
<Accordion expanded={expanded} onChange={handleExpansion}>
<span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
Dependent schemas
</span>
</Accordion>
<ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
<span className="json-schema-2020-12__type">object</span>
{expanded && (
<ul>
{Object.entries(dependentSchemas).map(([schemaName, schema]) => (
<li key={schemaName} className="json-schema-2020-12-property">
<JSONSchema name={schemaName} schema={schema} />
</li>
))}
</ul>
)}
</div>
</JSONSchemaDeepExpansionContext.Provider>
)
}
DependentSchemas.propTypes = {
schema: schema.isRequired,
}
export default DependentSchemas

49
src/core/plugins/json-schema-2020-12/components/keywords/DependentSchemas/DependentSchemas.jsx
View File

@@ -1,49 +0,0 @@
/**
* @prettier
*/
import React, { useCallback, useState } from "react"
import { schema } from "../../../prop-types"
import { useComponent, useIsExpandedDeeply } from "../../../hooks"
const DependentSchemas = ({ schema }) => {
const dependentSchemas = schema?.dependentSchemas || []
if (typeof dependentSchemas !== "object") return null
if (Object.keys(dependentSchemas).length === 0) return null
const isExpandedDeeply = useIsExpandedDeeply()
const [expanded, setExpanded] = useState(isExpandedDeeply)
const Accordion = useComponent("Accordion")
const JSONSchema = useComponent("JSONSchema")
const handleExpansion = useCallback(() => {
setExpanded((prev) => !prev)
}, [])
return (
<div className="json-schema-2020-12__dependentSchemas">
<Accordion expanded={expanded} onChange={handleExpansion}>
<span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--dependentSchemas">
Dependent schemas
</span>
<span className="json-schema-2020-12__type">object</span>
</Accordion>
{expanded && (
<ul>
{Object.entries(dependentSchemas).map(([schemaName, schema]) => (
<li key={schemaName} className="json-schema-2020-12-property">
<JSONSchema name={schemaName} schema={schema} />
</li>
))}
</ul>
)}
</div>
)
}
DependentSchemas.propTypes = {
schema: schema.isRequired,
}
export default DependentSchemas

13
src/core/plugins/json-schema-2020-12/components/keywords/DependentSchemas/_dependent-schemas.scss
View File

@@ -1,13 +0,0 @@
.json-schema-2020-12 {
&__dependentSchemas {
@extend .json-schema-2020-12__allOf;
}
&-core-keyword {
&--dependentSchemas {
@extend .json-schema-2020-12-core-keyword--allOf;
}
}
}

6
src/core/plugins/json-schema-2020-12/components/keywords/Description/Description.jsx
View File

@@ -9,7 +9,11 @@ const Description = ({ schema }) => {
if (!schema?.description) return null
return (
<div className="json-schema-2020-12__description">{schema.description}</div>
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--description">
<div className="json-schema-2020-12-core-keyword__value json-schema-2020-12-core-keyword__value--secondary">
{schema.description}
</div>
</div>
)
}

2
src/core/plugins/json-schema-2020-12/components/keywords/Description/_description.scss
View File

@@ -1,4 +1,4 @@
.json-schema-2020-12__description {
.json-schema-2020-12-keyword--description {
color: #6b6b6b;
font-size: 12px;
margin-left: 20px;

8
src/core/plugins/json-schema-2020-12/components/keywords/Else/Else.jsx → src/core/plugins/json-schema-2020-12/components/keywords/Else.jsx
View File

@@ -3,21 +3,21 @@
*/
import React from "react"
import { schema } from "../../../prop-types"
import { useComponent } from "../../../hooks"
import { schema } from "../../prop-types"
import { useComponent } from "../../hooks"
const Else = ({ schema }) => {
if (!schema?.else) return null
const JSONSchema = useComponent("JSONSchema")
const name = (
<span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--else">
<span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
Else
</span>
)
return (
<div className="json-schema-2020-12__else">
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--if">
<JSONSchema name={name} schema={schema.else} />
</div>
)

10
src/core/plugins/json-schema-2020-12/components/keywords/Else/_else.scss
View File

@@ -1,10 +0,0 @@
.json-schema-2020-12 {
&__else {
.json-schema-2020-12-core-keyword--else {
@extend .json-schema-2020-12-core-keyword--allOf;
}
}
}

8
src/core/plugins/json-schema-2020-12/components/keywords/If/If.jsx → src/core/plugins/json-schema-2020-12/components/keywords/If.jsx
View File

@@ -3,21 +3,21 @@
*/
import React from "react"
import { schema } from "../../../prop-types"
import { useComponent } from "../../../hooks"
import { schema } from "../../prop-types"
import { useComponent } from "../../hooks"
const If = ({ schema }) => {
if (!schema?.if) return null
const JSONSchema = useComponent("JSONSchema")
const name = (
<span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--if">
<span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
If
</span>
)
return (
<div className="json-schema-2020-12__if">
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--if">
<JSONSchema name={name} schema={schema.if} />
</div>
)

10
src/core/plugins/json-schema-2020-12/components/keywords/If/_if.scss
View File

@@ -1,10 +0,0 @@
.json-schema-2020-12 {
&__if {
.json-schema-2020-12-core-keyword--if {
@extend .json-schema-2020-12-core-keyword--allOf;
}
}
}

8
src/core/plugins/json-schema-2020-12/components/keywords/Not/Not.jsx → src/core/plugins/json-schema-2020-12/components/keywords/Not.jsx
View File

@@ -3,21 +3,21 @@
*/
import React from "react"
import { schema } from "../../../prop-types"
import { useComponent } from "../../../hooks"
import { schema } from "../../prop-types"
import { useComponent } from "../../hooks"
const Not = ({ schema }) => {
if (!schema?.not) return null
const JSONSchema = useComponent("JSONSchema")
const name = (
<span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--not">
<span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
Not
</span>
)
return (
<div className="json-schema-2020-12__not">
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--not">
<JSONSchema name={name} schema={schema.not} />
</div>
)

10
src/core/plugins/json-schema-2020-12/components/keywords/Not/_not.scss
View File

@@ -1,10 +0,0 @@
.json-schema-2020-12 {
&__not {
.json-schema-2020-12-core-keyword--not {
@extend .json-schema-2020-12-core-keyword--allOf;
}
}
}

68
src/core/plugins/json-schema-2020-12/components/keywords/OneOf.jsx Normal file
View File

@@ -0,0 +1,68 @@
/**
* @prettier
*/
import React, { useCallback, useState } from "react"
import { schema } from "../../prop-types"
import { useFn, 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 isExpandedDeeply = useIsExpandedDeeply()
const [expanded, setExpanded] = useState(isExpandedDeeply)
const [expandedDeeply, setExpandedDeeply] = useState(false)
const Accordion = useComponent("Accordion")
const ExpandDeepButton = useComponent("ExpandDeepButton")
const JSONSchema = useComponent("JSONSchema")
const KeywordType = useComponent("KeywordType")
/**
* Event handlers.
*/
const handleExpansion = useCallback(() => {
setExpanded((prev) => !prev)
}, [])
const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
setExpanded(expandedDeepNew)
setExpandedDeeply(expandedDeepNew)
}, [])
return (
<JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--oneOf">
<Accordion expanded={expanded} onChange={handleExpansion}>
<span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
One of
</span>
</Accordion>
<ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
<KeywordType schema={{ oneOf }} />
{expanded && (
<ul>
{oneOf.map((schema, index) => (
<li key={`#${index}`} className="json-schema-2020-12-property">
<JSONSchema
name={`#${index} ${fn.getTitle(schema)}`}
schema={schema}
/>
</li>
))}
</ul>
)}
</div>
</JSONSchemaDeepExpansionContext.Provider>
)
}
OneOf.propTypes = {
schema: schema.isRequired,
}
export default OneOf

56
src/core/plugins/json-schema-2020-12/components/keywords/OneOf/OneOf.jsx
View File

@@ -1,56 +0,0 @@
/**
* @prettier
*/
import React, { useCallback, useState } from "react"
import { schema } from "../../../prop-types"
import { useFn, useComponent, useIsExpandedDeeply } from "../../../hooks"
const OneOf = ({ schema }) => {
const oneOf = schema?.oneOf || []
if (!Array.isArray(oneOf) || oneOf.length === 0) {
return null
}
const fn = useFn()
const isExpandedDeeply = useIsExpandedDeeply()
const [expanded, setExpanded] = useState(isExpandedDeeply)
const Accordion = useComponent("Accordion")
const JSONSchema = useComponent("JSONSchema")
const handleExpansion = useCallback(() => {
setExpanded((prev) => !prev)
}, [])
return (
<div className="json-schema-2020-12__oneOf">
<Accordion expanded={expanded} onChange={handleExpansion}>
<span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--oneOf">
One of
</span>
<span className="json-schema-2020-12__type">
{fn.getType({ oneOf })}
</span>
</Accordion>
{expanded && (
<ul>
{oneOf.map((schema, index) => (
<li key={`#${index}`} className="json-schema-2020-12-property">
<JSONSchema
name={`#${index} ${fn.getTitle(schema)}`}
schema={schema}
/>
</li>
))}
</ul>
)}
</div>
)
}
OneOf.propTypes = {
schema: schema.isRequired,
}
export default OneOf

13
src/core/plugins/json-schema-2020-12/components/keywords/OneOf/_one-of.scss
View File

@@ -1,13 +0,0 @@
.json-schema-2020-12 {
&__oneOf {
@extend .json-schema-2020-12__allOf;
}
&-core-keyword {
&--oneOf {
@extend .json-schema-2020-12-core-keyword--allOf;
}
}
}

8
src/core/plugins/json-schema-2020-12/components/keywords/Then/Then.jsx → src/core/plugins/json-schema-2020-12/components/keywords/Then.jsx
View File

@@ -3,21 +3,21 @@
*/
import React from "react"
import { schema } from "../../../prop-types"
import { useComponent } from "../../../hooks"
import { schema } from "../../prop-types"
import { useComponent } from "../../hooks"
const Then = ({ schema }) => {
if (!schema?.then) return null
const JSONSchema = useComponent("JSONSchema")
const name = (
<span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--then">
<span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
Then
</span>
)
return (
<div className="json-schema-2020-12__then">
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--then">
<JSONSchema name={name} schema={schema.then} />
</div>
)

10
src/core/plugins/json-schema-2020-12/components/keywords/Then/_then.scss
View File

@@ -1,10 +0,0 @@
.json-schema-2020-12 {
&__then {
.json-schema-2020-12-core-keyword--then {
@extend .json-schema-2020-12-core-keyword--allOf;
}
}
}

4
src/core/plugins/json-schema-2020-12/components/keywords/Title/_title.scss
View File

@@ -4,13 +4,11 @@
display: inline-block;
font-weight: bold;
& .json-schema-2020-12-core-keyword {
& .json-schema-2020-12-keyword__name {
margin: 0;
}
}
&-property {
margin: 7px 0;

51
src/core/plugins/json-schema-2020-12/components/keywords/_all.scss Normal file
View File

@@ -0,0 +1,51 @@
.json-schema-2020-12-keyword {
margin: 5px 0 5px 0;
& > ul {
@include expansion-border;
padding: 0;
}
&__name {
font-size: 12px;
margin-left: 20px;
font-weight: bold;
&--primary {
color: $text-code-default-font-color;
font-style: normal;
}
&--secondary {
color: #6b6b6b;
font-style: italic;
}
}
&__value {
color: #6b6b6b;
font-style: italic;
font-size: 12px;
font-weight: normal;
&--primary {
color: $text-code-default-font-color;
font-style: normal;
}
&--secondary {
color: #6b6b6b;
font-style: italic;
}
}
}
.json-schema-2020-12-keyword__name--secondary + .json-schema-2020-12-keyword__value--secondary::before {
content: '='
}
@import './$vocabulary/$vocabulary';
@import './Type/type';
@import './Format/format';
@import './Description/description';
@import './Title/title';
@import './Properties/properties';

18
src/core/plugins/json-schema-2020-12/hoc.jsx
View File

@@ -11,16 +11,16 @@ import Keyword$anchor from "./components/keywords/$anchor"
import Keyword$dynamicAnchor from "./components/keywords/$dynamicAnchor"
import Keyword$ref from "./components/keywords/$ref"
import Keyword$dynamicRef from "./components/keywords/$dynamicRef"
import Keyword$defs from "./components/keywords/$defs/$defs"
import Keyword$defs from "./components/keywords/$defs"
import Keyword$comment from "./components/keywords/$comment"
import KeywordAllOf from "./components/keywords/AllOf/AllOf"
import KeywordAnyOf from "./components/keywords/AnyOf/AnyOf"
import KeywordOneOf from "./components/keywords/OneOf/OneOf"
import KeywordNot from "./components/keywords/Not/Not"
import KeywordIf from "./components/keywords/If/If"
import KeywordThen from "./components/keywords/Then/Then"
import KeywordElse from "./components/keywords/Else/Else"
import KeywordDependentSchemas from "./components/keywords/DependentSchemas/DependentSchemas"
import KeywordAllOf from "./components/keywords/AllOf"
import KeywordAnyOf from "./components/keywords/AnyOf"
import KeywordOneOf from "./components/keywords/OneOf"
import KeywordNot from "./components/keywords/Not"
import KeywordIf from "./components/keywords/If"
import KeywordThen from "./components/keywords/Then"
import KeywordElse from "./components/keywords/Else"
import KeywordDependentSchemas from "./components/keywords/DependentSchemas"
import KeywordProperties from "./components/keywords/Properties/Properties"
import KeywordType from "./components/keywords/Type/Type"
import KeywordFormat from "./components/keywords/Format/Format"

18
src/core/plugins/json-schema-2020-12/index.js
View File

@@ -10,16 +10,16 @@ import Keyword$anchor from "./components/keywords/$anchor"
import Keyword$dynamicAnchor from "./components/keywords/$dynamicAnchor"
import Keyword$ref from "./components/keywords/$ref"
import Keyword$dynamicRef from "./components/keywords/$dynamicRef"
import Keyword$defs from "./components/keywords/$defs/$defs"
import Keyword$defs from "./components/keywords/$defs"
import Keyword$comment from "./components/keywords/$comment"
import KeywordAllOf from "./components/keywords/AllOf/AllOf"
import KeywordAnyOf from "./components/keywords/AnyOf/AnyOf"
import KeywordOneOf from "./components/keywords/OneOf/OneOf"
import KeywordNot from "./components/keywords/Not/Not"
import KeywordIf from "./components/keywords/If/If"
import KeywordThen from "./components/keywords/Then/Then"
import KeywordElse from "./components/keywords/Else/Else"
import KeywordDependentSchemas from "./components/keywords/DependentSchemas/DependentSchemas"
import KeywordAllOf from "./components/keywords/AllOf"
import KeywordAnyOf from "./components/keywords/AnyOf"
import KeywordOneOf from "./components/keywords/OneOf"
import KeywordNot from "./components/keywords/Not"
import KeywordIf from "./components/keywords/If"
import KeywordThen from "./components/keywords/Then"
import KeywordElse from "./components/keywords/Else"
import KeywordDependentSchemas from "./components/keywords/DependentSchemas"
import KeywordType from "./components/keywords/Type/Type"
import KeywordFormat from "./components/keywords/Format/Format"
import KeywordTitle from "./components/keywords/Title/Title"

6
src/core/plugins/oas31/wrap-components/json-schema-2020-12-keyword-description.jsx
View File

@@ -11,8 +11,10 @@ const JSONSchema202012KeywordDescriptionWrapper =
const MarkDown = getComponent("Markdown")
return (
<div className="json-schema-2020-12__description">
<MarkDown source={schema.description} />
<div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--description">
<div className="json-schema-2020-12-core-keyword__value json-schema-2020-12-core-keyword__value--secondary">
<MarkDown source={schema.description} />
</div>
</div>
)
})