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

package/src/util/path.ts

@@ -65,14 +65,16 @@ export const toDataPathSegments = (schemaPath: string): string[] => {
 
   const startFromRoot = decodedSegments[0] === '#' || decodedSegments[0] === '';
   const startIndex = startFromRoot ? 2 : 1;
-  return range(startIndex, decodedSegments.length, 2).map(idx => decodedSegments[idx]);
+  return range(startIndex, decodedSegments.length, 2).map(
+    (idx) => decodedSegments[idx]
+  );
 };
 
 /**
  * Convert a schema path (i.e. JSON pointer) to a data path.
- * 
+ *
  * Data paths can be used in field change event handlers like handleChange.
- * 
+ *
  * @example
  * toDataPath('#/properties/foo/properties/bar') === 'foo.bar')
  *
@@ -81,7 +83,7 @@ export const toDataPathSegments = (schemaPath: string): string[] => {
  */
 export const toDataPath = (schemaPath: string): string => {
   return toDataPathSegments(schemaPath).join('.');
-    };
+};
 
 export const composeWithUi = (scopableUi: Scopable, path: string): string => {
   if (!isScoped(scopableUi)) {
@@ -99,11 +101,13 @@ export const composeWithUi = (scopableUi: Scopable, path: string): string => {
 
 /**
  * Encodes the given segment to be used as part of a JSON Pointer
- * 
+ *
  * JSON Pointer has special meaning for "/" and "~", therefore these must be encoded
  */
-export const encode = (segment: string) => segment?.replace(/~/g, '~0').replace(/\//g, '~1');
+export const encode = (segment: string) =>
+  segment?.replace(/~/g, '~0').replace(/\//g, '~1');
 /**
  * Decodes a given JSON Pointer segment to its "normal" representation
  */
-export const decode = (pointerSegment: string) => pointerSegment?.replace(/~1/g, '/').replace(/~0/, '~');
+export const decode = (pointerSegment: string) =>
+  pointerSegment?.replace(/~1/g, '/').replace(/~0/, '~');

package/src/util/renderer.ts

@@ -24,14 +24,16 @@
 */
 
 import get from 'lodash/get';
-import { ControlElement, isLabelable, JsonSchema, LabelElement, UISchemaElement } from '../models';
+import {
+  ControlElement,
+  isLabelable,
+  JsonSchema,
+  LabelElement,
+  UISchemaElement,
+} from '../models';
 import find from 'lodash/find';
 import {
   getUISchemas,
-  JsonFormsCellRendererRegistryEntry,
-  JsonFormsRendererRegistryEntry,
-} from '../reducers';
-import {
   getAjv,
   getCells,
   getConfig,
@@ -43,6 +45,10 @@ import {
   getSubErrorsAt,
   getTranslator,
   getUiSchema,
+} from '../reducers';
+import type {
+  JsonFormsCellRendererRegistryEntry,
+  JsonFormsRendererRegistryEntry,
   JsonFormsUISchemaRegistryEntry,
 } from '../reducers';
 import type { RankedTester } from '../testers';
@@ -56,7 +62,19 @@ import { composePaths, composeWithUi } from './path';
 import { CoreActions, update } from '../actions';
 import type { ErrorObject } from 'ajv';
 import type { JsonFormsState } from '../store';
-import { deriveLabelForUISchemaElement, getCombinedErrorMessage, getI18nKey, getI18nKeyPrefix, getI18nKeyPrefixBySchema, Translator } from '../i18n';
+import {
+  deriveLabelForUISchemaElement,
+  getCombinedErrorMessage,
+  getI18nKey,
+  getI18nKeyPrefix,
+  getI18nKeyPrefixBySchema,
+  getArrayTranslations,
+  Translator,
+} from '../i18n';
+import {
+  arrayDefaultTranslations,
+  ArrayTranslations,
+} from '../i18n/arrayTranslations';
 
 const isRequired = (
   schema: JsonSchema,
@@ -98,7 +116,7 @@ export const computeLabel = (
   required: boolean,
   hideRequiredAsterisk: boolean
 ): string => {
-  return `${label ?? ''}${ required && !hideRequiredAsterisk ? '*' : ''}`;
+  return `${label ?? ''}${required && !hideRequiredAsterisk ? '*' : ''}`;
 };
 
 /**
@@ -108,7 +126,7 @@ export const computeLabel = (
  * @param {boolean} hideRequiredAsterisk applied UI Schema option
  * @returns {boolean} should the field be marked as required
  */
- export const showAsRequired = (
+export const showAsRequired = (
   required: boolean,
   hideRequiredAsterisk: boolean
 ): boolean => {
@@ -370,6 +388,8 @@ export interface StatePropsOfControl extends StatePropsOfScopedRenderer {
    */
   required?: boolean;
 
+  i18nKeyPrefix?: string;
+
   // TODO: renderers?
 }
 
@@ -450,7 +470,7 @@ export const mapStateToControlProps = (
     rootSchema
   );
   const errors = getErrorAt(path, resolvedSchema)(state);
-  
+
   const description =
     resolvedSchema !== undefined ? resolvedSchema.description : '';
   const data = Resolve.data(rootData, path);
@@ -469,9 +489,26 @@ export const mapStateToControlProps = (
   const schema = resolvedSchema ?? rootSchema;
   const t = getTranslator()(state);
   const te = getErrorTranslator()(state);
-  const i18nLabel = t(getI18nKey(schema, uischema, path, 'label'), label, {schema, uischema, path, errors} );
-  const i18nDescription = t(getI18nKey(schema, uischema, path, 'description'), description, {schema, uischema, path, errors});
-  const i18nErrorMessage = getCombinedErrorMessage(errors, te, t, schema, uischema, path);
+  const i18nKeyPrefix = getI18nKeyPrefix(schema, uischema, path);
+  const i18nLabel = t(getI18nKey(schema, uischema, path, 'label'), label, {
+    schema,
+    uischema,
+    path,
+    errors,
+  });
+  const i18nDescription = t(
+    getI18nKey(schema, uischema, path, 'description'),
+    description,
+    { schema, uischema, path, errors }
+  );
+  const i18nErrorMessage = getCombinedErrorMessage(
+    errors,
+    te,
+    t,
+    schema,
+    uischema,
+    path
+  );
 
   return {
     data,
@@ -487,7 +524,8 @@ export const mapStateToControlProps = (
     schema,
     config: getConfig(state),
     cells: ownProps.cells || state.jsonforms.cells,
-    rootSchema
+    rootSchema,
+    i18nKeyPrefix,
   };
 };
 
@@ -503,7 +541,7 @@ export const mapDispatchToControlProps = (
 ): DispatchPropsOfControl => ({
   handleChange(path, value) {
     dispatch(update(path, () => value));
-  }
+  },
 });
 
 /**
@@ -519,7 +557,7 @@ export const mapStateToEnumControlProps = (
   const props: StatePropsOfControl = mapStateToControlProps(state, ownProps);
   const options: EnumOption[] =
     ownProps.options ||
-    props.schema.enum?.map(e =>
+    props.schema.enum?.map((e) =>
       enumToEnumOptionMapper(
         e,
         getTranslator()(state),
@@ -531,11 +569,11 @@ export const mapStateToEnumControlProps = (
         props.schema.const,
         getTranslator()(state),
         getI18nKeyPrefix(props.schema, props.uischema, props.path)
-      )
+      ),
     ]);
   return {
     ...props,
-    options
+    options,
   };
 };
 
@@ -552,7 +590,7 @@ export const mapStateToOneOfEnumControlProps = (
   const props: StatePropsOfControl = mapStateToControlProps(state, ownProps);
   const options: EnumOption[] =
     ownProps.options ||
-    (props.schema.oneOf as JsonSchema[])?.map(oneOfSubSchema =>
+    (props.schema.oneOf as JsonSchema[])?.map((oneOfSubSchema) =>
       oneOfToEnumOptionMapper(
         oneOfSubSchema,
         getTranslator()(state),
@@ -561,7 +599,7 @@ export const mapStateToOneOfEnumControlProps = (
     );
   return {
     ...props,
-    options
+    options,
   };
 };
 
@@ -580,14 +618,14 @@ export const mapStateToMultiEnumControlProps = (
   const options: EnumOption[] =
     ownProps.options ||
     (items?.oneOf &&
-      (items.oneOf as JsonSchema[]).map(oneOfSubSchema =>
+      (items.oneOf as JsonSchema[]).map((oneOfSubSchema) =>
         oneOfToEnumOptionMapper(
           oneOfSubSchema,
           state.jsonforms.i18n?.translate,
           getI18nKeyPrefix(props.schema, props.uischema, props.path)
         )
       )) ||
-    items?.enum?.map(e =>
+    items?.enum?.map((e) =>
       enumToEnumOptionMapper(
         e,
         state.jsonforms.i18n?.translate,
@@ -596,7 +634,7 @@ export const mapStateToMultiEnumControlProps = (
     );
   return {
     ...props,
-    options
+    options,
   };
 };
 
@@ -612,7 +650,7 @@ export const mapStateToMasterListItemProps = (
 ): StatePropsOfMasterItem => {
   const { schema, path, index } = ownProps;
   const firstPrimitiveProp = schema.properties
-    ? find(Object.keys(schema.properties), propName => {
+    ? find(Object.keys(schema.properties), (propName) => {
         const prop = schema.properties[propName];
         return (
           prop.type === 'string' ||
@@ -627,7 +665,7 @@ export const mapStateToMasterListItemProps = (
 
   return {
     ...ownProps,
-    childLabel
+    childLabel,
   };
 };
 
@@ -647,6 +685,7 @@ export interface OwnPropsOfMasterListItem {
   schema: JsonSchema;
   handleSelect(index: number): () => void;
   removeItem(path: string, value: number): () => void;
+  translations: ArrayTranslations;
 }
 
 export interface StatePropsOfMasterItem extends OwnPropsOfMasterListItem {
@@ -668,7 +707,7 @@ export const mapStateToControlWithDetailProps = (
 
   return {
     ...props,
-    uischemas: state.jsonforms.uischemas
+    uischemas: state.jsonforms.uischemas,
   };
 };
 
@@ -681,6 +720,7 @@ export interface ControlWithDetailProps
  */
 export interface StatePropsOfArrayControl
   extends StatePropsOfControlWithDetail {
+  translations: ArrayTranslations;
   childErrors?: ErrorObject[];
 }
 
@@ -695,22 +735,28 @@ export const mapStateToArrayControlProps = (
   state: JsonFormsState,
   ownProps: OwnPropsOfControl
 ): StatePropsOfArrayControl => {
-  const { path, schema, uischema, ...props } = mapStateToControlWithDetailProps(
-    state,
-    ownProps
-  );
+  const { path, schema, uischema, i18nKeyPrefix, label, ...props } =
+    mapStateToControlWithDetailProps(state, ownProps);
 
   const resolvedSchema = Resolve.schema(schema, 'items', props.rootSchema);
   const childErrors = getSubErrorsAt(path, resolvedSchema)(state);
+  const t = getTranslator()(state);
 
   return {
     ...props,
+    label,
     path,
     uischema,
     schema: resolvedSchema,
     childErrors,
     renderers: ownProps.renderers || getRenderers(state),
-    cells: ownProps.cells || getCells(state)
+    cells: ownProps.cells || getCells(state),
+    translations: getArrayTranslations(
+      t,
+      arrayDefaultTranslations,
+      i18nKeyPrefix,
+      label
+    ),
   };
 };
 
@@ -735,7 +781,7 @@ export const mapDispatchToArrayControlProps = (
 ): DispatchPropsOfArrayControl => ({
   addItem: (path: string, value: any) => () => {
     dispatch(
-      update(path, array => {
+      update(path, (array) => {
         if (array === undefined || array === null) {
           return [value];
         }
@@ -747,18 +793,18 @@ export const mapDispatchToArrayControlProps = (
   },
   removeItems: (path: string, toDelete: number[]) => () => {
     dispatch(
-      update(path, array => {
+      update(path, (array) => {
         toDelete
           .sort()
           .reverse()
-          .forEach(s => array.splice(s, 1));
+          .forEach((s) => array.splice(s, 1));
         return array;
       })
     );
   },
   moveUp: (path, toMove: number) => () => {
     dispatch(
-      update(path, array => {
+      update(path, (array) => {
         moveUp(array, toMove);
         return array;
       })
@@ -766,12 +812,12 @@ export const mapDispatchToArrayControlProps = (
   },
   moveDown: (path, toMove: number) => () => {
     dispatch(
-      update(path, array => {
+      update(path, (array) => {
         moveDown(array, toMove);
         return array;
       })
     );
-  }
+  },
 });
 
 export interface DispatchPropsOfMultiEnumControl {
@@ -784,7 +830,7 @@ export const mapDispatchToMultiEnumProps = (
 ): DispatchPropsOfMultiEnumControl => ({
   addItem: (path: string, value: any) => {
     dispatch(
-      update(path, data => {
+      update(path, (data) => {
         if (data === undefined || data === null) {
           return [value];
         }
@@ -795,13 +841,13 @@ export const mapDispatchToMultiEnumProps = (
   },
   removeItem: (path: string, toDelete: any) => {
     dispatch(
-      update(path, data => {
+      update(path, (data) => {
         const indexInData = data.indexOf(toDelete);
         data.splice(indexInData, 1);
         return data;
       })
     );
-  }
+  },
 });
 
 /**
@@ -820,7 +866,7 @@ export const layoutDefaultProps: {
   visible: true,
   enabled: true,
   path: '',
-  direction: 'column'
+  direction: 'column',
 };
 
 const getDirection = (uischema: UISchemaElement) => {
@@ -863,7 +909,9 @@ export const mapStateToLayoutProps = (
 
   // some layouts have labels which might need to be translated
   const t = getTranslator()(state);
-  const label = isLabelable(uischema) ? deriveLabelForUISchemaElement(uischema, t) : undefined;
+  const label = isLabelable(uischema)
+    ? deriveLabelForUISchemaElement(uischema, t)
+    : undefined;
 
   return {
     ...layoutDefaultProps,
@@ -877,7 +925,7 @@ export const mapStateToLayoutProps = (
     schema: ownProps.schema,
     direction: ownProps.direction ?? getDirection(uischema),
     config,
-    label
+    label,
   };
 };
 
@@ -905,13 +953,13 @@ export const mapStateToJsonFormsRendererProps = (
     uischema: ownProps.uischema || getUiSchema(state),
     path: ownProps.path,
     enabled: ownProps.enabled,
-    config: getConfig(state)
+    config: getConfig(state),
   };
 };
 
 export const controlDefaultProps = {
   ...layoutDefaultProps,
-  errors: [] as string[]
+  errors: [] as string[],
 };
 
 export interface StatePropsOfCombinator extends StatePropsOfControl {
@@ -930,7 +978,7 @@ export const mapStateToCombinatorRendererProps = (
 ): StatePropsOfCombinator => {
   const { data, schema, rootSchema, ...props } = mapStateToControlProps(
     state,
-    ownProps,
+    ownProps
   );
 
   const ajv = state.jsonforms.core.ajv;
@@ -939,13 +987,13 @@ export const mapStateToCombinatorRendererProps = (
     'additionalProperties',
     'type',
     'enum',
-    'const'
+    'const',
   ];
   const dataIsValid = (errors: ErrorObject[]): boolean => {
     return (
       !errors ||
       errors.length === 0 ||
-      !errors.find(e => structuralKeywords.indexOf(e.keyword) !== -1)
+      !errors.find((e) => structuralKeywords.indexOf(e.keyword) !== -1)
     );
   };
   let indexOfFittingSchema: number;
@@ -955,9 +1003,8 @@ export const mapStateToCombinatorRendererProps = (
   for (let i = 0; i < schema[keyword]?.length; i++) {
     try {
       let _schema = schema[keyword][i];
-      if(_schema.$ref){
-        _schema = Resolve.schema( rootSchema, _schema.$ref, rootSchema
-        );
+      if (_schema.$ref) {
+        _schema = Resolve.schema(rootSchema, _schema.$ref, rootSchema);
       }
       const valFn = ajv.compile(_schema);
       valFn(data);
@@ -966,7 +1013,9 @@ export const mapStateToCombinatorRendererProps = (
         break;
       }
     } catch (error) {
-      console.debug("Combinator subschema is not self contained, can't hand it over to AJV");
+      console.debug(
+        "Combinator subschema is not self contained, can't hand it over to AJV"
+      );
     }
   }
 
@@ -976,7 +1025,7 @@ export const mapStateToCombinatorRendererProps = (
     rootSchema,
     ...props,
     indexOfFittingSchema,
-    uischemas: getUISchemas(state)
+    uischemas: getUISchemas(state),
   };
 };
 
@@ -1011,6 +1060,7 @@ export const mapStateToOneOfProps = (
 
 export interface StatePropsOfArrayLayout extends StatePropsOfControlWithDetail {
   data: number;
+  translations: ArrayTranslations;
   minItems?: number;
 }
 /**
@@ -1024,21 +1074,16 @@ export const mapStateToArrayLayoutProps = (
   state: JsonFormsState,
   ownProps: OwnPropsOfControl
 ): StatePropsOfArrayLayout => {
-  const {
-    path,
-    schema,
-    uischema,
-    errors,
-    ...props
-  } = mapStateToControlWithDetailProps(state, ownProps);
+  const { path, schema, uischema, errors, i18nKeyPrefix, label, ...props } =
+    mapStateToControlWithDetailProps(state, ownProps);
 
   const resolvedSchema = Resolve.schema(schema, 'items', props.rootSchema);
-
+  const t = getTranslator()(state);
   // TODO Does not consider 'i18n' keys which are specified in the ui schemas of the sub errors
   const childErrors = getCombinedErrorMessage(
     getSubErrorsAt(path, resolvedSchema)(state),
     getErrorTranslator()(state),
-    getTranslator()(state),
+    t,
     undefined,
     undefined,
     undefined
@@ -1050,12 +1095,19 @@ export const mapStateToArrayLayoutProps = (
     childErrors;
   return {
     ...props,
+    label,
     path,
     uischema,
     schema: resolvedSchema,
     data: props.data ? props.data.length : 0,
     errors: allErrors,
-    minItems: schema.minItems
+    minItems: schema.minItems,
+    translations: getArrayTranslations(
+      t,
+      arrayDefaultTranslations,
+      i18nKeyPrefix,
+      label
+    ),
   };
 };
 
@@ -1069,8 +1121,7 @@ export interface ArrayLayoutProps
 export interface StatePropsOfLabel extends StatePropsOfRenderer {
   text?: string;
 }
-export interface LabelProps extends StatePropsOfLabel{
-}
+export interface LabelProps extends StatePropsOfLabel {}
 
 export const mapStateToLabelProps = (
   state: JsonFormsState,
@@ -1088,12 +1139,12 @@ export const mapStateToLabelProps = (
   const i18nKeyPrefix = getI18nKeyPrefixBySchema(undefined, uischema);
   const i18nKey = i18nKeyPrefix ? `${i18nKeyPrefix}.text` : text ?? '';
   const i18nText = t(i18nKey, text, { uischema });
-  
+
   return {
     text: i18nText,
     visible,
     config: getConfig(state),
     renderers: props.renderers || getRenderers(state),
     cells: props.cells || getCells(state),
-  }
-}
+  };
+};

package/src/util/resolvers.ts

@@ -48,15 +48,13 @@ export const resolveData = (instance: any, dataPath: string): any => {
   }
   const dataPathSegments = dataPath.split('.');
 
-  return dataPathSegments
-    .map(segment => decodeURIComponent(segment))
-    .reduce((curInstance, decodedSegment) => {
-      if (!curInstance || !curInstance.hasOwnProperty(decodedSegment)) {
-        return undefined;
-      }
+  return dataPathSegments.reduce((curInstance, decodedSegment) => {
+    if (!curInstance || !curInstance.hasOwnProperty(decodedSegment)) {
+      return undefined;
+    }
 
-      return curInstance[decodedSegment];
-    }, instance);
+    return curInstance[decodedSegment];
+  }, instance);
 };
 
 /**
@@ -73,7 +71,7 @@ export const findAllRefs = (
   resolveTuples = false
 ): ReferenceSchemaMap => {
   if (isObjectSchema(schema)) {
-    Object.keys(schema.properties).forEach(key =>
+    Object.keys(schema.properties).forEach((key) =>
       findAllRefs(schema.properties[key], result)
     );
   }
@@ -81,7 +79,7 @@ export const findAllRefs = (
     if (Array.isArray(schema.items)) {
       if (resolveTuples) {
         const items: JsonSchema[] = schema.items;
-        items.forEach(child => findAllRefs(child, result));
+        items.forEach((child) => findAllRefs(child, result));
       }
     } else {
       findAllRefs(schema.items, result);
@@ -89,7 +87,7 @@ export const findAllRefs = (
   }
   if (Array.isArray(schema.anyOf)) {
     const anyOf: JsonSchema[] = schema.anyOf;
-    anyOf.forEach(child => findAllRefs(child, result));
+    anyOf.forEach((child) => findAllRefs(child, result));
   }
   if (schema.$ref !== undefined) {
     result[schema.$ref] = schema;
@@ -142,7 +140,11 @@ const resolveSchemaWithSegments = (
 
   const singleSegmentResolveSchema = get(schema, segment);
 
-  const resolvedSchema = resolveSchemaWithSegments(singleSegmentResolveSchema, remainingSegments, rootSchema);
+  const resolvedSchema = resolveSchemaWithSegments(
+    singleSegmentResolveSchema,
+    remainingSegments,
+    rootSchema
+  );
   if (resolvedSchema) {
     return resolvedSchema;
   }
@@ -175,4 +177,4 @@ const resolveSchemaWithSegments = (
   }
 
   return undefined;
-}
+};

package/src/util/runtime.ts

@@ -33,7 +33,7 @@ import {
   RuleEffect,
   SchemaBasedCondition,
   Scopable,
-  UISchemaElement
+  UISchemaElement,
 } from '../models';
 import { resolveData } from './resolvers';
 import { composeWithUi } from './path';
@@ -191,7 +191,7 @@ export const isInherentlyEnabled = (
   state: JsonFormsState,
   ownProps: any,
   uischema: UISchemaElement,
-  schema: JsonSchema & { readOnly?: boolean } | undefined,
+  schema: (JsonSchema & { readOnly?: boolean }) | undefined,
   rootData: any,
   config: any
 ) => {

package/src/util/schema.ts

@@ -27,7 +27,7 @@ import find from 'lodash/find';
 
 export const getFirstPrimitiveProp = (schema: any) => {
   if (schema.properties) {
-    return find(Object.keys(schema.properties), propName => {
+    return find(Object.keys(schema.properties), (propName) => {
       const prop = schema.properties[propName];
       return (
         prop.type === 'string' ||

package/src/util/type.ts

@@ -62,7 +62,9 @@ export interface AnyAction extends Action {
  * @template A The type of things (actions or otherwise) which may be
  *   dispatched.
  */
-export type Dispatch<A extends Action = AnyAction> = <T extends A>(action: T) => T;
+export type Dispatch<A extends Action = AnyAction> = <T extends A>(
+  action: T
+) => T;
 
 // Copied from https://github.com/reduxjs/redux/blob/master/src/types/store.ts
 /**
@@ -171,7 +173,7 @@ export type Observable<T> = {
    * emission of values from the observable.
    */
   subscribe(observer: Observer<T>): { unsubscribe: Unsubscribe };
-  [Symbol.observable](): Observable<T>
+  [Symbol.observable](): Observable<T>;
 };
 
 // Copied from https://github.com/reduxjs/redux/blob/master/src/types/store.ts
@@ -180,7 +182,7 @@ export type Observable<T> = {
  * an argument to subscribe.
  */
 export type Observer<T> = {
-  next?(value: T): void
+  next?(value: T): void;
 };
 
 // Copied from https://github.com/reduxjs/redux/blob/master/src/types/reducers.ts