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

feat(json-schema-2020-12): add support for expandable behavior

Browse Source 
Refs #8513
This commit is contained in:
Vladimir Gorej
2023-04-14 12:21:30 +02:00
committed by Vladimír Gorej
parent 9ed1c1b3a0
commit ddedb57dc0
10 changed files with 96 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,14 +20,14 @@ const Accordion = ({ expanded, children, onChange }) => {
return (
<button className="json-schema-2020-12-accordion" onClick={handleExpansion}>
<div className="json-schema-2020-12-accordion__children">{children}</div>
<div
<span
className={classNames("json-schema-2020-12-accordion__icon", {
"json-schema-2020-12-accordion__icon--expanded": expanded,
"json-schema-2020-12-accordion__icon--collapsed": !expanded,
})}
>
<ChevronRightIcon />
</div>
</span>
</button>
)
}
@@ -35,7 +35,7 @@ const Accordion = ({ expanded, children, onChange }) => {
Accordion.propTypes = {
expanded: PropTypes.bool,
children: PropTypes.node.isRequired,
onClick: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
}
Accordion.defaultProps = {

9
src/core/plugins/json-schema-2020-12/components/Accordion/_accordion.scss
View File

@@ -1,18 +1,17 @@
.json-schema-2020-12-accordion {
outline: none;
border: none;
display: flex;
align-items: center;
padding-left: 0;
&__children {
display: inline-block;
}
&__icon {
width: 20px;
height: 20px;
width: 18px;
height: 18px;
display: inline-block;
vertical-align: center;
vertical-align: bottom;
&--expanded {
transition: transform .15s ease-in;

74
src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx
View File

@@ -3,16 +3,21 @@
*/
import React, { useState, useCallback } from "react"
import PropTypes from "prop-types"
import classNames from "classnames"
import * as propTypes from "../../prop-types"
import { useComponent, useFn } from "../../hooks"
import { useComponent, useFn, useLevel, useIsEmbedded } from "../../hooks"
import { JSONSchemaLevelContext } from "../../context"
const JSONSchema = ({ schema, name }) => {
const [expanded, setExpanded] = useState(false)
const fn = useFn()
const [level, nextLevel] = useLevel()
const isEmbedded = useIsEmbedded()
const BooleanJSONSchema = useComponent("BooleanJSONSchema")
const Accordion = useComponent("Accordion")
const KeywordProperties = useComponent("KeywordProperties")
const handleExpansion = useCallback(() => {
setExpanded((prev) => !prev)
@@ -23,7 +28,13 @@ const JSONSchema = ({ schema, name }) => {
}
return (
<article className="json-schema-2020-12">
<JSONSchemaLevelContext.Provider value={nextLevel}>
<article
data-json-schema-level={level}
className={classNames("json-schema-2020-12", {
"json-schema-2020-12--embedded": isEmbedded,
})}
>
<div className="json-schema-2020-12-head">
<Accordion expanded={expanded} onChange={handleExpansion}>
<div className="json-schema-2020-12__title">
@@ -33,66 +44,11 @@ const JSONSchema = ({ schema, name }) => {
</div>
{expanded && (
<div className="json-schema-2020-12-body">
<div className="json-schema-2020-12-property">
<article className="json-schema-2020-12 json-schema-2020-12--embedded">
<div className="json-schema-2020-12-head">
<span className="json-schema-2020-12__title">property1</span>
<span className="json-schema-2020-12__type">Object</span>
<span className="json-schema-2020-12__format">int64</span>
<span className="json-schema-2020-12__limit">[0...100]</span>
<div className="json-schema-2020-12__description">
Whether to turn on or off the light.
</div>
</div>
<div className="json-schema-2020-12-body">
<div className="json-schema-2020-12-property">
<article className="json-schema-2020-12 json-schema-2020-12--embedded">
<div className="json-schema-2020-12-head">
<span className="json-schema-2020-12__title">
property11
</span>
<span className="json-schema-2020-12__type">Object</span>
</div>
</article>
</div>
<div className="json-schema-2020-12-property">
<article className="json-schema-2020-12 json-schema-2020-12--embedded">
<div className="json-schema-2020-12-head">
<span className="json-schema-2020-12__title">
property22
</span>
<span className="json-schema-2020-12__type">Object</span>
</div>
</article>
</div>
<div className="json-schema-2020-12-note">
Additional properties are allowed.
</div>
</div>
</article>
</div>
<div className="json-schema-2020-12-property">
<article className="json-schema-2020-12 json-schema-2020-12--embedded">
<div className="json-schema-2020-12-head">
<span className="json-schema-2020-12__title">property2</span>
<span className="json-schema-2020-12__type">Object</span>
</div>
</article>
</div>
<div className="json-schema-2020-12-property">
<article className="json-schema-2020-12 json-schema-2020-12--embedded">
<div className="json-schema-2020-12-head">
<span className="json-schema-2020-12__title">property3</span>
<span className="json-schema-2020-12__type">Object</span>
</div>
</article>
</div>
<div className="json-schema-2020-12-note">
Additional properties are allowed.
</div>
<KeywordProperties schema={schema} />
</div>
)}
</article>
</JSONSchemaLevelContext.Provider>
)
}

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

@@ -19,6 +19,7 @@
&__title {
@include text_headline($section-models-model-title-font-color);
display: inline-block;
font-weight: bold;
}
@@ -31,8 +32,9 @@
margin: 7px 0;
.json-schema-2020-12__title {
font-size: 12px;
@include text_code();
font-size: 12px;
vertical-align: bottom;
}
}
@@ -42,7 +44,6 @@
font-size: 12px;
text-transform: capitalize;
font-weight: bold;
margin-left: 10px;
&:before {
content: "{";

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

@@ -0,0 +1,38 @@
/**
* @prettier
*/
import React from "react"
import { schema } from "../../prop-types"
import { useFn, useComponent } from "../../hooks"
const Properties = ({ schema }) => {
const fn = useFn()
const JSONSchema = useComponent("JSONSchema")
if (fn.isBooleanJSONSchema(schema)) {
return null
}
const properties = schema.properties || {}
if (Object.keys(properties).length === 0) {
return null
}
return (
<>
{Object.entries(properties).map(([propertyName, propertyValue]) => (
<div key={propertyName} className="json-schema-2020-12-property">
<JSONSchema name={propertyName} schema={propertyValue} />
</div>
))}
</>
)
}
Properties.propTypes = {
schema: schema.isRequired,
}
export default Properties

3
src/core/plugins/json-schema-2020-12/context.js
View File

@@ -6,4 +6,5 @@ import { createContext } from "react"
export const JSONSchemaContext = createContext(null)
JSONSchemaContext.displayName = "JSONSchemaContext"
export default JSONSchemaContext
export const JSONSchemaLevelContext = createContext(0)
JSONSchemaLevelContext.displayName = "JSONSchemaLevelContext"

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

@@ -5,9 +5,10 @@ import React from "react"
import JSONSchema from "./components/JSONSchema/JSONSchema"
import BooleanJSONSchema from "./components/BooleanJSONSchema/BooleanJSONSchema"
import KeywordProperties from "./components/keywords/Properties"
import Accordion from "./components/Accordion/Accordion"
import ChevronRightIcon from "./components/icons/ChevronRight"
import JSONSchemaContext from "./context"
import { JSONSchemaContext } from "./context"
import { getTitle, isBooleanJSONSchema, upperFirst } from "./fn"
export const withJSONSchemaContext = (Component, overrides = {}) => {
@@ -15,6 +16,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
components: {
JSONSchema,
BooleanJSONSchema,
KeywordProperties,
Accordion,
ChevronRightIcon,
...overrides.components,

14
src/core/plugins/json-schema-2020-12/hooks.js
View File

@@ -3,7 +3,7 @@
*/
import { useContext } from "react"
import JSONSchemaContext from "./context"
import { JSONSchemaContext, JSONSchemaLevelContext } from "./context"
export const useConfig = () => {
const { config } = useContext(JSONSchemaContext)
@@ -20,3 +20,15 @@ export const useFn = (fnName = undefined) => {
return typeof fnName !== "undefined" ? fn[fnName] : fn
}
export const useLevel = () => {
const level = useContext(JSONSchemaLevelContext)
return [level, level + 1]
}
export const useIsEmbedded = () => {
const [level] = useLevel()
return level > 0
}

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

@@ -3,6 +3,7 @@
*/
import JSONSchema from "./components/JSONSchema/JSONSchema"
import BooleanJSONSchema from "./components/BooleanJSONSchema/BooleanJSONSchema"
import JSONSchemaKeywordProperties from "./components/keywords/Properties"
import Accordion from "./components/Accordion/Accordion"
import ChevronRightIcon from "./components/icons/ChevronRight"
import { upperFirst } from "./fn"
@@ -12,6 +13,7 @@ const JSONSchema202012Plugin = () => ({
components: {
JSONSchema202012: JSONSchema,
BooleanJSONSchema202012: BooleanJSONSchema,
JSONSchema202012KeywordProperties: JSONSchemaKeywordProperties,
JSONSchema202012Accordion: Accordion,
JSONSchema202012ChevronRightIcon: ChevronRightIcon,
withJSONSchema202012Context: withJSONSchemaContext,

2
src/core/plugins/oas31/wrap-components/models.jsx
View File

@@ -10,6 +10,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
const Models = getComponent("OAS31Models", true)
const JSONSchema = getComponent("JSONSchema202012")
const BooleanJSONSchema = getComponent("BooleanJSONSchema202012")
const KeywordProperties = getComponent("JSONSchema202012KeywordProperties")
const Accordion = getComponent("JSONSchema202012Accordion")
const ChevronRightIcon = getComponent("JSONSchema202012ChevronRightIcon")
const withSchemaContext = getComponent("withJSONSchema202012Context")
@@ -20,6 +21,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
components: {
JSONSchema,
BooleanJSONSchema,
KeywordProperties,
Accordion,
ChevronRightIcon,
},