Extend ExampleDescription with optional i18n configuration

* Extend the ExampleDescription to allow configuring i18n for examples * Adapt example apps to use a provided i18n config * Add i18n configuration to the `categorization` and `Person (i18n)` examples
eclipsesource · Jul 15, 2022 · 0bb0592 · 0bb0592
1 parent 70f61db
commit 0bb0592
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 14 deletions.
diff --git a/packages/angular-material/example/app/app.component.ts b/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) {

diff --git a/packages/example/src/App.tsx b/packages/example/src/App.tsx
@@ -76,14 +76,16 @@ const getProps = (example: ExampleDescription, cells?: any, renderers?: any) =>
   const data = example.data;
   const uischemas = example.uischemas;
   const config = example.config;
+  const i18n = example.i18n;
   return {
     schema,
     uischema,
     data,
     config,
     uischemas,
     cells,
-    renderers
+    renderers,
+    i18n
   }
 }
 

diff --git a/packages/examples/src/example.ts b/packages/examples/src/example.ts
@@ -27,7 +27,8 @@ import {
   JsonFormsUISchemaRegistryEntry,
   JsonFormsRendererRegistryEntry,
   JsonSchema,
-  UISchemaElement
+  UISchemaElement,
+  JsonFormsI18nState
 } from '@jsonforms/core';
 
 export interface ExampleDescription {
@@ -38,7 +39,8 @@ export interface ExampleDescription {
   uischema: UISchemaElement;
   uischemas?: JsonFormsUISchemaRegistryEntry[];
   config?: any;
-  actions?: {label: string, apply: (props: StateProps) => any}[];
+  actions?: { label: string, apply: (props: StateProps) => any }[];
+  i18n?: JsonFormsI18nState;
 }
 
 export interface StateProps {

diff --git a/packages/examples/src/examples/categorization.ts b/packages/examples/src/examples/categorization.ts
@@ -22,6 +22,8 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
+import { Translator } from '@jsonforms/core';
+import get from 'lodash/get';
 import { registerExamples } from '../register';
 
 export const schema = {
@@ -93,7 +95,7 @@ export const uischema = {
   elements: [
     {
       type: 'Category',
-      label: 'Basic Information',
+      label: 'categoryLabelKey',
       elements: [
         {
           type: 'HorizontalLayout',
@@ -133,7 +135,7 @@ export const uischema = {
     },
     {
       type: 'Category',
-      label: 'Address',
+      i18n: 'address',
       elements: [
         {
           type: 'HorizontalLayout',
@@ -284,14 +286,24 @@ const uischema_1713 = {
   ]
   };
 
+export const translations = {
+  categoryLabelKey: 'Basic',
+  address: {
+    label: "Address",
+  },
+};
+export const translate: Translator = (key: string, defaultMessage: string) => {
+  return get(translations, key) ?? defaultMessage
+};
 
 registerExamples([
   {
     name: 'categorization',
     label: 'Categorization',
     data,
     schema,
-    uischema
+    uischema,
+    i18n: { locale: 'en', translate: translate }
   },
   {
     name: '1713',

diff --git a/packages/examples/src/examples/i18n.ts b/packages/examples/src/examples/i18n.ts
@@ -24,7 +24,8 @@
 */
 import { registerExamples } from '../register';
 import { personCoreSchema } from './person';
-import { JsonFormsCore, updateErrors, AnyAction, Dispatch } from '@jsonforms/core';
+import { JsonFormsCore, updateErrors, AnyAction, Dispatch, Translator } from '@jsonforms/core';
+import get from 'lodash/get';
 const localize = require('ajv-i18n');
 
 export const onChange = (dispatch: Dispatch<AnyAction>) => (
@@ -42,7 +43,8 @@ export const uischema = {
   type: 'VerticalLayout',
   elements: [
     {
-      type: 'HorizontalLayout',
+      type: 'Group',
+      i18n: 'basicInfoGroup',
       elements: [
         {
           type: 'Control',
@@ -56,7 +58,7 @@ export const uischema = {
     },
     {
       type: 'Label',
-      text: 'Additional Information'
+      text: 'additionalInformationLabel',
     },
     {
       type: 'HorizontalLayout',
@@ -83,12 +85,26 @@ export const data = {
   postalCode: '12345'
 };
 
+export const translations = {
+  basicInfoGroup: {
+    label: 'Basic Information'
+  },
+  additionalInformationLabel: 'Additional Information'
+};
+export const translate: Translator = (key: string, defaultMessage: string) => {
+  return get(translations, key) ?? defaultMessage;
+};
+
 registerExamples([
   {
     name: 'i18n',
     label: 'Person (i18n)',
     data,
     schema: personCoreSchema,
-    uischema
+    uischema,
+    i18n: {
+      translate: translate,
+      locale: 'en'
+    }
   }
 ]);