Handle recursive oneOf-based schemas.

* Re-structure combinator renderers, so that subschemas are passed to
  sub-sequent JsonForms calls
* Fix path of oneOf renderer
* Use title property if available for displaying oneOf subschemas
* Consistent usage of schema & rootSchema, remove scopedSchema prop
* Refactor mapStateToFieldProps

Author: edgarmueller

packages/angular-material/src/other/master-detail/master.ts

@@ -4,14 +4,13 @@ import { Component } from '@angular/core';
 import { JsonFormsControl } from '@jsonforms/angular';
 import { NgRedux } from '@angular-redux/store';
 import {
+  ArrayControlProps,
   ControlElement,
-  ControlProps,
   JsonFormsState,
   mapDispatchToArrayControlProps,
+  mapStateToArrayControlProps,
   RankedTester,
   rankWith,
-  resolveSchema,
-  toDataPath,
   uiTypeIs
 } from '@jsonforms/core';
 
@@ -109,7 +108,8 @@ export class MasterListComponent extends JsonFormsControl {
   masterItems: any[];
   selectedItem: any;
   selectedItemIdx: number;
-  addItem: (path: string) => () => void;
+  addItem: (path: string, value: any) => () => void;
+  createDefaultValue: () => void;
   removeItems: (path: string, toDelete: any[]) => () => void;
   propsPath: string;
   highlightedIdx: number;
@@ -129,29 +129,21 @@ export class MasterListComponent extends JsonFormsControl {
   ngOnInit() {
     super.ngOnInit();
     const { addItem, removeItems } = mapDispatchToArrayControlProps(
-      this.ngRedux.dispatch,
-      {
-        uischema: this.uischema as ControlElement,
-        schema: this.schema
-      }
+      this.ngRedux.dispatch
     );
     this.addItem = addItem;
     this.removeItems = removeItems;
   }
 
-  mapAdditionalProps(props: ControlProps) {
-    const { data, schema, uischema } = props;
+  mapAdditionalProps(props: ArrayControlProps) {
+    const { data, path, schema, uischema, createDefaultValue } = props;
     const controlElement = uischema as ControlElement;
-    const instancePath = toDataPath(`${controlElement.scope}/items`);
     this.propsPath = props.path;
-    const resolvedSchema = resolveSchema(
-      schema,
-      `${controlElement.scope}/items`
-    );
+    this.createDefaultValue = createDefaultValue;
     const detailUISchema =
       controlElement.options.detail ||
       props.findUISchema(
-        resolvedSchema,
+        schema,
         `${controlElement.scope}/items`,
         props.path,
         'VerticalLayout'
@@ -164,8 +156,8 @@ export class MasterListComponent extends JsonFormsControl {
       const masterItem = {
         label: get(d, labelRefInstancePath),
         data: d,
-        path: `${instancePath}.${index}`,
-        schema: resolvedSchema,
+        path: `${path}.${index}`,
+        schema,
         uischema: detailUISchema
       };
       return masterItem;
@@ -210,12 +202,18 @@ export class MasterListComponent extends JsonFormsControl {
   }
 
   onAddClick() {
-    this.addItem(this.propsPath)();
+    this.addItem(this.propsPath, this.createDefaultValue())();
   }
 
   onDeleteClick(item: any) {
     this.removeItems(this.propsPath, [item.data])();
   }
+
+  protected mapToProps(state: JsonFormsState): ArrayControlProps {
+    const props = mapStateToArrayControlProps(state, this.getOwnProps());
+    const dispatch = mapDispatchToArrayControlProps(this.ngRedux.dispatch);
+    return { ...props, ...dispatch };
+  }
 }
 
 export const masterDetailTester: RankedTester = rankWith(

packages/angular-material/src/other/object.renderer.ts

@@ -54,7 +54,7 @@ export class ObjectControlRenderer extends JsonFormsControl {
   }
   mapAdditionalProps(props: ControlProps) {
     this.detailUiSchema = props.findUISchema(
-      props.scopedSchema,
+      props.schema,
       undefined,
       props.path
     );

packages/angular-material/test/master-detail.spec.ts

@@ -469,7 +469,7 @@ describe('Master detail', () => {
               title: 'Carrots'
             },
             path: 'orders.0',
-            schema: undefined,
+            schema: schema.definitions.order,
             uischema: {
               type: 'VerticalLayout',
               elements: [

packages/angular/src/control.ts

@@ -9,8 +9,7 @@ import {
   JsonSchema,
   mapDispatchToControlProps,
   mapStateToControlProps,
-  OwnPropsOfControl,
-  Resolve
+  OwnPropsOfControl
 } from '@jsonforms/core';
 import { Input, OnDestroy, OnInit } from '@angular/core';
 import { NgRedux } from '@angular-redux/store';
@@ -37,6 +36,7 @@ export class JsonFormsControl extends JsonFormsBaseRenderer<ControlElement>
   description: string;
   error: string | null;
   scopedSchema: JsonSchema;
+  rootSchema: JsonSchema;
   enabled: boolean;
   hidden: boolean;
 
@@ -74,7 +74,7 @@ export class JsonFormsControl extends JsonFormsBaseRenderer<ControlElement>
           label,
           required,
           schema,
-          uischema,
+          rootSchema,
           visible
         } = props;
         this.label = computeLabel(
@@ -86,7 +86,8 @@ export class JsonFormsControl extends JsonFormsBaseRenderer<ControlElement>
         this.enabled = enabled;
         this.enabled ? this.form.enable() : this.form.disable();
         this.hidden = !visible;
-        this.scopedSchema = Resolve.schema(schema, uischema.scope);
+        this.scopedSchema = schema;
+        this.rootSchema = rootSchema;
         this.description =
           this.scopedSchema !== undefined ? this.scopedSchema.description : '';
         this.id = props.id;

packages/core/src/testers/index.ts

@@ -59,9 +59,7 @@ export type RankedTester = (
 ) => number;
 
 export const isControl = (uischema: any): uischema is ControlElement =>
-  !isEmpty(uischema) &&
-  uischema.scope !== undefined &&
-  uischema.scope !== undefined;
+  !isEmpty(uischema) && uischema.scope !== undefined;
 
 /**
  * Only applicable for Controls.
@@ -79,13 +77,16 @@ export const schemaMatches = (
   if (isEmpty(uischema) || !isControl(uischema)) {
     return false;
   }
+  if (isEmpty(schema)) {
+    return false;
+  }
   const schemaPath = uischema.scope;
   if (isEmpty(schemaPath)) {
     return false;
   }
-  let currentDataSchema: JsonSchema = resolveSchema(schema, schemaPath);
-  while (!isEmpty(currentDataSchema) && !isEmpty(currentDataSchema.$ref)) {
-    currentDataSchema = resolveSchema(schema, currentDataSchema.$ref);
+  let currentDataSchema = schema;
+  if (schema.type === 'object') {
+    currentDataSchema = resolveSchema(schema, schemaPath);
   }
   if (currentDataSchema === undefined) {
     return false;
@@ -102,12 +103,9 @@ export const schemaSubPathMatches = (
     return false;
   }
   const schemaPath = uischema.scope;
-  if (isEmpty(schemaPath)) {
-    return false;
-  }
-  let currentDataSchema: JsonSchema = resolveSchema(schema, `${schemaPath}`);
-  while (!isEmpty(currentDataSchema.$ref)) {
-    currentDataSchema = resolveSchema(schema, currentDataSchema.$ref);
+  let currentDataSchema: JsonSchema;
+  if (schema.type === 'object') {
+    currentDataSchema = resolveSchema(schema, schemaPath);
   }
   currentDataSchema = get(currentDataSchema, subPath);
 
@@ -422,10 +420,7 @@ export const isObjectArrayWithNesting = (
           return false;
         }
         wantedNestingByType[val.type] = typeCount - 1;
-        if (wantedNestingByType[val.type] === 0) {
-          return true;
-        }
-        return false;
+        return wantedNestingByType[val.type] === 0;
       })
     ) {
       return true;
@@ -457,13 +452,14 @@ export const isArrayObjectControl = isObjectArrayControl;
  */
 export const isPrimitiveArrayControl = and(
   uiTypeIs('Control'),
-  schemaMatches(
-    schema =>
+  schemaMatches(schema => {
+    return (
       !isEmpty(schema) &&
       schema.type === 'array' &&
       !isEmpty(schema.items) &&
-      !Array.isArray(schema.items) // we don't care about tuples
-  ),
+      !Array.isArray(schema.items)
+    ); // we don't care about tuples
+  }),
   schemaSubPathMatches('items', schema =>
     includes(['integer', 'number', 'boolean', 'string'], schema.type)
   )

packages/core/src/util/field.ts

@@ -26,10 +26,14 @@ import isEmpty from 'lodash/isEmpty';
 import has from 'lodash/has';
 import cloneDeep from 'lodash/cloneDeep';
 import merge from 'lodash/merge';
-import { ControlElement } from '../models/uischema';
-import { findUISchema, getConfig, getData, getErrorAt } from '../reducers';
 import {
-  composeWithUi,
+  findUISchema,
+  getConfig,
+  getData,
+  getErrorAt,
+  getSchema
+} from '../reducers';
+import {
   isEnabled,
   isVisible,
   OwnPropsOfControl,
@@ -42,6 +46,7 @@ import { DispatchPropsOfControl, mapDispatchToControlProps } from './renderer';
 import { JsonFormsState } from '../store';
 import { AnyAction, Dispatch } from 'redux';
 import { JsonFormsFieldRendererRegistryEntry } from '../reducers/fields';
+import { JsonSchema } from '..';
 
 export { JsonFormsFieldRendererRegistryEntry };
 
@@ -54,6 +59,7 @@ export interface OwnPropsOfField extends OwnPropsOfControl {
  */
 export interface StatePropsOfField extends StatePropsOfScopedRenderer {
   isValid: boolean;
+  rootSchema: JsonSchema;
 }
 
 export interface OwnPropsOfEnumField extends OwnPropsOfField, OwnPropsOfEnum {}
@@ -99,7 +105,7 @@ export const mapStateToFieldProps = (
   state: JsonFormsState,
   ownProps: OwnPropsOfField
 ): StatePropsOfField => {
-  const path = composeWithUi(ownProps.uischema, ownProps.path);
+  const { id, schema, path, uischema } = ownProps;
   const visible = has(ownProps, 'visible')
     ? ownProps.visible
     : isVisible(ownProps, state);
@@ -108,27 +114,23 @@ export const mapStateToFieldProps = (
     : isEnabled(ownProps, state);
   const errors = getErrorAt(path)(state).map(error => error.message);
   const isValid = isEmpty(errors);
-  const controlElement = ownProps.uischema as ControlElement;
-  const id = ownProps.id;
   const defaultConfig = cloneDeep(getConfig(state));
   const config = merge(defaultConfig, ownProps.uischema.options);
+  const rootSchema = getSchema(state);
 
   return {
-    data:
-      ownProps.data !== undefined
-        ? Resolve.data(ownProps.data, path)
-        : Resolve.data(getData(state), path),
+    data: Resolve.data(getData(state), path),
     visible,
     enabled,
     id,
     path,
     errors,
     isValid,
-    scopedSchema: Resolve.schema(ownProps.schema, controlElement.scope),
-    uischema: ownProps.uischema,
-    schema: ownProps.schema,
+    schema,
+    uischema,
     config,
-    findUISchema: findUISchema(state)
+    findUISchema: findUISchema(state),
+    rootSchema
   };
 };
 
@@ -160,7 +162,7 @@ export const defaultMapStateToEnumFieldProps = (
 ): StatePropsOfEnumField => {
   const props: StatePropsOfField = mapStateToFieldProps(state, ownProps);
   const options =
-    ownProps.options !== undefined ? ownProps.options : props.scopedSchema.enum;
+    ownProps.options !== undefined ? ownProps.options : props.schema.enum;
   return {
     ...props,
     options

packages/core/src/util/index.ts

@@ -61,7 +61,11 @@ export const formatErrorMessage = (errors: string[]) => {
  * Convenience wrapper around resolveData and resolveSchema.
  */
 const Resolve: {
-  schema(schema: JsonSchema, schemaPath: string): JsonSchema;
+  schema(
+    schema: JsonSchema,
+    schemaPath: string,
+    rootSchema?: JsonSchema
+  ): JsonSchema;
   data(data: any, path: string): any;
 } = {
   schema: resolveSchema,