Improve React Vanilla Array Control rendering

Replaces the array control fieldset rendering with a div/header section similar
to the array table control.

Signed-off-by: Ralph Soika <[email protected]>

Author: rsoika

packages/vanilla/example/example.css

@@ -406,12 +406,12 @@ jsonforms-tree>dialog>.content {
   border-bottom: none;
 }
 
-.array-table-layout.control>header {
+.array-table-layout.control>header, .array-control-layout.control>header {
   display: flex;
   margin: 0.25em;
 }
 
-.array-table-layout header label {
+.array-table-layout header label, .array-control-layout header label {
   flex: 1;
   font-weight: bold;
 }
@@ -447,4 +447,11 @@ jsonforms-tree>dialog>.content {
 
 .array-table-layout td>* {
   flex: 1;
-}
+}
+.array-control-layout .children>div {
+	border-top: 1px solid var(--jsf-border-color);
+	padding-top: 10px;
+} 
+
+
+

packages/vanilla/src/complex/array/ArrayControl.tsx

@@ -24,58 +24,75 @@
 */
 import range from 'lodash/range';
 import React, { useMemo } from 'react';
-import { ArrayControlProps, composePaths, createDefaultValue, findUISchema } from '@jsonforms/core';
+import { ArrayControlProps, composePaths, createDefaultValue, findUISchema, Helpers, ControlElement } from '@jsonforms/core';
 import { JsonFormsDispatch } from '@jsonforms/react';
 import { VanillaRendererProps } from '../../index';
 
+const { convertToValidClassName } = Helpers;
+
 export const ArrayControl = ({
   classNames,
   data,
   label,
   path,
   schema,
+  errors,
   addItem,
   uischema,
   uischemas,
+  getStyleAsClassName,
   renderers,
   rootSchema
 }: ArrayControlProps & VanillaRendererProps) => {
+	
+  const controlElement = uischema as ControlElement;
   const childUiSchema = useMemo(
     () => findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema),
     [uischemas, schema, uischema.scope, path, uischema, rootSchema]
   );
+  const isValid = errors.length === 0;
+  const validationClass = getStyleAsClassName('array.control.validation');
+  const divClassNames = [validationClass]
+    .concat(isValid ? '' : getStyleAsClassName('array.control.validation.error'))
+    .join(' ');  
+  const buttonClass = getStyleAsClassName('array.control.button');
+  const labelClass = getStyleAsClassName('array.control.label');
+  const controlClass = [
+      getStyleAsClassName('array.control'),
+      convertToValidClassName(controlElement.scope)
+    ].join(' ');
+  
   return (
-    <div className={classNames.wrapper}>
-      <fieldset className={classNames.fieldSet}>
-        <legend>
-          <button
-            className={classNames.button}
+    <div className={controlClass}>
+      <header>
+        <label className={labelClass}>{label}</label>
+        <button
+            className={buttonClass}
             onClick={addItem(path, createDefaultValue(schema))}
-          >
-            +
-          </button>
-          <label className={'array.label'}>{label}</label>
-        </legend>
-        <div className={classNames.children}>
-          {data ? (
-            range(0, data.length).map(index => {
-              const childPath = composePaths(path, `${index}`);
-
-              return (
-                <JsonFormsDispatch
-                  schema={schema}
-                  uischema={childUiSchema || uischema}
-                  path={childPath}
-                  key={childPath}
-                  renderers={renderers}
-                />
-              );
-            })
-          ) : (
-              <p>No data</p>
-            )}
-        </div>
-      </fieldset>
+        >Add to {label}
+	    </button>
+      </header>
+      <div className={divClassNames}>
+        {errors}
+      </div>      
+      <div className={classNames.children}>
+        {data ? (
+          range(0, data.length).map(index => {
+            const childPath = composePaths(path, `${index}`);
+            return (
+              <JsonFormsDispatch
+                schema={schema}
+                uischema={childUiSchema || uischema}
+                path={childPath}
+                key={childPath}
+                renderers={renderers}
+              />
+            );
+          })
+        ) : (
+            <p>No data</p>
+        )}
+      </div>
     </div>
   );
 };

packages/vanilla/src/styles/styles.ts

@@ -137,6 +137,18 @@ export const vanillaStyles: StyleDef[] = [
     name: 'array.table',
     classNames: ['array-table-layout', 'control']
   },
+  {
+    name: 'array.control.validation.error',
+    classNames: ['validation_error']
+  },
+  {
+    name: 'array.control.validation',
+    classNames: ['validation']
+  },
+  {
+    name: 'array.control',
+    classNames: ['array-control-layout', 'control']
+  },  
   {
     name: 'input.description',
     classNames: ['input-description']