Ajv i18n example

[Lily418]

This PR is to add an example of using the onChange handler and error update action (PR #1450) to show how a user of the library can add localisation of the errors with i18n.

4c5a9fe is the new commit, others will be rebased away when #1450 is complete.

ajv-i18n in core

I had initally been adding ajv-i18n to the core package, however this became complex when trying to combine navigator languages, selected locale from i18n reducer, and languages supported by ajv-i18n.
There are a few cases to consider

• Schemas are provided in languages which are not supported by ajv-i18n
• Schemas are not provided for a language in the users navigator.language but which is supported by ajv-i18n

I think it is better for the user of JsonForms to implement this logic so they can implement i18n logic consistantly rather than enforcing a specific method on the user.

It may be possible for the user to provide their own language selection logic to JSONForms but I decided to try to keep it simple for now.

[edgarmueller]

Sounds like a new example! #1450 has been merged, you can rebase now.

[coveralls]

Coverage remained the same at 83.217% when pulling 1254bb4 on HelixCentre:feature/ajv-i18n-example into 927e387 on eclipsesource:master.

[edgarmueller]

Thank you!

[LaszloDev]

Hey, I'm really appreciate your hard work on the package @Lily418 @edgarmueller . Would you mind sharing some more details regards how to implement the localization. Which packages are needed and how are they integrated into a JSONForms instance?

[Lily418]

Hi @LaszloDev ajv-i18n is the additional package.

The JsonForms component has an onChange prop which is called when either data or errors is changed.

This is the onChange I used in the example I here in this PR.

const localize = require('ajv-i18n');

export const onChange = (dispatch: Dispatch<AnyAction>) => (
  extensionState: any
) => ({ errors }: Pick<JsonFormsCore, 'data' | 'errors'>) => {
  if (!extensionState) {
    return;
  }
  const localiseFunc = localize[extensionState.locale.split('-')[0]];
  localiseFunc(errors);
  dispatch(updateErrors(errors));
};

JsonForms uses AJV to validate the forms data against the schema so this library ajv-i18n can be used because the errors you receive in the onChange method are directly from AJV.