Render array according to optional detail information

 * Force UISchema Generation with 'options.detail = generate'
 * Specificy inline UISchema by providing it in 'options.detail'
 * In all other cases UISchema is queried or generated as before

Author: sdirix

packages/core/src/reducers/index.ts

@@ -42,7 +42,7 @@ import {
 } from './core';
 import { JsonFormsState } from '../store';
 import { findMatchingUISchema, uischemaRegistryReducer, UISchemaTester } from './uischemas';
-import { Generate, JsonSchema, UISchemaElement } from '..';
+import { ControlElement, Generate, JsonSchema, UISchemaElement } from '..';
 import { fetchLocale, findLocalizedSchema, i18nReducer, findLocalizedUISchema } from './i18n';
 
 export {
@@ -79,9 +79,26 @@ export const findUISchema = (state: JsonFormsState) =>
   (schema: JsonSchema,
    schemaPath: string,
    path: string,
-   fallbackLayoutType = 'VerticalLayout'
+   fallbackLayoutType = 'VerticalLayout',
+   control?: ControlElement
   ): UISchemaElement => {
-    const uiSchema = findMatchingUISchema(state.jsonforms.uischemas)(schema, schemaPath, path);
+    // handle options
+    if (control && control.options && control.options.detail) {
+      if (typeof control.options.detail === 'string') {
+        if (control.options.detail.toUpperCase() === 'GENERATE') {
+          // force generation of uischema
+          return Generate.uiSchema(schema, fallbackLayoutType);
+        }
+      } else if (typeof control.options.detail === 'object') {
+        // check if detail is a valid uischema
+        if (control.options.detail.type && typeof control.options.detail.type === 'string') {
+          return control.options.detail as UISchemaElement;
+        }
+      }
+    }
+    // default
+    const uiSchema = findMatchingUISchema(state.jsonforms.uischemas)
+    (schema, schemaPath, path);
     if (uiSchema === undefined) {
       return Generate.uiSchema(schema, fallbackLayoutType);
     }

packages/core/src/util/renderer.ts

@@ -222,9 +222,11 @@ export interface StatePropsOfScopedRenderer extends OwnPropsOfControl, StateProp
      * @param schemaPath the according schema path
      * @param path the instance path
      * @param fallbackLayoutType the type of the layout to use
+     * @param control may be checked for embedded inline uischema options
      */
     findUISchema(schema: JsonSchema, schemaPath: string,
-                 path: string, fallbackLayoutType?: string): UISchemaElement;
+                 path: string, fallbackLayoutType?: string,
+                 control?: ControlElement): UISchemaElement;
 }
 
 /**

packages/examples/src/arrays-with-detail.ts

@@ -62,11 +62,11 @@ export const uischema = {
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/date'
+              scope: '#/properties/message'
             },
             {
               type: 'Control',
-              scope: '#/properties/message'
+              scope: '#/properties/date'
             }
           ]
         }

packages/material/src/layouts/MaterialArrayLayout.tsx

@@ -96,7 +96,8 @@ export const MaterialArrayLayout =
           {
             data ? _.map(data, (childData, index) => {
 
-              const foundUISchema = findUISchema(scopedSchema, uischema.scope, path);
+              const foundUISchema =
+                findUISchema(scopedSchema, uischema.scope, path, undefined, uischema);
               const childPath = composePaths(path, `${index}`);
               const childLabel = childData[firstPrimitiveProp];
 

packages/material/test/renderers/MaterialArrayLayout.test.tsx

@@ -111,12 +111,53 @@ const nestedSchema2 = {
   }
 };
 
+const uischemaOptions: {
+  generate: ControlElement,
+  default: ControlElement,
+  inline: ControlElement,
+} = {
+  default: {
+    type: 'Control',
+    scope: '#',
+    options: {
+      detail : 'DEFAULT'
+    }
+  },
+  generate: {
+    type: 'Control',
+    scope: '#',
+    options: {
+      detail : 'GENERATE'
+    }
+  },
+  inline: {
+    type: 'Control',
+    scope: '#',
+    options: {
+      detail : {
+        type: 'HorizontalLayout',
+        elements: [
+          {
+            type: 'Control',
+            scope: '#/properties/message'
+          }
+        ]
+      }
+    }
+  }
+};
+
 describe('Material array layout', () => {
-  it('should only be applicable for intermediate array', () => {
+  it('should only be applicable for intermediate array or when containing proper options', () => {
     expect(materialArrayLayoutTester(uischema, schema)).toBe(-1);
     expect(materialArrayLayoutTester(uischema, nestedSchema)).toBe(4);
     expect(materialArrayLayoutTester(uischema, nestedSchema2)).toBe(4);
+
+    expect(materialArrayLayoutTester(uischemaOptions.default, schema)).toBe(-1);
+    expect(materialArrayLayoutTester(uischemaOptions.generate, schema)).toBe(4);
+    expect(materialArrayLayoutTester(uischemaOptions.inline, schema)).toBe(4);
   });
+
   it('should render two by two children', () => {
     const store = initJsonFormsStore();
     const tree = TestUtils.renderIntoDocument(
@@ -129,4 +170,30 @@ describe('Material array layout', () => {
     // 2 data entries with each having 2 controls
     expect(controls.length).toBe(4);
   });
+
+  it('should generate uischema when options.detail=GENERATE', () => {
+    const store = initJsonFormsStore();
+    const tree = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <MaterialArrayLayout schema={schema} uischema={uischemaOptions.generate}/>
+      </Provider>
+    );
+
+    const controls = TestUtils.scryRenderedDOMComponentsWithTag(tree, 'input');
+    // 2 data entries with each having 2 controls
+    expect(controls.length).toBe(4);
+  });
+
+  it('should use inline options.detail uischema', () => {
+    const store = initJsonFormsStore();
+    const tree = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <MaterialArrayLayout schema={schema} uischema={uischemaOptions.inline}/>
+      </Provider>
+    );
+
+    const controls = TestUtils.scryRenderedDOMComponentsWithTag(tree, 'input');
+    // 2 data entries with each having 1 control
+    expect(controls.length).toBe(2);
+  });
 });