Preserve schemas in React Material Object Renderer

The React Material object renderer supports generating a group layout for its contained
properties. The label of the group layout was unconditionally set, overwriting user
specified 'detail' and registered UI schemas. This is now fixed.

closes #1712

Signed-off-by: Lukas Boll [email protected]

Author: LukasBoll

packages/core/src/reducers/reducers.ts

@@ -67,24 +67,28 @@ export const jsonFormsReducerConfig = {
  * @param schema the JSON schema describing the data to be rendered
  * @param schemaPath the according schema path
  * @param path the instance path
- * @param fallbackLayoutType the type of the layout to use
+ * @param fallback the type of the layout to use or a UI-schema-generator function
  * @param control may be checked for embedded inline uischema options
  */
 export const findUISchema = (
   uischemas: JsonFormsUISchemaRegistryEntry[],
   schema: JsonSchema,
   schemaPath: string,
   path: string,
-  fallbackLayoutType = 'VerticalLayout',
+  fallback: string | (() => UISchemaElement) = 'VerticalLayout',
   control?: ControlElement,
   rootSchema?: JsonSchema
 ): UISchemaElement => {
   // handle options
   if (control && control.options && control.options.detail) {
     if (typeof control.options.detail === 'string') {
       if (control.options.detail.toUpperCase() === 'GENERATE') {
+        //use fallback generation function
+        if(typeof fallback === "function"){
+          return fallback();
+        }
         // force generation of uischema
-        return Generate.uiSchema(schema, fallbackLayoutType);
+        return Generate.uiSchema(schema, fallback);
       }
     } else if (typeof control.options.detail === 'object') {
       // check if detail is a valid uischema
@@ -99,7 +103,11 @@ export const findUISchema = (
   // default
   const uiSchema = findMatchingUISchema(uischemas)(schema, schemaPath, path);
   if (uiSchema === undefined) {
-    return Generate.uiSchema(schema, fallbackLayoutType, '#', rootSchema);
+    //use fallback generation function
+    if(typeof fallback === 'function'){
+      return fallback();
+    }
+    return Generate.uiSchema(schema, fallback, '#', rootSchema);
   }
   return uiSchema;
 };

packages/examples/src/examples/object.ts

@@ -72,6 +72,19 @@ export const uischemaNonRoot = {
           scope: '#/properties/address/properties/state',
           expectedValue: 'DC'
         }
+      },
+      options: {
+        detail: {
+          type: 'Group',
+          label: 'User Data',
+          elements: [
+            { type: 'Control', scope: '#/properties/name'},
+            {
+              type: 'Control',
+              scope: '#/properties/mail'
+            }
+          ]
+        }
       }
     }
   ]

packages/material/src/complex/MaterialObjectRenderer.tsx

@@ -25,7 +25,7 @@
 import isEmpty from 'lodash/isEmpty';
 import {
   findUISchema,
-  GroupLayout,
+  Generate,
   isObjectControl,
   RankedTester,
   rankWith,
@@ -54,17 +54,12 @@ export const MaterialObjectRenderer = ({
         schema,
         uischema.scope,
         path,
-        'Group',
+        () => isEmpty(path) ? Generate.uiSchema(schema, 'VerticalLayout') : {...Generate.uiSchema(schema, 'Group'), label},
         uischema,
         rootSchema
       ),
-    [uischemas, schema, uischema.scope, path, uischema, rootSchema]
+    [uischemas, schema, uischema.scope, path, label, uischema, rootSchema]
   );
-  if (isEmpty(path)) {
-    detailUiSchema.type = 'VerticalLayout';
-  } else {
-    (detailUiSchema as GroupLayout).label = label;
-  }
   return (
     <Hidden xsUp={!visible}>
       <JsonFormsDispatch