Added control for the arrayRenderer, consolidate module, added styles (…

…#2011) * added control for the arrayRenderer, consolidate module, added styles Signed-off-by: Ralph Soika <ralph.soika@imixs.com>
eclipsesource · Sep 8, 2022 · 79e1c56 · 79e1c56
1 parent 852057c
commit 79e1c56
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 122 deletions.
diff --git a/packages/vanilla/example/example.css b/packages/vanilla/example/example.css
@@ -416,6 +416,12 @@ jsonforms-tree>dialog>.content {
   font-weight: bold;
 }
 
+.array-control-layout.control>.children .child-controls {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0 1em 0.75em 0;
+}
+
 .array-table-layout table {
   flex: 1;
   display: flex;

diff --git a/packages/vanilla/src/complex/array/ArrayControl.tsx b/packages/vanilla/src/complex/array/ArrayControl.tsx
diff --git a/packages/vanilla/src/complex/array/ArrayControlRenderer.tsx b/packages/vanilla/src/complex/array/ArrayControlRenderer.tsx
@@ -22,19 +22,115 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React from 'react';
-
-import {
-    ArrayControlProps,
-    ControlElement,
-    Helpers
-} from '@jsonforms/core';
-import { withJsonFormsArrayControlProps } from '@jsonforms/react';
-import { ArrayControl } from './ArrayControl';
-import { withVanillaControlProps } from '../../util';
+import range from 'lodash/range';
+import React, { useMemo } from 'react';
+import { ArrayControlProps, composePaths, createDefaultValue, findUISchema, Helpers, ControlElement } from '@jsonforms/core';
+import { JsonFormsDispatch,withJsonFormsArrayControlProps } from '@jsonforms/react';
 import { VanillaRendererProps } from '../../index';
+import { withVanillaControlProps } from '../../util';
+
+const { convertToValidClassName } = Helpers;
+
+export const ArrayControl = ({
+  classNames,
+  data,
+  label,
+  path,
+  schema,
+  errors,
+  addItem,
+  removeItems,
+  moveUp,
+  moveDown,
+  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 buttonClassAdd = getStyleAsClassName('array.control.add');
+  const labelClass = getStyleAsClassName('array.control.label');
+  const childControlsClass = getStyleAsClassName('array.child.controls');
+  const buttonClassUp = getStyleAsClassName('array.child.controls.up');
+  const buttonClassDown = getStyleAsClassName('array.child.controls.down');
+  const buttonClassDelete = getStyleAsClassName('array.child.controls.delete');
+  const controlClass = [
+      getStyleAsClassName('array.control'),
+      convertToValidClassName(controlElement.scope)
+    ].join(' ');
+
+  return (
+    <div className={controlClass}>
+      <header>
+        <label className={labelClass}>{label}</label>
+        <button
+            className={buttonClassAdd}
+            onClick={addItem(path, createDefaultValue(schema))}
+        >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 (
+              <div key={index}>
+                <JsonFormsDispatch
+                  schema={schema}
+                  uischema={childUiSchema || uischema}
+                  path={childPath}
+                  key={childPath}
+                  renderers={renderers}
+                />                
+                <div className={childControlsClass}>
+                  <button
+                    className={buttonClassUp}
+              	    aria-label={`Up`}
+                    onClick={() => {
+                      moveUp(path,index)();
+                  }}>Up</button>
+                  <button
+                    className={buttonClassDown}
+                    aria-label={`Down`}
+                    onClick={() => {
+                      moveDown(path,index)();
+                  }}>Down</button>
+                  <button
+                    className={buttonClassDelete}
+                    aria-label={`Delete`}
+                    onClick={() => {
+                      if (window.confirm('Are you sure you wish to delete this item?')) {
+                        removeItems(path,[index])();
+                      }
+                  }}>Delete</button>
+                </div>
+              </div>
+            );
+          })
+        ) : (
+            <p>No data</p>
+        )}
+      </div>
+    </div>
+  );
+};
 
-const ArrayControlRenderer =
+
+export const ArrayControlRenderer =
     ({
         schema,
         uischema,
@@ -46,12 +142,13 @@ const ArrayControlRenderer =
         getStyle,
         getStyleAsClassName,
         removeItems,
+        moveUp,
+        moveDown,        
         id,
         visible,
         enabled,
         errors
     }: ArrayControlProps & VanillaRendererProps) => {
-
         const controlElement = uischema as ControlElement;
         const labelDescription = Helpers.createLabelDescriptionFrom(controlElement, schema);
         const label = labelDescription.show ? labelDescription.text : '';
@@ -69,24 +166,26 @@ const ArrayControlRenderer =
 
         return (
             <ArrayControl
-                errors={errors}
-                getStyle={getStyle}
-                getStyleAsClassName={getStyleAsClassName}
-                removeItems={removeItems}
                 classNames={classNames}
                 data={data}
                 label={label}
                 path={path}
+                schema={schema}
+                errors={errors}
                 addItem={addItem}
-                uischemas={uischemas}
+                removeItems={removeItems}
+                moveUp={moveUp}
+                moveDown={moveDown}
                 uischema={uischema}
-                schema={schema}
+                uischemas={uischemas}
+                getStyleAsClassName={getStyleAsClassName}
                 rootSchema={rootSchema}
                 id={id}
                 visible={visible}
                 enabled={enabled}
+                getStyle={getStyle}
             />
         );
     };
-
+    
 export default withVanillaControlProps(withJsonFormsArrayControlProps(ArrayControlRenderer));
diff --git a/packages/vanilla/src/complex/array/index.ts b/packages/vanilla/src/complex/array/index.ts
@@ -27,10 +27,8 @@ import {
   RankedTester,
   rankWith
 } from '@jsonforms/core';
-import ArrayControlRenderer from './ArrayControlRenderer';
-import { ArrayControl } from './ArrayControl';
-
-export { ArrayControl, ArrayControlRenderer };
+import ArrayControlRenderer, { ArrayControl } from './ArrayControlRenderer';
+export { ArrayControlRenderer, ArrayControl };
 
 export const arrayControlTester: RankedTester = rankWith(
   4,

diff --git a/packages/vanilla/src/styles/styles.ts b/packages/vanilla/src/styles/styles.ts
@@ -145,10 +145,30 @@ export const vanillaStyles: StyleDef[] = [
     name: 'array.control.validation',
     classNames: ['validation']
   },
+  {
+    name: 'array.control.add',
+    classNames: ['button-add']
+  },  
+  {
+    name: 'array.child.controls',
+    classNames: ['child-controls']
+  },
+  {
+    name: 'array.child.controls.up',
+    classNames: ['button-up']
+  },  
+  {
+    name: 'array.child.controls.down',
+    classNames: ['button-down']
+  },  
+  {
+    name: 'array.child.controls.delete',
+    classNames: ['button-delete']
+  },  
   {
     name: 'array.control',
     classNames: ['array-control-layout', 'control']
-  },  
+  },    
   {
     name: 'input.description',
     classNames: ['input-description']