feat: dependentRequired

src/theme/JSONSchemaViewer/JSONSchemaElements/SchemaConditional/dependentRequired.tsx

@@ -0,0 +1,51 @@
+import React from "react"
+
+import Translate from "@docusaurus/Translate"
+
+import type { JSONSchema, JSONSchemaNS } from "../../types"
+
+type Props = {
+  schema: JSONSchema
+  [x: string]: any
+}
+
+function DependentRequired(props: Props): JSX.Element {
+  const { schema } = props
+
+  // Fast fail
+  if (typeof schema === "boolean") {
+    return <></>
+  }
+
+  let dependentRequired = (schema as JSONSchemaNS.Object)?.dependentRequired!
+
+  let items = Object.entries(dependentRequired).map(
+    ([property1, property2]) => ({
+      id: property1,
+      label: (
+        <Translate
+          values={{
+            id: "json-schema.labels.dependentRequired",
+            ifProperty: property1,
+            count: property2.length,
+            otherProperty: property2.join(" "),
+          }}
+        >
+          {
+            "If {ifProperty} property is provided, then {count} propertie(s) must also be present: {otherProperty}"
+          }
+        </Translate>
+      ),
+    })
+  )
+
+  return (
+    <ul>
+      {items.map((item) => (
+        <li key={item.id}>{item.label}</li>
+      ))}
+    </ul>
+  )
+}
+
+export default DependentRequired

src/theme/JSONSchemaViewer/JSONSchemaElements/SchemaConditional/index.ts

@@ -1,4 +1,6 @@
 export { default as IfElseThen } from "./if-else-then"
 
+export { default as DependentRequired } from "./dependentRequired"
+
 // main entry point
 export { default as SchemaConditional } from "./schemaConditional"

src/theme/JSONSchemaViewer/JSONSchemaElements/SchemaConditional/schemaConditional.tsx

@@ -3,10 +3,10 @@ import React from "react"
 import Translate from "@docusaurus/Translate"
 //import Details from "@theme-original/Details";
 
-import { IfElseThen } from "./index"
+import { IfElseThen, DependentRequired } from "./index"
 import { Collapsible } from "../../components/index"
 
-import type { JSONSchema /*, JSONSchemaNS*/ } from "../../types"
+import type { JSONSchema, JSONSchemaNS } from "../../types"
 
 type Props = {
   schema: JSONSchema
@@ -23,13 +23,13 @@ function SchemaConditional(props: Props): JSX.Element {
 
   // Checks
   const isIfThenElse = schema?.if !== undefined
-  /*
+
   const isDependentRequired =
     (schema as JSONSchemaNS.Object)?.dependentRequired !== undefined
   const isDependentSchemas =
     (schema as JSONSchemaNS.Object)?.dependentSchemas !== undefined
-  const isDependenncies = schema?.dependencies
-  */
+  const isDependenncies = schema?.dependencies !== undefined
+
   return (
     <Collapsible
       summary={
@@ -44,7 +44,11 @@ function SchemaConditional(props: Props): JSX.Element {
         </strong>
       }
     >
+      {/* Handles if-then-else case */}
       {isIfThenElse && <IfElseThen schema={schema} />}
+      {/* Handles dependentRequired case */}
+      {isDependentRequired && <DependentRequired schema={schema} />}
+      {/* Handles dependentSchemas case */}
     </Collapsible>
   )
 }