fix(JSON Schema): nested items/objects and oneOf

src/JSONSchema/JSONSchema.test.tsx

@@ -16,3 +16,43 @@ it("renders empty with empty schema", () => {
   expect(div.innerHTML).toBe("");
   ReactDOM.unmountComponentAtNode(div);
 });
+
+it("renders oneOf schema", () => {
+  const div = document.createElement("div");
+  const s = {
+    oneOf: [
+      {
+        type: "string",
+      },
+      {
+        type: "number",
+      },
+    ],
+  } as JSONSchema4;
+  ReactDOM.render(<JSONSchema schema={s}/>, div);
+  expect(div.innerHTML.includes("string")).toBe(true);
+  expect(div.innerHTML.includes("number")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders with a nested schema object", () => {
+  const div = document.createElement("div");
+  const schema = {
+    properties: {
+      name: {
+        properties: {
+          foo: {
+            type: "string",
+          },
+        },
+        type: "object",
+      },
+    },
+    type: "object",
+  } as JSONSchema4;
+  ReactDOM.render(<JSONSchema schema={schema}/>, div);
+  expect(div.innerHTML.includes("foo")).toBe(true);
+  expect(div.innerHTML.includes("string")).toBe(true);
+  expect(div.innerHTML.includes("object")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/JSONSchema/JSONSchema.tsx

@@ -14,15 +14,15 @@ class JSONSchema extends Component<IProps> {
     const { schema } = this.props;
     if (!schema) { return null; }
     if (_.isEmpty(schema)) { return null; }
-    if (schema && schema.type && !schema.properties && schema.oneOf) {
+    if (schema && !schema.properties && schema.oneOf) {
       return (
         <>
           {schema.oneOf &&
             <>
-              <Typography variant="body1">One Of</Typography>}
+              <Typography variant="body1">one of</Typography>
               {schema.oneOf.map((item) => {
                 return (
-                  <PrimitiveField schema={item} />
+                  <JSONSchema schema={item} />
                 );
               })}
             </>
@@ -35,11 +35,11 @@ class JSONSchema extends Component<IProps> {
       arrayWithItems = _.isArray(arrayWithItems) ? arrayWithItems : [arrayWithItems];
       return (
         <>
-          <Typography variant="body1">Array Of</Typography>
+          <Typography variant="body1">array of</Typography>
           <JSONSchemaFields schema={schema} />
           {arrayWithItems.map((item: JSONSchema4) => {
             return (
-              <PrimitiveField schema={item} />
+              <JSONSchema schema={item} />
             );
           })}
         </>

src/JSONSchema/fields/JSONSchemaFields.test.tsx

@@ -75,3 +75,25 @@ it("renders with a schema without required", () => {
 
   ReactDOM.unmountComponentAtNode(div);
 });
+
+it("renders with a nested schema object", () => {
+  const div = document.createElement("div");
+  const schema = {
+    properties: {
+      name: {
+        type: "object",
+        properties: {
+          foo: {
+            type: "string"
+          }
+        }
+      },
+    },
+  } as JSONSchema4;
+  ReactDOM.render(<JSONSchemaFields schema={schema}/>, div);
+  console.log('div', div.innerHTML);
+  expect(div.innerHTML.includes("foo")).toBe(true);
+  expect(div.innerHTML.includes("string")).toBe(true);
+  expect(div.innerHTML.includes("object")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/JSONSchema/fields/JSONSchemaFields.tsx

@@ -41,6 +41,22 @@ class JSONSchemaFields extends Component<IProps> {
             </TableHead>
             <TableBody>
               {schema.properties && _.map(schema.properties, (prop, name) => {
+                // support nested objects
+                if (prop.type === "object") {
+                  return (
+                    <TableRow>
+                      <TableCell colSpan={1}>
+                        {name}
+                      </TableCell>
+                      <TableCell colSpan={1}>
+                        <Typography variant="body1" color="primary">object</Typography>
+                      </TableCell>
+                      <TableCell colSpan={5}>
+                         <WrappedJSONSchemaFields schema={prop}/>
+                      </TableCell>
+                    </TableRow>
+                  );
+                }
                 if (prop.oneOf) {
                   return (
                     <TableRow>
@@ -77,5 +93,6 @@ class JSONSchemaFields extends Component<IProps> {
     );
   }
 }
+const WrappedJSONSchemaFields = withStyles(styles)(JSONSchemaFields);
 
-export default withStyles(styles)(JSONSchemaFields);
+export default WrappedJSONSchemaFields;