feat(json-schema-2020-12): add support for defs deep extend

Refs #8513

src/core/plugins/json-schema-2020-12/components/keywords/$defs.jsx

@@ -5,6 +5,7 @@ import React, { useCallback, useState } from "react"
 
 import { schema } from "../../prop-types"
 import { useComponent, useIsExpandedDeeply } from "../../hooks"
+import { JSONSchemaDeepExpansionContext } from "../../context"
 
 const $defs = ({ schema }) => {
   const $defs = schema?.$defs || {}
@@ -15,31 +16,43 @@ const $defs = ({ schema }) => {
 
   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 (
-    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$defs">
-      <Accordion expanded={expanded} onChange={handleExpansion}>
-        <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-property">
-              <JSONSchema name={schemaName} schema={schema} />
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
+    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
+      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$defs">
+        <Accordion expanded={expanded} onChange={handleExpansion}>
+          <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
+            $defs
+          </span>
+        </Accordion>
+        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
+        <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-property">
+                <JSONSchema name={schemaName} schema={schema} />
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </JSONSchemaDeepExpansionContext.Provider>
   )
 }