Improved React Material Object Renderer

* added test cases
* fixed rendering issues

Author: eneufeld

packages/core/src/generators/uischema.ts

@@ -25,7 +25,7 @@
 import * as _ from 'lodash';
 
 import { JsonSchema } from '../models/jsonSchema';
-import { ControlElement, LabelElement, Layout, UISchemaElement } from '../models/uischema';
+import { ControlElement, isGroup, LabelElement, Layout, UISchemaElement } from '../models/uischema';
 import { resolveSchema } from '../util/resolvers';
 
 /**
@@ -109,12 +109,17 @@ const wrapInLayoutIfNecessary = (uischema: UISchemaElement, layoutType: string):
  */
 const addLabel = (layout: Layout, labelName: string) => {
     if (!_.isEmpty(labelName) ) {
-        // add label with name
-        const label: LabelElement = {
-            type: 'Label',
-            text: _.startCase(labelName)
-        };
-        layout.elements.push(label);
+        const fixedLabel = _.startCase(labelName);
+        if (isGroup(layout)) {
+            layout.label = fixedLabel;
+        } else {
+            // add label with name
+            const label: LabelElement = {
+                type: 'Label',
+                text: fixedLabel
+            };
+            layout.elements.push(label);
+        }
     }
 };
 

packages/core/src/models/uischema.ts

@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import {JsonSchema} from './jsonSchema';
+import { JsonSchema } from './jsonSchema';
 
 /**
  * Interface for describing an UI schema element that is referencing
@@ -105,20 +105,20 @@ export interface SchemaBasedCondition extends Condition {
  */
 export interface UISchemaElement {
 
-    /**
-     * The type of this UI schema element.
-     */
-    type: string;
+  /**
+   * The type of this UI schema element.
+   */
+  type: string;
 
-    /**
-     * An optional rule.
-     */
-    rule?: Rule;
+  /**
+   * An optional rule.
+   */
+  rule?: Rule;
 
-    /**
-     * Any additional options.
-     */
-    options?: any;
+  /**
+   * Any additional options.
+   */
+  options?: any;
 }
 
 /**
@@ -221,5 +221,7 @@ export interface Categorization extends UISchemaElement {
    * The child elements of this categorization which are either of type
    * {@link Category} or {@link Categorization}.
    */
-  elements: (Category|Categorization)[];
+  elements: (Category | Categorization)[];
 }
+
+export const isGroup = (layout: Layout): layout is GroupLayout => layout.type === 'Group';

packages/examples/src/index.ts

@@ -49,6 +49,7 @@ import * as text from './text';
 import * as numbers from './numbers';
 import * as listWithDetail from './list-with-detail';
 import * as listWithDetailRegistered from './list-with-detail-registered';
+import * as object from './object';
 import * as i18n from './i18n';
 import * as issue_1169 from './1169';
 export * from './register';
@@ -81,6 +82,7 @@ export {
   numbers,
   listWithDetail,
   listWithDetailRegistered,
+  object,
   i18n,
   issue_1169
 };

packages/examples/src/object.ts

@@ -0,0 +1,79 @@
+import { registerExamples } from './register';
+
+export const schema = {
+    '$schema': 'http://json-schema.org/draft-07/schema#',
+
+    'type': 'object',
+
+    'properties': {
+        'address': {
+            'type': 'object',
+            'properties': {
+                'street_address': { 'type': 'string' },
+                'city': { 'type': 'string' },
+                'state': { 'type': 'string' }
+            },
+            'required': ['street_address', 'city', 'state']
+        },
+        'user': {
+            'type': 'object',
+            'properties': {
+                'name': { 'type': 'string' },
+                'mail': { 'type': 'string' },
+            },
+            'required': ['name', 'mail']
+        }
+    }
+};
+
+export const uischemaRoot = {
+    type: 'Control',
+    scope: '#'
+};
+
+export const uischemaNonRoot = {
+    type: 'VerticalLayout',
+    elements: [
+        {
+            type: 'Control',
+            scope: '#/properties/address'
+        },
+        {
+            type: 'Control',
+            scope: '#/properties/user',
+            rule: {
+                effect: 'SHOW',
+                condition: {
+                  type: 'LEAF' ,
+                  scope: '#/properties/address/properties/state',
+                  expectedValue: 'DC'
+                }
+              }
+        }
+    ]
+};
+
+const data = {
+    'address': {
+        'street_address': '1600 Pennsylvania Avenue NW',
+        'city': 'Washington',
+        'state': 'DC',
+    }
+};
+
+registerExamples([
+    {
+        name: 'rootObject',
+        label: 'Root Object',
+        data,
+        schema,
+        uischema: uischemaRoot
+    },
+    {
+        name: 'object',
+        label: 'Object',
+        data,
+        schema,
+        uischema: uischemaNonRoot
+    },
+]);

packages/material/src/complex/MaterialObjectRenderer.tsx

@@ -1,14 +1,20 @@
-import * as React from 'react';
 import {
     ControlProps,
     findUISchema,
-    isObjectControl, JsonFormsState,
+    GroupLayout,
+    isObjectControl,
+    JsonFormsState,
     JsonSchema,
-    mapStateToControlProps, OwnPropsOfControl,
+    mapStateToControlProps,
+    OwnPropsOfControl,
     RankedTester,
-    rankWith, UISchemaElement,
+    rankWith,
+    UISchemaElement
 } from '@jsonforms/core';
 import { connectToJsonForms, JsonForms } from '@jsonforms/react';
+import { Hidden } from '@material-ui/core';
+import * as _ from 'lodash';
+import * as React from 'react';
 
 interface MaterialObjectRendererProps extends ControlProps {
     findUiSchema(
@@ -28,20 +34,22 @@ class MaterialObjectRenderer extends React.Component<MaterialObjectRendererProps
             visible,
         } = this.props;
 
-        const style: {[x: string]: any} = { marginBottom: '10px' };
-        if (!visible) {
-            style.display = 'none';
-        }
-
         const detailUiSchema = findUiSchema(scopedSchema, undefined, path, 'Group');
+        if (_.isEmpty(path)) {
+            detailUiSchema.type = 'VerticalLayout';
+        } else {
+            (detailUiSchema as GroupLayout).label = _.startCase(path);
+        }
 
         return (
-          <JsonForms
-            visible={visible}
-            schema={scopedSchema}
-            uischema={detailUiSchema}
-            path={path}
-          />
+            <Hidden xsUp={!visible}>
+                <JsonForms
+                    visible={visible}
+                    schema={scopedSchema}
+                    uischema={detailUiSchema}
+                    path={path}
+                />
+            </Hidden>
         );
     }
 }