@jsonforms/core 3.0.0-alpha.1 → 3.0.0-alpha.2

package/src/reducers/core.ts

@@ -29,7 +29,7 @@ import get from 'lodash/get';
 import filter from 'lodash/filter';
 import isEqual from 'lodash/isEqual';
 import isFunction from 'lodash/isFunction';
-import { Ajv, ErrorObject, ValidateFunction } from 'ajv';
+import Ajv, { ErrorObject, ValidateFunction } from 'ajv';
 import {
   CoreActions,
   INIT,
@@ -47,28 +47,17 @@ import {
 import { createAjv, Reducer } from '../util';
 import { JsonSchema, UISchemaElement } from '../models';
 
-const validate = (validator: ValidateFunction, data: any): ErrorObject[] => {
+export const validate = (validator: ValidateFunction | undefined, data: any): ErrorObject[] => {
+  if (validator === undefined) {
+    return [];
+  }
   const valid = validator(data);
   if (valid) {
     return [];
   }
-
   return validator.errors;
 };
 
-export const sanitizeErrors = (validator: ValidateFunction, data: any) => {
-  if (validator === alwaysValid) {
-    return [];
-  }
-  return validate(validator, data).map(error => {
-    error.dataPath = error.dataPath.replace(/\//g, '.').substr(1);
-
-    return error;
-  });
-};
-
-const alwaysValid: ValidateFunction = () => true;
-
 export type ValidationMode = 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation';
 
 export interface JsonFormsCore {
@@ -86,9 +75,9 @@ const initState: JsonFormsCore = {
   schema: {},
   uischema: undefined,
   errors: [],
-  validator: alwaysValid,
+  validator: undefined,
   ajv: undefined,
-  validationMode: 'ValidateAndShow'
+  validationMode: 'ValidateAndShow',
 };
 
 const reuseAjvForSchema = (ajv: Ajv, schema: JsonSchema): Ajv => {
@@ -154,8 +143,8 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
       const thisAjv = getOrCreateAjv(state, action);
 
       const validationMode = getValidationMode(state, action);
-      const v = validationMode === 'NoValidation' ? alwaysValid : thisAjv.compile(action.schema);
-      const e = sanitizeErrors(v, action.data);
+      const v = validationMode === 'NoValidation' ? undefined : thisAjv.compile(action.schema);
+      const e = validate(v, action.data);
 
       return {
         ...state,
@@ -165,7 +154,7 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
         errors: e,
         validator: v,
         ajv: thisAjv,
-        validationMode
+        validationMode,
       };
     }
     case UPDATE_CORE: {
@@ -181,11 +170,11 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
         // revalidate only if necessary
         validator =
           validationMode === 'NoValidation'
-            ? alwaysValid
+            ? undefined
             : thisAjv.compile(action.schema);
-        errors = sanitizeErrors(validator, action.data);
+        errors = validate(validator, action.data);
       } else if (state.data !== action.data) {
-        errors = sanitizeErrors(validator, action.data);
+        errors = validate(validator, action.data);
       }
 
       const stateChanged =
@@ -195,24 +184,24 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
         state.ajv !== thisAjv ||
         state.errors !== errors ||
         state.validator !== validator ||
-        state.validationMode !== validationMode;
+        state.validationMode !== validationMode
       return stateChanged
         ? {
             ...state,
-            data: state.data === action.data ? state.data : action.data,
-            schema: state.schema === action.schema ? state.schema : action.schema,
-            uischema: state.uischema === action.uischema ? state.uischema : action.uischema,
-            ajv: thisAjv === state.ajv ? state.ajv : thisAjv,
+            data: action.data,
+            schema: action.schema,
+            uischema: action.uischema,
+            ajv: thisAjv,
             errors: isEqual(errors, state.errors) ? state.errors : errors,
-            validator: validator === state.validator ? state.validator : validator,
-            validationMode: validationMode === state.validationMode ? state.validationMode : validationMode
+            validator: validator,
+            validationMode: validationMode,
           }
         : state;
     }
     case SET_AJV: {
       const currentAjv = action.ajv;
-      const validator = state.validationMode === 'NoValidation' ? alwaysValid : currentAjv.compile(state.schema);
-      const errors = sanitizeErrors(validator, state.data);
+      const validator = state.validationMode === 'NoValidation' ? undefined : currentAjv.compile(state.schema);
+      const errors = validate(validator, state.data);
       return {
         ...state,
         validator,
@@ -224,7 +213,7 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
       const v = needsNewValidator
         ? reuseAjvForSchema(state.ajv, action.schema).compile(action.schema)
         : state.validator;
-      const errors = sanitizeErrors(v, state.data);
+      const errors = validate(v, state.data);
       return {
         ...state,
         validator: v,
@@ -244,7 +233,7 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
       } else if (action.path === '') {
         // empty path is ok
         const result = action.updater(cloneDeep(state.data));
-        const errors = sanitizeErrors(state.validator, result);
+        const errors = validate(state.validator, result);
         return {
           ...state,
           data: result,
@@ -258,7 +247,7 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
           newData,
           state.data === undefined ? {} : state.data
         );
-        const errors = sanitizeErrors(state.validator, newState);
+        const errors = validate(state.validator, newState);
         return {
           ...state,
           data: newState,
@@ -277,17 +266,16 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
         return state;
       }
       if (action.validationMode === 'NoValidation') {
-        const errors = sanitizeErrors(alwaysValid, state.data);
+        const errors = validate(undefined, state.data);
         return {
           ...state,
-          validator: alwaysValid,
           errors,
           validationMode: action.validationMode
         };
       }
       if (state.validationMode === 'NoValidation') {
         const validator = reuseAjvForSchema(state.ajv, state.schema).compile(state.schema);
-        const errors = sanitizeErrors(validator, state.data);
+        const errors = validate(validator, state.data);
         return {
           ...state,
           validator,
@@ -310,6 +298,40 @@ export const extractSchema = (state: JsonFormsCore) => get(state, 'schema');
 export const extractUiSchema = (state: JsonFormsCore) => get(state, 'uischema');
 export const extractAjv = (state: JsonFormsCore) => get(state, 'ajv');
 
+const getInvalidProperty = (error: ErrorObject): string | undefined => {
+  switch (error.keyword) {
+    case 'required':
+    case 'dependencies':
+      return error.params.missingProperty;
+    case 'additionalProperties':
+      return error.params.additionalProperty;
+    default:
+      return undefined;
+  }
+};
+
+export const getControlPath = (error: ErrorObject) => {
+  const dataPath = (error as any).dataPath;
+  // older AJV version
+  if (dataPath) {
+    return dataPath.replace(/\//g, '.').substr(1);
+  }
+  // dataPath was renamed to instancePath in AJV v8
+  var controlPath: string = error.instancePath;
+
+  // change '/' chars to '.'
+  controlPath = controlPath.replace(/\//g, '.');
+  
+  const invalidProperty = getInvalidProperty(error);
+  if (invalidProperty !== undefined && !controlPath.endsWith(invalidProperty)) {
+    controlPath = `${controlPath}.${invalidProperty}`;
+  }
+  
+  // remove '.' chars at the beginning of paths
+  controlPath = controlPath.replace(/^./, '');
+  return controlPath;
+}
+
 export const errorsAt = (
   instancePath: string,
   schema: JsonSchema,
@@ -319,15 +341,15 @@ export const errorsAt = (
   const combinatorPaths = filter(
     errors,
     error => error.keyword === 'oneOf' || error.keyword === 'anyOf'
-  ).map(error => error.dataPath);
-
-  return filter(errors, error => {
-    // Filter errors that match any keyword that we don't want to show in the UI
-    if (filteredErrorKeywords.indexOf(error.keyword) !== -1) {
-      return false;
-    }
-
-    let result = matchPath(error.dataPath);
+    ).map(error => getControlPath(error));
+    
+    return filter(errors, error => {
+      // Filter errors that match any keyword that we don't want to show in the UI
+      if (filteredErrorKeywords.indexOf(error.keyword) !== -1) {
+        return false;
+      }
+    const controlPath = getControlPath(error);
+    let result = matchPath(controlPath);
     // In anyOf and oneOf blocks with "primitive" (i.e. string, number etc.) or array subschemas,
     // we want to make sure that errors are only shown for the correct subschema.
     // Therefore, we compare the error's parent schema with the property's schema.

package/src/reducers/i18n.ts

@@ -23,66 +23,72 @@
   THE SOFTWARE.
 */
 
-import { SET_LOCALE, SET_LOCALIZED_SCHEMAS, SET_LOCALIZED_UISCHEMAS } from '../actions';
-import { JsonSchema, UISchemaElement } from '../models';
+import { defaultErrorTranslator, defaultTranslator, JsonFormsI18nState } from '../i18n';
+import { I18nActions, SET_LOCALE, SET_TRANSLATOR, UPDATE_I18N } from '../actions';
 import { Reducer } from '../util';
 
-export interface JsonFormsLocaleState {
-  locale?: string;
-  localizedSchemas: Map<string, JsonSchema>;
-  localizedUISchemas: Map<string, UISchemaElement>;
-}
-
-const initState: JsonFormsLocaleState = {
-  locale: undefined,
-  localizedSchemas: new Map(),
-  localizedUISchemas: new Map()
+export const defaultJsonFormsI18nState: JsonFormsI18nState = {
+  locale: 'en',
+  translate: defaultTranslator,
+  translateError: defaultErrorTranslator
 };
 
-export const i18nReducer: Reducer<any, any> = (state = initState, action) => {
+export const i18nReducer: Reducer<JsonFormsI18nState, I18nActions> = (state = defaultJsonFormsI18nState, action) => {
   switch (action.type) {
-    case SET_LOCALIZED_SCHEMAS:
-      return {
-        ...state,
-        localizedSchemas: action.localizedSchemas
-      };
-    case SET_LOCALIZED_UISCHEMAS:
+    case UPDATE_I18N: {
+      const locale = action.locale ?? defaultJsonFormsI18nState.locale;
+      const translate =
+        action.translator ?? defaultJsonFormsI18nState.translate;
+      const translateError =
+        action.errorTranslator ?? defaultJsonFormsI18nState.translateError;
+
+      if (
+        locale !== state.locale ||
+        translate !== state.translate ||
+        translateError !== state.translateError
+      ) {
+        return {
+          ...state,
+          locale,
+          translate,
+          translateError
+        };
+      }
+      return state;
+    }
+    case SET_TRANSLATOR:
       return {
         ...state,
-        localizedUISchemas: action.localizedUISchemas
+        translate: action.translator ?? defaultTranslator,
+        translateError: action.errorTranslator ?? defaultErrorTranslator
       };
     case SET_LOCALE:
       return {
         ...state,
-        locale:
-          action.locale === undefined ? navigator.languages[0] : action.locale
+        locale: action.locale ?? navigator.languages[0]
       };
     default:
       return state;
   }
 };
 
-export const fetchLocale = (state?: JsonFormsLocaleState) => {
+export const fetchLocale = (state?: JsonFormsI18nState) => {
   if (state === undefined) {
     return undefined;
   }
   return state.locale;
 };
 
-export const findLocalizedSchema = (locale: string) => (
-  state?: JsonFormsLocaleState
-): JsonSchema => {
+export const fetchTranslator = (state?: JsonFormsI18nState) => {
   if (state === undefined) {
-    return undefined;
+    return defaultTranslator;
   }
-  return state.localizedSchemas.get(locale);
-};
+  return state.translate;
+}
 
-export const findLocalizedUISchema = (locale: string) => (
-  state?: JsonFormsLocaleState
-): UISchemaElement => {
+export const fetchErrorTranslator = (state?: JsonFormsI18nState) => {
   if (state === undefined) {
-    return undefined;
+    return defaultErrorTranslator;
   }
-  return state.localizedUISchemas.get(locale);
-};
+  return state.translateError;
+}

package/src/reducers/reducers.ts

@@ -28,6 +28,7 @@ import {
   coreReducer,
   errorAt,
   errorsAt,
+  getControlPath,
   JsonFormsCore,
   subErrorsAt,
   ValidationMode
@@ -42,10 +43,9 @@ import {
   UISchemaTester
 } from './uischemas';
 import {
+  fetchErrorTranslator,
   fetchLocale,
-  findLocalizedSchema,
-  findLocalizedUISchema,
-  i18nReducer
+  i18nReducer,
 } from './i18n';
 
 import { Generate } from '../generators';
@@ -54,6 +54,8 @@ import { JsonSchema } from '../models/jsonSchema';
 import { cellReducer } from './cells';
 import { configReducer } from './config';
 import get from 'lodash/get';
+import { fetchTranslator } from '.';
+import { ErrorTranslator, Translator } from '../i18n';
 
 export {
   rendererReducer,
@@ -126,7 +128,7 @@ export const getErrorAt = (instancePath: string, schema: JsonSchema) => (
   return errorAt(instancePath, schema)(state.jsonforms.core);
 };
 
-export { errorsAt };
+export { errorsAt, getControlPath };
 
 export const getSubErrorsAt = (instancePath: string, schema: JsonSchema) => (
   state: JsonFormsState
@@ -137,11 +139,10 @@ export const getConfig = (state: JsonFormsState) => state.jsonforms.config;
 export const getLocale = (state: JsonFormsState) =>
   fetchLocale(get(state, 'jsonforms.i18n'));
 
-export const getLocalizedSchema = (locale: string) => (
+export const getTranslator = () => (
   state: JsonFormsState
-): JsonSchema => findLocalizedSchema(locale)(get(state, 'jsonforms.i18n'));
+): Translator => fetchTranslator(get(state, 'jsonforms.i18n'));
 
-export const getLocalizedUISchema = (locale: string) => (
+export const getErrorTranslator = () => (
   state: JsonFormsState
-): UISchemaElement =>
-  findLocalizedUISchema(locale)(get(state, 'jsonforms.i18n'));
+): ErrorTranslator => fetchErrorTranslator(get(state, 'jsonforms.i18n'));

package/src/reducers/selectors.ts

@@ -24,7 +24,7 @@
 */
 
 import get from 'lodash/get';
-import { Ajv} from 'ajv';
+import Ajv from 'ajv';
 import { JsonFormsState } from '../store';
 import { JsonSchema, UISchemaElement } from '../models';
 import {

package/src/store.ts

@@ -28,9 +28,9 @@ import {
   JsonFormsCore,
   JsonFormsCellRendererRegistryEntry,
   JsonFormsRendererRegistryEntry,
-  JsonFormsLocaleState,
   JsonFormsUISchemaRegistryEntry
 } from './reducers';
+import { JsonFormsI18nState } from './i18n';
 
 /**
  * JSONForms store.
@@ -65,11 +65,11 @@ export interface JsonFormsSubStates {
    */
   cells?: JsonFormsCellRendererRegistryEntry[];
   /**
-   *
+   * I18n settings.
    */
-  i18n?: JsonFormsLocaleState;
+  i18n?: JsonFormsI18nState;
   /**
-   *
+   * The UI schema registry used in detail renderers.
    */
   uischemas?: JsonFormsUISchemaRegistryEntry[];
   /**

package/src/util/cell.ts

@@ -31,7 +31,8 @@ import {
   getErrorAt,
   getSchema,
   getAjv,
-  JsonFormsCellRendererRegistryEntry
+  JsonFormsCellRendererRegistryEntry,
+  getTranslator
 } from '../reducers';
 import { AnyAction, Dispatch } from './type';
 import {
@@ -54,6 +55,7 @@ import {
 } from './renderer';
 import { JsonFormsState } from '../store';
 import { JsonSchema } from '../models';
+import { i18nJsonSchema } from '..';
 
 export { JsonFormsCellRendererRegistryEntry };
 
@@ -196,8 +198,20 @@ export const defaultMapStateToEnumCellProps = (
   const props: StatePropsOfCell = mapStateToCellProps(state, ownProps);
   const options: EnumOption[] =
     ownProps.options ||
-    props.schema.enum?.map(enumToEnumOptionMapper) ||
-    (props.schema.const && [enumToEnumOptionMapper(props.schema.const)]);
+    props.schema.enum?.map(e =>
+      enumToEnumOptionMapper(
+        e,
+        getTranslator()(state),
+        props.uischema?.options?.i18n ?? (props.schema as i18nJsonSchema).i18n
+      )
+    ) ||
+    (props.schema.const && [
+      enumToEnumOptionMapper(
+        props.schema.const,
+        getTranslator()(state),
+        props.uischema?.options?.i18n ?? (props.schema as i18nJsonSchema).i18n
+      )
+    ]);
   return {
     ...props,
     options
@@ -217,7 +231,13 @@ export const mapStateToOneOfEnumCellProps = (
   const props: StatePropsOfCell = mapStateToCellProps(state, ownProps);
   const options: EnumOption[] =
     ownProps.options ||
-    (props.schema.oneOf as JsonSchema[])?.map(oneOfToEnumOptionMapper);
+    (props.schema.oneOf as JsonSchema[])?.map(oneOfSubSchema =>
+      oneOfToEnumOptionMapper(
+        oneOfSubSchema,
+        getTranslator()(state),
+        props.uischema?.options?.i18n
+      )
+    );
   return {
     ...props,
     options