Added TabBased Material Renderer for Categorization (#863)

* Added TabBased Material Renderer for Categorization

* Added TabBased Renderer for Categorization
* updated categorization example

* Fix compile error

Author: edgarmueller

packages/examples/src/categorization.ts

@@ -6,36 +6,6 @@ export const schema = personCoreSchema;
 export const uischema = {
   type: 'Categorization',
   elements: [
-    {
-      type: 'Categorization',
-      label: 'Sub',
-      elements: [
-        {
-          type: 'Category',
-          label: 'SubPrivate',
-          elements: [
-            {
-              type: 'Control',
-              scope: '#/properties/name'
-            }
-          ]
-        },
-        {
-          type: 'Category',
-          label: 'Additional',
-          elements: [
-            {
-              type: 'Control',
-              scope: '#/properties/nationality'
-            },
-            {
-              type: 'Control',
-              scope: '#/properties/vegetarian'
-            }
-          ]
-        }
-      ]
-    },
     {
       type: 'Category',
       label: 'Private',

packages/material/src/layouts/MaterialCategorizationLayout.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import AppBar from 'material-ui/AppBar';
+import Tabs, { Tab } from 'material-ui/Tabs';
+import {
+  and,
+  Categorization,
+  connectToJsonForms,
+  mapStateToLayoutProps,
+  RankedTester,
+  rankWith,
+  RendererComponent,
+  RendererProps,
+  Tester,
+  UISchemaElement,
+  uiTypeIs
+} from '@jsonforms/core';
+import { MaterialLayoutRenderer, MaterialLayoutRendererProps } from '../util/layout';
+
+const isSingleLevelCategorization: Tester = and(
+    uiTypeIs('Categorization'),
+    (uischema: UISchemaElement): boolean => {
+        const categorization = uischema as Categorization;
+
+        return categorization.elements.reduce((acc, e) => acc && e.type === 'Category', true);
+    }
+);
+
+export const materialCategorizationTester: RankedTester = rankWith(1, isSingleLevelCategorization);
+export interface CategorizationState {
+    value: number;
+  }
+
+export class MaterialCategorizationLayoutRenderer
+    extends RendererComponent<RendererProps, CategorizationState> {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        value: 0
+      };
+    }
+
+    render() {
+        const { uischema, schema, path, visible } = this.props;
+        const { value } = this.state;
+
+        const categorization = uischema as Categorization;
+
+        const childProps: MaterialLayoutRendererProps = {
+            elements: categorization.elements[value].elements,
+            schema,
+            path,
+            direction: 'column',
+            visible
+        };
+        const style: {[x: string]: any} = { marginBottom: '10px' };
+        if (!visible) {
+            style.display = 'none';
+        }
+
+        return (
+            <div style={style}>
+                <AppBar position='static'>
+                <Tabs value={value} onChange={this.handleChange}>
+                    {categorization.elements.map((e, idx) => <Tab  key={idx} label={e.label} />)}
+                </Tabs>
+                </AppBar>
+                <div style={{ marginTop: '0.5em' }}>
+                    <MaterialLayoutRenderer {...childProps}/>
+                </div>
+            </div>
+        );
+    }
+    private handleChange = (_event, value) => {
+        this.setState({ value });
+    }
+}
+
+export default connectToJsonForms(
+  mapStateToLayoutProps
+)(MaterialCategorizationLayoutRenderer);

packages/material/src/layouts/index.ts

@@ -3,8 +3,13 @@ import MaterialHorizontalLayout, {
   materialHorizontalLayoutTester
 } from './MaterialHorizontalLayout';
 import MaterialVerticalLayout, { materialVerticalLayoutTester } from './MaterialVerticalLayout';
+import MaterialCategorizationLayout, {
+  materialCategorizationTester
+} from './MaterialCategorizationLayout';
 
 export {
+  MaterialCategorizationLayout,
+  materialCategorizationTester,
   MaterialGroupLayout,
   materialGroupTester,
   MaterialHorizontalLayout,