[examples] Add i18n example

Author: edgarmueller

packages/example/src/util.tsx

@@ -23,9 +23,17 @@
   THE SOFTWARE.
 */
 import * as React from 'react';
+import * as _ from 'lodash';
 import { ExampleDescription, nestedArray as NestedArrayExample } from '@jsonforms/examples';
 import ConnectedRatingControl, { ratingControlTester } from './RatingControl';
-import { Actions } from '@jsonforms/core';
+import {
+  Actions,
+  JsonSchema,
+  setLocale,
+  setSchema,
+  setUISchema,
+  UISchemaElement
+} from '@jsonforms/core';
 import { AnyAction, Dispatch } from 'redux';
 
 export interface ReactExampleDescription extends ExampleDescription {
@@ -38,6 +46,64 @@ const unregisterRatingControl = (dispatch: Dispatch<AnyAction>) => {
   dispatch(Actions.unregisterField(ratingControlTester, ConnectedRatingControl));
 };
 
+export interface I18nExampleProps {
+  schema: JsonSchema;
+  uischema: UISchemaElement;
+  dispatch: Dispatch<AnyAction>;
+}
+
+class I18nExample extends React.Component<I18nExampleProps, {
+  localizedSchemas: Map<string, JsonSchema>,
+  localizedUISchemas: Map<string, UISchemaElement>
+}> {
+
+  constructor(props: I18nExampleProps) {
+    super(props);
+    const { schema, uischema } = props;
+    const localizedSchemas = new Map<string, JsonSchema>();
+    const deSchema = _.cloneDeep(schema);
+    _.set(deSchema, 'properties.name.description', 'Name der Person');
+    _.set(deSchema, 'properties.name.birthDate', 'Geburtstag der Person');
+    localizedSchemas.set('de-DE', deSchema);
+    localizedSchemas.set('en-US', schema);
+
+    const localizedUISchemas = new Map<string, UISchemaElement>();
+    const deUISchema = _.cloneDeep(uischema);
+    _.set(deUISchema, 'elements.0.elements.1.label', 'Geburtstag');
+    _.set(deUISchema, 'elements.2.elements.0.label', 'Nationalität');
+    _.set(deUISchema, 'elements.2.elements.1.label', 'Vegetarier');
+    localizedUISchemas.set('de-DE', deUISchema);
+    localizedUISchemas.set('en-US', uischema);
+
+    this.state = {
+      localizedSchemas,
+      localizedUISchemas
+    };
+  }
+
+
+  changeLocale = (locale: string) => {
+    const { dispatch } = this.props;
+    const { localizedSchemas, localizedUISchemas } = this.state;
+    dispatch(setLocale(locale));
+    dispatch(setSchema(localizedSchemas.get(locale)));
+    dispatch(setUISchema(localizedUISchemas.get(locale)));
+  }
+
+  render() {
+    return (
+      <div>
+        <button onClick={() => this.changeLocale('en-US')}>
+          en-US
+        </button>
+        <button onClick={() => this.changeLocale('de-DE')}>
+          de-DE
+        </button>
+      </div>
+    );
+  }
+}
+
 export const enhanceExample: (examples: ExampleDescription[]) => ReactExampleDescription[] =
   examples => examples.map(e => {
     switch (e.name) {
@@ -90,6 +156,12 @@ export const enhanceExample: (examples: ExampleDescription[]) => ReactExampleDes
           )
         });
         return dynamic;
+      case 'i18n':
+        return Object.assign({}, e, {
+          customReactExtension: (dispatch: Dispatch<AnyAction>) => (
+            <I18nExample schema={e.schema} uischema={e.uischema} dispatch={dispatch}/>
+          )
+        });
       default: return e;
     }
   });

packages/examples/src/i18n.ts

@@ -0,0 +1,57 @@
+import { registerExamples } from './register';
+import { personCoreSchema } from './person';
+
+export const uischema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'HorizontalLayout',
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/name'
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/birthDate'
+        },
+      ]
+    },
+    {
+      type: 'Label',
+      text: 'Additional Information'
+    },
+    {
+      type: 'HorizontalLayout',
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/nationality'
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/vegetarian'
+        }
+      ]
+    }
+  ]
+};
+
+export const data = {
+  vegetarian: false,
+  birthDate: '1985-06-02',
+  personalData: {
+    age: 34
+  },
+  postalCode: '12345',
+};
+
+registerExamples([
+  {
+    name: 'i18n',
+    label: 'Person (i18n)',
+    data,
+    schema: personCoreSchema,
+    uischema
+  }
+]);

packages/examples/src/index.ts

@@ -47,6 +47,7 @@ import * as config from './config';
 import * as text from './text';
 import * as numbers from './numbers';
 import * as listWithDetail from './list-with-detail';
+import * as i18n from './i18n';
 export * from './register';
 export * from './example';
 export {
@@ -74,5 +75,6 @@ export {
   config,
   text,
   numbers,
-  listWithDetail
+  listWithDetail,
+  i18n
 };