diff --git a/src/core/plugins/json-schema-2020-12/components/Accordion/Accordion.jsx b/src/core/plugins/json-schema-2020-12/components/Accordion/Accordion.jsx index 5d170d48..f983b066 100644 --- a/src/core/plugins/json-schema-2020-12/components/Accordion/Accordion.jsx +++ b/src/core/plugins/json-schema-2020-12/components/Accordion/Accordion.jsx @@ -18,7 +18,11 @@ const Accordion = ({ expanded, children, onChange }) => { ) return ( - + ) +} + +ExpandDeepButton.propTypes = { + expanded: PropTypes.bool.isRequired, + onClick: PropTypes.func.isRequired, +} + +export default ExpandDeepButton 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 new file mode 100644 index 00000000..525bec22 --- /dev/null +++ b/src/core/plugins/json-schema-2020-12/components/ExpandDeepButton/_expand-deep-button.scss @@ -0,0 +1,6 @@ +.json-schema-2020-12-expand-deep-button { + @include text_headline($section-models-model-title-font-color); + font-size: 12px; + color: #6b6b6b; + border: none; +} 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 0ed71b2c..7749d225 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 @@ -1,53 +1,91 @@ /** * @prettier */ -import React, { useState, useCallback } from "react" +import React, { useState, useCallback, useEffect } from "react" import PropTypes from "prop-types" import classNames from "classnames" import * as propTypes from "../../prop-types" -import { useComponent, useFn, useLevel, useIsEmbedded } from "../../hooks" -import { JSONSchemaLevelContext } from "../../context" +import { + useComponent, + useFn, + useLevel, + useIsEmbedded, + useIsExpandedDeeply, +} from "../../hooks" +import { + JSONSchemaLevelContext, + JSONSchemaDeepExpansionContext, +} from "../../context" const JSONSchema = ({ schema, name }) => { - const [expanded, setExpanded] = useState(false) - + const isExpandedDeeply = useIsExpandedDeeply() + const [expanded, setExpanded] = useState(isExpandedDeeply) + const [expandedDeeply, setExpandedDeeply] = 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 ExpandDeepButton = useComponent("ExpandDeepButton") + /** + * Event handlers. + */ const handleExpansion = useCallback(() => { setExpanded((prev) => !prev) }, []) + const handleExpansionDeep = useCallback(() => { + setExpanded((prev) => !prev) + setExpandedDeeply((prev) => !prev) + }, []) + /** + * Effects handlers. + */ + useEffect(() => { + setExpandedDeeply(isExpandedDeeply) + }, [isExpandedDeeply]) + + useEffect(() => { + setExpandedDeeply(expandedDeeply) + }, [expandedDeeply]) + + /** + * Rendering handlers. + */ if (fn.isBooleanJSONSchema(schema)) { return } return ( -
-
- -
- {name || fn.getTitle(schema)} -
- -
- {expanded && ( -
- + +
+
+ +
+ {name || fn.getTitle(schema)} +
+ +
- )} -
+ {expanded && ( +
+ +
+ )} +
+ ) } diff --git a/src/core/plugins/json-schema-2020-12/components/_all.scss b/src/core/plugins/json-schema-2020-12/components/_all.scss index 33380233..e51f8804 100644 --- a/src/core/plugins/json-schema-2020-12/components/_all.scss +++ b/src/core/plugins/json-schema-2020-12/components/_all.scss @@ -1,3 +1,4 @@ @import './BooleanJSONSchema/boolean-json-schema'; @import './JSONSchema/json-schema'; @import './Accordion/accordion'; +@import './ExpandDeepButton/expand-deep-button'; diff --git a/src/core/plugins/json-schema-2020-12/context.js b/src/core/plugins/json-schema-2020-12/context.js index 3d1bf85f..99311595 100644 --- a/src/core/plugins/json-schema-2020-12/context.js +++ b/src/core/plugins/json-schema-2020-12/context.js @@ -8,3 +8,6 @@ JSONSchemaContext.displayName = "JSONSchemaContext" export const JSONSchemaLevelContext = createContext(0) JSONSchemaLevelContext.displayName = "JSONSchemaLevelContext" + +export const JSONSchemaDeepExpansionContext = createContext(false) +JSONSchemaDeepExpansionContext.displayName = "JSONSchemaDeepExpansionContext" diff --git a/src/core/plugins/json-schema-2020-12/hoc.jsx b/src/core/plugins/json-schema-2020-12/hoc.jsx index 209430f7..b2d516f6 100644 --- a/src/core/plugins/json-schema-2020-12/hoc.jsx +++ b/src/core/plugins/json-schema-2020-12/hoc.jsx @@ -7,6 +7,7 @@ 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 ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton" import ChevronRightIcon from "./components/icons/ChevronRight" import { JSONSchemaContext } from "./context" import { getTitle, isBooleanJSONSchema, upperFirst } from "./fn" @@ -18,6 +19,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => { BooleanJSONSchema, KeywordProperties, Accordion, + ExpandDeepButton, ChevronRightIcon, ...overrides.components, }, diff --git a/src/core/plugins/json-schema-2020-12/hooks.js b/src/core/plugins/json-schema-2020-12/hooks.js index afdd4c5c..1d6c6596 100644 --- a/src/core/plugins/json-schema-2020-12/hooks.js +++ b/src/core/plugins/json-schema-2020-12/hooks.js @@ -3,7 +3,11 @@ */ import { useContext } from "react" -import { JSONSchemaContext, JSONSchemaLevelContext } from "./context" +import { + JSONSchemaContext, + JSONSchemaLevelContext, + JSONSchemaDeepExpansionContext, +} from "./context" export const useConfig = () => { const { config } = useContext(JSONSchemaContext) @@ -32,3 +36,7 @@ export const useIsEmbedded = () => { return level > 0 } + +export const useIsExpandedDeeply = () => { + return useContext(JSONSchemaDeepExpansionContext) +} diff --git a/src/core/plugins/json-schema-2020-12/index.js b/src/core/plugins/json-schema-2020-12/index.js index 212a07d0..c2910c21 100644 --- a/src/core/plugins/json-schema-2020-12/index.js +++ b/src/core/plugins/json-schema-2020-12/index.js @@ -5,6 +5,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 ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton" import ChevronRightIcon from "./components/icons/ChevronRight" import { upperFirst } from "./fn" import { withJSONSchemaContext } from "./hoc" @@ -15,6 +16,7 @@ const JSONSchema202012Plugin = () => ({ BooleanJSONSchema202012: BooleanJSONSchema, JSONSchema202012KeywordProperties: JSONSchemaKeywordProperties, JSONSchema202012Accordion: Accordion, + JSONSchema202012ExpandDeepButton: ExpandDeepButton, JSONSchema202012ChevronRightIcon: ChevronRightIcon, withJSONSchema202012Context: withJSONSchemaContext, }, diff --git a/src/core/plugins/oas31/wrap-components/models.jsx b/src/core/plugins/oas31/wrap-components/models.jsx index a32d1f8f..0aade56f 100644 --- a/src/core/plugins/oas31/wrap-components/models.jsx +++ b/src/core/plugins/oas31/wrap-components/models.jsx @@ -12,6 +12,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => { const BooleanJSONSchema = getComponent("BooleanJSONSchema202012") const KeywordProperties = getComponent("JSONSchema202012KeywordProperties") const Accordion = getComponent("JSONSchema202012Accordion") + const ExpandDeepButton = getComponent("JSONSchema202012ExpandDeepButton") const ChevronRightIcon = getComponent("JSONSchema202012ChevronRightIcon") const withSchemaContext = getComponent("withJSONSchema202012Context") const ModelsWithJSONContext = withSchemaContext(Models, { @@ -23,6 +24,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => { BooleanJSONSchema, KeywordProperties, Accordion, + ExpandDeepButton, ChevronRightIcon, }, fn: {