Merge branch 'master' into issue-1884

MIGRATION.md

@@ -16,15 +16,21 @@ Therefore JSON Forms was not able to properly run the testers on schemas contain
 The workaround for this was to resolve the JSON Schema by hand before handing it over to JSON Forms.
 Only the React renderers did this automatically but we removed this functionality, see the next section for more information.
 
-We now added an additional parameter to the testers, the `rootSchema`.
+We now added an additional parameter to the testers, the new `TesterContext`.
 
 ```ts
-type Tester = (uischema: UISchemaElement, schema: JsonSchema, rootSchema: JsonSchema) => boolean;
-type RankedTester = (uischema: UISchemaElement, schema: JsonSchema, rootSchema: JsonSchema) => number;
+interface TesterContext {
+  rootSchema: JsonSchema;
+  config: any;
+}
+
+type Tester = (uischema: UISchemaElement, schema: JsonSchema, context: TesterContext) => boolean;
+type RankedTester = (uischema: UISchemaElement, schema: JsonSchema, context: TesterContext) => number;
 ```
 
-This allows the testers to resolve any `$ref` they might encounter in their handed over `schema`.
+This allows the testers to resolve any `$ref` they might encounter in their handed over `schema` by using the context's `rootSchema`.
 Therefore the manual resolving of JSON Schemas before handing them over to JSON Forms does not need to be performed in those cases.
+In addition, testers can now access the form wide `config`.
 
 ### Removal of JSON Schema $Ref Parser
 
@@ -114,6 +120,10 @@ The utility function `fromScopable` was renamed to `fromScoped` accordingly.
 
 Date Picker in Angular Material will use the global configuration of your Angular Material application.
 
+### React prop mapping functions
+
+Renamed `ctxToJsonFormsDispatchProps` to `ctxToJsonFormsRendererProps` in order to better reflect the function's purpose.
+
 ## Migrating to JSON Forms 2.5
 
 ### JsonForms Component for Angular

lerna.json

@@ -4,7 +4,7 @@
     "packages/vue/*",
     "packages/vue2/*"
   ],
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.5",
   "nohoist": [
     "core-js",
     "vue",

packages/angular-material/example/app/app.component.ts

@@ -24,7 +24,7 @@
 */
 import { Component } from '@angular/core';
 import { ExampleDescription, getExamples } from '@jsonforms/examples';
-import { UISchemaElement, UISchemaTester } from '@jsonforms/core';
+import { JsonFormsI18nState, UISchemaElement, UISchemaTester } from '@jsonforms/core';
 import { angularMaterialRenderers } from '../../src/index';
 import { DateAdapter } from '@angular/material/core';
 
@@ -41,6 +41,9 @@ const uiSchema = {
     }
   ]
 };
+const defaultI18n: JsonFormsI18nState = {
+  locale: 'en-US'
+};
 const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
   if (schemaPath === '#/properties/warehouseitems/items') {
     return 10;
@@ -88,9 +91,7 @@ export class AppComponent {
   readonly renderers = angularMaterialRenderers;
   readonly examples = getExamples();
   selectedExample: ExampleDescription;
-  i18n = {
-    locale: 'en-US'
-  }
+  i18n: JsonFormsI18nState;
   private dateAdapter;
   private readonly = false;
   data: any;
@@ -101,11 +102,13 @@ export class AppComponent {
   constructor(dateAdapter: DateAdapter<Date>) {
     this.selectedExample = this.examples[19];
     this.dateAdapter = dateAdapter;
+    this.i18n = this.selectedExample.i18n ?? defaultI18n;
     dateAdapter.setLocale(this.i18n.locale);
   }
 
   onChange(ev: any) {
     this.selectedExample = this.examples.find(e => e.name === ev.target.value);
+    this.i18n = this.selectedExample.i18n ?? defaultI18n;
   }
 
   changeLocale(locale: string) {

packages/angular-material/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/angular-material",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.5",
   "description": "Material Renderer Set for Angular module of JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -54,17 +54,17 @@
     ]
   },
   "peerDependencies": {
-    "@angular/animations": "^12.0.0 || ^13.0.0",
-    "@angular/cdk": "^12.0.0 || ^13.0.0",
-    "@angular/common": "^12.0.0 || ^13.0.0",
-    "@angular/core": "^12.0.0 || ^13.0.0",
-    "@angular/flex-layout": "^12.0.0-beta || ^13.0.0-beta",
-    "@angular/forms": "^12.0.0 || ^13.0.0",
-    "@angular/material": "^12.0.0 || ^13.0.0",
-    "@angular/platform-browser": "^12.0.0 || ^13.0.0",
-    "@angular/router": "^12.0.0 || ^13.0.0",
-    "@jsonforms/angular": "3.0.0-beta.4",
-    "@jsonforms/core": "3.0.0-beta.4",
+    "@angular/animations": "^12.0.0 || ^13.0.0 || ^14.0.0",
+    "@angular/cdk": "^12.0.0 || ^13.0.0 || ^14.0.0",
+    "@angular/common": "^12.0.0 || ^13.0.0 || ^14.0.0",
+    "@angular/core": "^12.0.0 || ^13.0.0 || ^14.0.0",
+    "@angular/flex-layout": "^12.0.0-beta || ^13.0.0-beta || ^14.0.0-beta",
+    "@angular/forms": "^12.0.0 || ^13.0.0 || ^14.0.0",
+    "@angular/material": "^12.0.0 || ^13.0.0 || ^14.0.0",
+    "@angular/platform-browser": "^12.0.0 || ^13.0.0 || ^14.0.0",
+    "@angular/router": "^12.0.0 || ^13.0.0 || ^14.0.0",
+    "@jsonforms/angular": "3.0.0-beta.5",
+    "@jsonforms/core": "3.0.0-beta.5",
     "core-js": "^2.5.3",
     "rxjs": "^6.4.0"
   },
@@ -84,10 +84,10 @@
     "@angular/platform-browser": "^12.0.0",
     "@angular/platform-browser-dynamic": "^12.0.0",
     "@angular/router": "^12.0.0",
-    "@jsonforms/angular": "^3.0.0-beta.4",
-    "@jsonforms/angular-test": "^3.0.0-beta.4",
-    "@jsonforms/core": "^3.0.0-beta.4",
-    "@jsonforms/examples": "^3.0.0-beta.4",
+    "@jsonforms/angular": "^3.0.0-beta.5",
+    "@jsonforms/angular-test": "^3.0.0-beta.5",
+    "@jsonforms/core": "^3.0.0-beta.5",
+    "@jsonforms/examples": "^3.0.0-beta.5",
     "@types/node": "^10.10.0",
     "angular2-template-loader": "^0.6.2",
     "copy-webpack-plugin": "^5.0.5",

packages/angular-material/src/controls/number.renderer.ts

@@ -127,7 +127,11 @@ export class NumberControlRenderer extends JsonFormsControl {
 
   mapAdditionalProps(props:StatePropsOfControl) {
     if (this.scopedSchema) {
-      const defaultStep = isNumberControl(this.uischema, this.rootSchema, this.rootSchema)
+      const testerContext = {
+        rootSchema: this.rootSchema,
+        config: props.config
+      }
+      const defaultStep = isNumberControl(this.uischema, this.rootSchema, testerContext)
         ? 0.1
         : 1;
       this.min = this.scopedSchema.minimum;

packages/angular-material/src/layouts/categorization-layout.renderer.ts

@@ -26,7 +26,10 @@ import {
   and,
   Categorization,
   categorizationHasCategory,
+  defaultJsonFormsI18nState,
+  deriveLabelForUISchemaElement,
   JsonFormsState,
+  Labelable,
   mapStateToLayoutProps,
   RankedTester,
   rankWith,
@@ -44,8 +47,8 @@ import { Subscription } from 'rxjs';
   template: `
     <mat-tab-group dynamicHeight="true" [fxHide]="hidden">
       <mat-tab
-        *ngFor="let category of uischema.elements"
-        [label]="category.label"
+        *ngFor="let category of uischema.elements; let i = index"
+        [label]="categoryLabels[i]"
       >
         <div *ngFor="let element of category.elements">
           <jsonforms-outlet [uischema]="element" [path]="path" [schema]="schema"></jsonforms-outlet>
@@ -59,6 +62,7 @@ export class CategorizationTabLayoutRenderer
   implements OnInit, OnDestroy {
   hidden: boolean;
   private subscription: Subscription;
+  categoryLabels: string[];
 
   constructor(private jsonFormsService: JsonFormsAngularService) {
     super();
@@ -69,6 +73,9 @@ export class CategorizationTabLayoutRenderer
       next: (state: JsonFormsState) => {
         const props = mapStateToLayoutProps(state, this.getOwnProps());
         this.hidden = !props.visible;
+        this.categoryLabels = this.uischema.elements.map(
+          element => deriveLabelForUISchemaElement(element as Labelable<boolean>,
+            state.jsonforms.i18n?.translate ?? defaultJsonFormsI18nState.translate));
       }
     });
   }

packages/angular-material/src/layouts/group-layout.renderer.ts

@@ -31,7 +31,7 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
   selector: 'GroupLayoutRenderer',
   template: `
     <mat-card fxLayout="column" [fxHide]="hidden">
-      <mat-card-title class="mat-title">{{ uischema.label }}</mat-card-title>
+      <mat-card-title class="mat-title">{{ label }}</mat-card-title>
       <div *ngFor="let props of renderProps; trackBy: trackElement" fxFlex>
         <jsonforms-outlet [renderProps]="props"></jsonforms-outlet>
       </div>

packages/angular-material/src/layouts/layout.renderer.ts

@@ -42,6 +42,7 @@ import { Subscription } from 'rxjs';
 export class LayoutRenderer<T extends Layout> extends JsonFormsBaseRenderer<T>
   implements OnInit, OnDestroy {
   hidden: boolean;
+  label: string | undefined;
   private subscription: Subscription;
 
   constructor(private jsonFormsService: JsonFormsAngularService, protected changeDetectionRef: ChangeDetectorRef) {
@@ -52,6 +53,7 @@ export class LayoutRenderer<T extends Layout> extends JsonFormsBaseRenderer<T>
     this.subscription = this.jsonFormsService.$state.subscribe({
       next: (state: JsonFormsState) => {
         const props = mapStateToLayoutProps(state, this.getOwnProps());
+        this.label = props.label;
         this.hidden = !props.visible;
         this.changeDetectionRef.markForCheck();
       }

packages/angular-material/src/other/label.renderer.ts

@@ -28,32 +28,16 @@ import {
   JsonFormsBaseRenderer
 } from '@jsonforms/angular';
 import {
-  getData,
-  isVisible,
   JsonFormsState,
   LabelElement,
-  OwnPropsOfRenderer,
+  mapStateToLabelProps,
+  OwnPropsOfLabel,
   RankedTester,
   rankWith,
   uiTypeIs,
-  getAjv
 } from '@jsonforms/core';
 import { Subscription } from 'rxjs';
 
-export const mapStateToLabelProps = (
-  state: JsonFormsState,
-  ownProps: OwnPropsOfRenderer
-) => {
-  const visible =
-    ownProps.visible !== undefined
-      ? ownProps.visible
-      : isVisible(ownProps.uischema, getData(state), undefined, getAjv(state));
-
-  return {
-    visible
-  };
-};
-
 @Component({
   selector: 'LabelRenderer',
   template: `
@@ -70,15 +54,11 @@ export class LabelRenderer extends JsonFormsBaseRenderer<LabelElement> {
     super();
   }
   ngOnInit() {
-    const labelElement = this.uischema;
-    this.label =
-      labelElement.text !== undefined &&
-      labelElement.text !== null &&
-      labelElement.text;
     this.subscription = this.jsonFormsService.$state.subscribe({
       next: (state: JsonFormsState) => {
-        const props = mapStateToLabelProps(state, this.getOwnProps());
+        const props = mapStateToLabelProps(state, this.getOwnProps() as OwnPropsOfLabel);
         this.visible = props.visible;
+        this.label = props.text
       }
     });
   }
@@ -88,10 +68,6 @@ export class LabelRenderer extends JsonFormsBaseRenderer<LabelElement> {
       this.subscription.unsubscribe();
     }
   }
-
-  mapAdditionalProps() {
-    this.label = this.uischema.text;
-  }
 }
 
 export const LabelRendererTester: RankedTester = rankWith(4, uiTypeIs('Label'));

packages/angular-material/test/categorization-tab-layout.spec.ts

@@ -236,7 +236,7 @@ describe('Categorization tab layout', () => {
       const tabGroup: MatTabGroup = tabGroupDE[0].componentInstance;
       expect(tabGroup._tabs.length).toBe(2);
 
-      component.uischema = {
+      const newUischema = {
         type: 'Categorization',
         elements: [
           {
@@ -271,13 +271,8 @@ describe('Categorization tab layout', () => {
           }
         ]
       };
-      getJsonFormsService(component).init({
-        core: {
-          data,
-          schema,
-          uischema: undefined
-        }
-      });
+      getJsonFormsService(component).setUiSchema(newUischema);
+      component.uischema = newUischema;
       fixture.detectChanges();
 
       fixture.whenRenderingDone().then(() => {
@@ -289,7 +284,8 @@ describe('Categorization tab layout', () => {
         expect(tabGroup2._tabs.length).toBe(3);
         const lastTab: MatTab = tabGroup2._tabs.last;
         expect(lastTab.isActive).toBeFalsy();
-        expect(lastTab.textLabel).toBe('quux');
+        // there are update issues within the tests so that the new ui schema is not assigned to `this.uischema` within the renderer
+        // expect(lastTab.textLabel).toBe('quux');
       });
     });
   }));

packages/angular-material/test/date-control.spec.ts

@@ -41,6 +41,7 @@ import { Actions, ControlElement, JsonSchema } from '@jsonforms/core';
 import { DateControlRenderer, DateControlRendererTester } from '../src';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { JsonFormsAngularService } from '@jsonforms/angular';
+import { createTesterContext } from './util';
 
 const data = { foo: '2018-01-01' };
 const schema: JsonSchema = {
@@ -59,7 +60,7 @@ const uischema: ControlElement = {
 
 describe('Material boolean field tester', () => {
   it('should succeed', () => {
-    expect(DateControlRendererTester(uischema, schema, schema)).toBe(2);
+    expect(DateControlRendererTester(uischema, schema, createTesterContext(schema))).toBe(2);
   });
 });
 const imports = [

packages/angular-material/test/table-control.spec.ts

@@ -40,6 +40,7 @@ import {
 } from '../src/other/table.renderer';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { setupMockStore } from '@jsonforms/angular-test';
+import { createTesterContext } from './util';
 
 const uischema1: ControlElement = { type: 'Control', scope: '#' };
 const uischema2: ControlElement = {
@@ -95,10 +96,10 @@ const renderers = [
 
 describe('Table tester', () => {
   it('should succeed', () => {
-    expect(TableRendererTester(uischema1, schema_object1, schema_object1)).toBe(3);
-    expect(TableRendererTester(uischema1, schema_simple1, schema_simple1)).toBe(3);
-    expect(TableRendererTester(uischema2, schema_object2, schema_object2)).toBe(3);
-    expect(TableRendererTester(uischema2, schema_simple2, schema_simple2)).toBe(3);
+    expect(TableRendererTester(uischema1, schema_object1, createTesterContext(schema_object1))).toBe(3);
+    expect(TableRendererTester(uischema1, schema_simple1, createTesterContext(schema_simple1))).toBe(3);
+    expect(TableRendererTester(uischema2, schema_object2, createTesterContext(schema_object2))).toBe(3);
+    expect(TableRendererTester(uischema2, schema_simple2, createTesterContext(schema_simple2))).toBe(3);
   });
 });
 describe('Table', () => {

packages/angular-material/test/util.ts

@@ -0,0 +1,28 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2022 EclipseSource
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { JsonSchema, TesterContext } from '@jsonforms/core';
+
+export const createTesterContext =
+  (rootSchema: JsonSchema, config?: any): TesterContext => ({ rootSchema, config });