Rule support for React Vanilla layouts

- Pass enabled prop to individual group elements (React Vanilla)
- Implement enabled prop for Radiogroup (React Vanilla & Material)

Closes #1586

Author: max-elia

packages/material/src/controls/MaterialRadioGroup.tsx

@@ -54,7 +54,8 @@ export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
     visible,
     options,
     handleChange,
-    path
+    path,
+    enabled
   } = props;
   const isValid = errors.length === 0;
   const appliedUiSchemaOptions = merge(
@@ -99,6 +100,7 @@ export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
               key={option.label}
               control={<Radio checked={data === option.value} />}
               label={option.label}
+              disabled={!enabled}
             />
           ))}
         </RadioGroup>

packages/vanilla/src/controls/InputControl.tsx

@@ -57,6 +57,7 @@ export class InputControl extends Control<
       uischema,
       schema,
       visible,
+      enabled,
       required,
       path,
       cells,
@@ -104,6 +105,7 @@ export class InputControl extends Control<
             schema={schema}
             path={path}
             id={id + '-input'}
+            enabled={enabled}
           />
           <div className={divClassNames}>
             {!isValid ? errors : showDescription ? description : null}

packages/vanilla/src/controls/RadioGroup.tsx

@@ -50,7 +50,8 @@ export class RadioGroup extends Control<
       data,
       uischema,
       visible,
-      config
+      config,
+      enabled
     } = this.props;
     const isValid = errors.length === 0;
     const divClassNames = `validation  ${isValid ? classNames.description : 'validation_error'
@@ -93,6 +94,7 @@ export class RadioGroup extends Control<
                 name={id}
                 checked={data === option.value}
                 onChange={ev => this.handleChange(ev.currentTarget.value)}
+                disabled={!enabled}
               />
               <label htmlFor={option.value}>{option.label}</label>
             </div>

packages/vanilla/src/layouts/GroupLayout.tsx

@@ -48,6 +48,7 @@ const GroupLayoutRendererComponent: FunctionComponent<RendererProps & VanillaRen
     schema,
     uischema,
     path,
+    enabled,
     visible,
     getStyle,
     getStyleAsClassName
@@ -70,7 +71,7 @@ const GroupLayoutRendererComponent: FunctionComponent<RendererProps & VanillaRen
             {group.label}
           </legend> : ''
       }
-      {renderChildren(group, schema, childClassNames, path)}
+      {renderChildren(group, schema, childClassNames, path, enabled)}
     </fieldset>
   );
 });

packages/vanilla/src/layouts/HorizontalLayout.tsx

@@ -78,7 +78,7 @@ const HorizontalLayoutRendererComponent: FunctionComponent<RendererProps & Vanil
       getStyle={getStyle}
       getStyleAsClassName={getStyleAsClassName}
     >
-      {renderChildren(horizontalLayout, schema, childClassNames, path)}
+      {renderChildren(horizontalLayout, schema, childClassNames, path, enabled)}
     </JsonFormsLayout>
   );
 });

packages/vanilla/src/layouts/VerticalLayout.tsx

@@ -77,7 +77,7 @@ const VerticalLayoutRendererComponent: FunctionComponent<RendererProps & Vanilla
       getStyle={getStyle}
       getStyleAsClassName={getStyleAsClassName}
     >
-      {renderChildren(verticalLayout, schema, childClassNames, path)}
+      {renderChildren(verticalLayout, schema, childClassNames, path, enabled)}
     </JsonFormsLayout>
   );
 });

packages/vanilla/src/layouts/util.tsx

@@ -37,7 +37,8 @@ export const renderChildren = (
   layout: Layout,
   schema: JsonSchema,
   className: string,
-  path: string
+  path: string,
+  enabled: boolean
 ) => {
   if (isEmpty(layout.elements)) {
     return [];
@@ -54,6 +55,7 @@ export const renderChildren = (
           uischema={child}
           schema={schema}
           path={path}
+          enabled={enabled}
         />
       </div>
     );

packages/vanilla/test/renderers/GroupLayout.test.tsx

@@ -123,6 +123,20 @@ describe('Group layout', () => {
     expect(groupLayout.props().hidden).toBe(true);
   });
 
+  test('pass enabled prop to children', () => {
+    const core = initCore({}, fixture.uischema, {});
+    wrapper = mount(
+      <JsonFormsStateProvider initState={{ core }}>
+        <GroupLayoutRenderer
+          uischema={fixture.uischema}
+          enabled={false}
+        />
+      </JsonFormsStateProvider>
+    );
+    const child = wrapper.find('JsonFormsDispatchRenderer');
+    expect(child.prop('enabled')).toBe(false);
+  });
+
   test('show by default', () => {
     const core = initCore({}, fixture.uischema, {});
     wrapper = mount(