refactor(json-schema-2020-12): make styles more reusable (#8656)
Refs #8513
This commit is contained in:
@@ -44,7 +44,9 @@ const $defs = ({ schema }) => {
|
||||
</span>
|
||||
</Accordion>
|
||||
<ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
|
||||
<span className="json-schema-2020-12__type">object</span>
|
||||
<strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
|
||||
object
|
||||
</strong>
|
||||
<ul
|
||||
className={classNames("json-schema-2020-12-keyword__children", {
|
||||
"json-schema-2020-12-keyword__children--collapsed": !expanded,
|
||||
|
||||
@@ -29,7 +29,9 @@ const $vocabulary = ({ schema }) => {
|
||||
$vocabulary
|
||||
</span>
|
||||
</Accordion>
|
||||
<span className="json-schema-2020-12__type">object</span>
|
||||
<strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
|
||||
object
|
||||
</strong>
|
||||
<ul>
|
||||
{expanded &&
|
||||
Object.entries(schema.$vocabulary).map(([uri, enabled]) => (
|
||||
|
||||
@@ -27,12 +27,16 @@ const AdditionalProperties = ({ schema }) => {
|
||||
{additionalProperties === true ? (
|
||||
<>
|
||||
{name}
|
||||
<span className="json-schema-2020-12__type">allowed</span>
|
||||
<span className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
|
||||
allowed
|
||||
</span>
|
||||
</>
|
||||
) : additionalProperties === false ? (
|
||||
<>
|
||||
{name}
|
||||
<span className="json-schema-2020-12__type">forbidden</span>
|
||||
<span className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
|
||||
forbidden
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<JSONSchema name={name} schema={additionalProperties} />
|
||||
|
||||
@@ -43,7 +43,9 @@ const DependentSchemas = ({ schema }) => {
|
||||
</span>
|
||||
</Accordion>
|
||||
<ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
|
||||
<span className="json-schema-2020-12__type">object</span>
|
||||
<strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
|
||||
object
|
||||
</strong>
|
||||
<ul
|
||||
className={classNames("json-schema-2020-12-keyword__children", {
|
||||
"json-schema-2020-12-keyword__children--collapsed": !expanded,
|
||||
|
||||
@@ -3,12 +3,16 @@
|
||||
*/
|
||||
import React from "react"
|
||||
|
||||
import { schema } from "../../../prop-types"
|
||||
import { schema } from "../../prop-types"
|
||||
|
||||
const Deprecated = ({ schema }) => {
|
||||
if (schema?.deprecated !== true) return null
|
||||
|
||||
return <span className="json-schema-2020-12__deprecated">deprecated</span>
|
||||
return (
|
||||
<span className="json-schema-2020-12__attribute json-schema-2020-12__attribute--warning">
|
||||
deprecated
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
Deprecated.propTypes = {
|
||||
@@ -1,10 +0,0 @@
|
||||
.json-schema-2020-12 {
|
||||
&__deprecated {
|
||||
@include text_code();
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
text-transform: lowercase;
|
||||
font-weight: normal;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
@@ -3,12 +3,16 @@
|
||||
*/
|
||||
import React from "react"
|
||||
|
||||
import { schema } from "../../../prop-types"
|
||||
import { schema } from "../../prop-types"
|
||||
|
||||
const ReadOnly = ({ schema }) => {
|
||||
if (schema?.readOnly !== true) return null
|
||||
|
||||
return <span className="json-schema-2020-12__readOnly">read-only</span>
|
||||
return (
|
||||
<span className="json-schema-2020-12__attribute json-schema-2020-12__attribute--muted">
|
||||
read-only
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
ReadOnly.propTypes = {
|
||||
@@ -1,6 +0,0 @@
|
||||
.json-schema-2020-12 {
|
||||
&__readOnly {
|
||||
@extend .json-schema-2020-12__deprecated;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
@@ -4,8 +4,8 @@
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
|
||||
import { schema } from "../../../prop-types"
|
||||
import { useFn } from "../../../hooks"
|
||||
import { schema } from "../../prop-types"
|
||||
import { useFn } from "../../hooks"
|
||||
|
||||
const Type = ({ schema, isCircular }) => {
|
||||
const fn = useFn()
|
||||
@@ -13,7 +13,9 @@ const Type = ({ schema, isCircular }) => {
|
||||
const circularSuffix = isCircular ? " [circular]" : ""
|
||||
|
||||
return (
|
||||
<span className="json-schema-2020-12__type">{`${type}${circularSuffix}`}</span>
|
||||
<strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
|
||||
{`${type}${circularSuffix}`}
|
||||
</strong>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -3,12 +3,16 @@
|
||||
*/
|
||||
import React from "react"
|
||||
|
||||
import { schema } from "../../../prop-types"
|
||||
import { schema } from "../../prop-types"
|
||||
|
||||
const WriteOnly = ({ schema }) => {
|
||||
if (schema?.writeOnly !== true) return null
|
||||
|
||||
return <span className="json-schema-2020-12__writeOnly">write-only</span>
|
||||
return (
|
||||
<span className="json-schema-2020-12__attribute json-schema-2020-12__attribute--muted">
|
||||
write-only
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
WriteOnly.propTypes = {
|
||||
@@ -1,5 +0,0 @@
|
||||
.json-schema-2020-12 {
|
||||
&__writeOnly {
|
||||
@extend .json-schema-2020-12__readOnly;
|
||||
}
|
||||
}
|
||||
@@ -65,8 +65,27 @@
|
||||
content: '='
|
||||
}
|
||||
|
||||
.json-schema-2020-12__attribute {
|
||||
font-family: monospace;
|
||||
color: $text-code-default-font-color;
|
||||
font-size: 12px;
|
||||
text-transform: lowercase;
|
||||
padding-left: 10px;
|
||||
|
||||
&--primary {
|
||||
color: $prop-type-font-color;
|
||||
}
|
||||
|
||||
&--muted {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
@import './$vocabulary/$vocabulary';
|
||||
@import './Type/type';
|
||||
@import './Description/description';
|
||||
@import './Title/title';
|
||||
@import './Properties/properties';
|
||||
@@ -74,6 +93,3 @@
|
||||
@import './Enum/enum';
|
||||
@import './Constraint/constraint';
|
||||
@import './DependentRequired/dependent-required';
|
||||
@import './Deprecated/deprecated';
|
||||
@import './ReadOnly/read-only';
|
||||
@import './WriteOnly/write-only';
|
||||
|
||||
@@ -30,7 +30,7 @@ import KeywordAdditionalProperties from "./components/keywords/AdditionalPropert
|
||||
import KeywordPropertyNames from "./components/keywords/PropertyNames"
|
||||
import KeywordUnevaluatedItems from "./components/keywords/UnevaluatedItems"
|
||||
import KeywordUnevaluatedProperties from "./components/keywords/UnevaluatedProperties"
|
||||
import KeywordType from "./components/keywords/Type/Type"
|
||||
import KeywordType from "./components/keywords/Type"
|
||||
import KeywordEnum from "./components/keywords/Enum/Enum"
|
||||
import KeywordConst from "./components/keywords/Const"
|
||||
import KeywordConstraint from "./components/keywords/Constraint/Constraint"
|
||||
@@ -39,9 +39,9 @@ import KeywordContentSchema from "./components/keywords/ContentSchema"
|
||||
import KeywordTitle from "./components/keywords/Title/Title"
|
||||
import KeywordDescription from "./components/keywords/Description/Description"
|
||||
import KeywordDefault from "./components/keywords/Default"
|
||||
import KeywordDeprecated from "./components/keywords/Deprecated/Deprecated"
|
||||
import KeywordReadOnly from "./components/keywords/ReadOnly/ReadOnly"
|
||||
import KeywordWriteOnly from "./components/keywords/WriteOnly/WriteOnly"
|
||||
import KeywordDeprecated from "./components/keywords/Deprecated"
|
||||
import KeywordReadOnly from "./components/keywords/ReadOnly"
|
||||
import KeywordWriteOnly from "./components/keywords/WriteOnly"
|
||||
import Accordion from "./components/Accordion/Accordion"
|
||||
import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
|
||||
import ChevronRightIcon from "./components/icons/ChevronRight"
|
||||
|
||||
@@ -28,7 +28,7 @@ import KeywordAdditionalProperties from "./components/keywords/AdditionalPropert
|
||||
import KeywordPropertyNames from "./components/keywords/PropertyNames"
|
||||
import KeywordUnevaluatedItems from "./components/keywords/UnevaluatedItems"
|
||||
import KeywordUnevaluatedProperties from "./components/keywords/UnevaluatedProperties"
|
||||
import KeywordType from "./components/keywords/Type/Type"
|
||||
import KeywordType from "./components/keywords/Type"
|
||||
import KeywordEnum from "./components/keywords/Enum/Enum"
|
||||
import KeywordConst from "./components/keywords/Const"
|
||||
import KeywordConstraint from "./components/keywords/Constraint/Constraint"
|
||||
@@ -37,9 +37,9 @@ import KeywordContentSchema from "./components/keywords/ContentSchema"
|
||||
import KeywordTitle from "./components/keywords/Title/Title"
|
||||
import KeywordDescription from "./components/keywords/Description/Description"
|
||||
import KeywordDefault from "./components/keywords/Default"
|
||||
import KeywordDeprecated from "./components/keywords/Deprecated/Deprecated"
|
||||
import KeywordReadOnly from "./components/keywords/ReadOnly/ReadOnly"
|
||||
import KeywordWriteOnly from "./components/keywords/WriteOnly/WriteOnly"
|
||||
import KeywordDeprecated from "./components/keywords/Deprecated"
|
||||
import KeywordReadOnly from "./components/keywords/ReadOnly"
|
||||
import KeywordWriteOnly from "./components/keywords/WriteOnly"
|
||||
import Accordion from "./components/Accordion/Accordion"
|
||||
import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
|
||||
import ChevronRightIcon from "./components/icons/ChevronRight"
|
||||
|
||||
Reference in New Issue
Block a user