Skip to content

Commit 0bb0592

Browse files
lucas-koehlersdirix
authored andcommitted
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
1 parent 70f61db commit 0bb0592

File tree

5 files changed

+49
-14
lines changed

5 files changed

+49
-14
lines changed

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
*/
2525
import { Component } from '@angular/core';
2626
import { ExampleDescription, getExamples } from '@jsonforms/examples';
27-
import { UISchemaElement, UISchemaTester } from '@jsonforms/core';
27+
import { JsonFormsI18nState, UISchemaElement, UISchemaTester } from '@jsonforms/core';
2828
import { angularMaterialRenderers } from '../../src/index';
2929
import { DateAdapter } from '@angular/material/core';
3030

@@ -41,6 +41,9 @@ const uiSchema = {
4141
}
4242
]
4343
};
44+
const defaultI18n: JsonFormsI18nState = {
45+
locale: 'en-US'
46+
};
4447
const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
4548
if (schemaPath === '#/properties/warehouseitems/items') {
4649
return 10;
@@ -88,9 +91,7 @@ export class AppComponent {
8891
readonly renderers = angularMaterialRenderers;
8992
readonly examples = getExamples();
9093
selectedExample: ExampleDescription;
91-
i18n = {
92-
locale: 'en-US'
93-
}
94+
i18n: JsonFormsI18nState;
9495
private dateAdapter;
9596
private readonly = false;
9697
data: any;
@@ -101,11 +102,13 @@ export class AppComponent {
101102
constructor(dateAdapter: DateAdapter<Date>) {
102103
this.selectedExample = this.examples[19];
103104
this.dateAdapter = dateAdapter;
105+
this.i18n = this.selectedExample.i18n ?? defaultI18n;
104106
dateAdapter.setLocale(this.i18n.locale);
105107
}
106108

107109
onChange(ev: any) {
108110
this.selectedExample = this.examples.find(e => e.name === ev.target.value);
111+
this.i18n = this.selectedExample.i18n ?? defaultI18n;
109112
}
110113

111114
changeLocale(locale: string) {

packages/example/src/App.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,14 +76,16 @@ const getProps = (example: ExampleDescription, cells?: any, renderers?: any) =>
7676
const data = example.data;
7777
const uischemas = example.uischemas;
7878
const config = example.config;
79+
const i18n = example.i18n;
7980
return {
8081
schema,
8182
uischema,
8283
data,
8384
config,
8485
uischemas,
8586
cells,
86-
renderers
87+
renderers,
88+
i18n
8789
}
8890
}
8991

packages/examples/src/example.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ import {
2727
JsonFormsUISchemaRegistryEntry,
2828
JsonFormsRendererRegistryEntry,
2929
JsonSchema,
30-
UISchemaElement
30+
UISchemaElement,
31+
JsonFormsI18nState
3132
} from '@jsonforms/core';
3233

3334
export interface ExampleDescription {
@@ -38,7 +39,8 @@ export interface ExampleDescription {
3839
uischema: UISchemaElement;
3940
uischemas?: JsonFormsUISchemaRegistryEntry[];
4041
config?: any;
41-
actions?: {label: string, apply: (props: StateProps) => any}[];
42+
actions?: { label: string, apply: (props: StateProps) => any }[];
43+
i18n?: JsonFormsI18nState;
4244
}
4345

4446
export interface StateProps {

packages/examples/src/examples/categorization.ts

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
2323
THE SOFTWARE.
2424
*/
25+
import { Translator } from '@jsonforms/core';
26+
import get from 'lodash/get';
2527
import { registerExamples } from '../register';
2628

2729
export const schema = {
@@ -93,7 +95,7 @@ export const uischema = {
9395
elements: [
9496
{
9597
type: 'Category',
96-
label: 'Basic Information',
98+
label: 'categoryLabelKey',
9799
elements: [
98100
{
99101
type: 'HorizontalLayout',
@@ -133,7 +135,7 @@ export const uischema = {
133135
},
134136
{
135137
type: 'Category',
136-
label: 'Address',
138+
i18n: 'address',
137139
elements: [
138140
{
139141
type: 'HorizontalLayout',
@@ -284,14 +286,24 @@ const uischema_1713 = {
284286
]
285287
};
286288

289+
export const translations = {
290+
categoryLabelKey: 'Basic',
291+
address: {
292+
label: "Address",
293+
},
294+
};
295+
export const translate: Translator = (key: string, defaultMessage: string) => {
296+
return get(translations, key) ?? defaultMessage
297+
};
287298

288299
registerExamples([
289300
{
290301
name: 'categorization',
291302
label: 'Categorization',
292303
data,
293304
schema,
294-
uischema
305+
uischema,
306+
i18n: { locale: 'en', translate: translate }
295307
},
296308
{
297309
name: '1713',

packages/examples/src/examples/i18n.ts

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
*/
2525
import { registerExamples } from '../register';
2626
import { personCoreSchema } from './person';
27-
import { JsonFormsCore, updateErrors, AnyAction, Dispatch } from '@jsonforms/core';
27+
import { JsonFormsCore, updateErrors, AnyAction, Dispatch, Translator } from '@jsonforms/core';
28+
import get from 'lodash/get';
2829
const localize = require('ajv-i18n');
2930

3031
export const onChange = (dispatch: Dispatch<AnyAction>) => (
@@ -42,7 +43,8 @@ export const uischema = {
4243
type: 'VerticalLayout',
4344
elements: [
4445
{
45-
type: 'HorizontalLayout',
46+
type: 'Group',
47+
i18n: 'basicInfoGroup',
4648
elements: [
4749
{
4850
type: 'Control',
@@ -56,7 +58,7 @@ export const uischema = {
5658
},
5759
{
5860
type: 'Label',
59-
text: 'Additional Information'
61+
text: 'additionalInformationLabel',
6062
},
6163
{
6264
type: 'HorizontalLayout',
@@ -83,12 +85,26 @@ export const data = {
8385
postalCode: '12345'
8486
};
8587

88+
export const translations = {
89+
basicInfoGroup: {
90+
label: 'Basic Information'
91+
},
92+
additionalInformationLabel: 'Additional Information'
93+
};
94+
export const translate: Translator = (key: string, defaultMessage: string) => {
95+
return get(translations, key) ?? defaultMessage;
96+
};
97+
8698
registerExamples([
8799
{
88100
name: 'i18n',
89101
label: 'Person (i18n)',
90102
data,
91103
schema: personCoreSchema,
92-
uischema
104+
uischema,
105+
i18n: {
106+
translate: translate,
107+
locale: 'en'
108+
}
93109
}
94110
]);

0 commit comments

Comments
 (0)