Allow handing in numbers (indices) to path composition

Author: lucas-koehler

MIGRATION.md

@@ -95,7 +95,7 @@ export const CustomRenderer = (props: ControlProps & WithInput) => {
   // Dispatch needs the path from the root of JSON Forms's data
   // Thus, calculate it by extending this control's path
   const dispatchEntries = arrayData.map((arrayEntry, index) => {
-    const entryPath = Paths.compose(path, 'array~Data', `${index}`);
+    const entryPath = Paths.compose(path, 'array~Data', index);
     const schema = Resolve.schema();
     return (
       <JsonFormsDispatch

packages/angular-material/src/library/layouts/array-layout.renderer.ts

@@ -233,7 +233,7 @@ export class ArrayLayoutRenderer
     }
     return {
       schema: this.scopedSchema,
-      path: Paths.compose(this.propsPath, `${index}`),
+      path: Paths.compose(this.propsPath, index),
       uischema,
     };
   }

packages/angular-material/src/library/other/master-detail/master.ts

@@ -225,7 +225,7 @@ export class MasterListComponent
           ? d.toString()
           : get(d, labelRefInstancePath ?? getFirstPrimitiveProp(schema)),
         data: d,
-        path: Paths.compose(path, `${index}`),
+        path: Paths.compose(path, index),
         schema,
         uischema: detailUISchema,
       };

packages/angular-material/src/library/other/table.renderer.ts

@@ -273,7 +273,7 @@ export const controlWithoutLabel = (scope: string): ControlElement => ({
 @Pipe({ name: 'getProps' })
 export class GetProps implements PipeTransform {
   transform(index: number, props: OwnPropsOfRenderer) {
-    const rowPath = Paths.compose(props.path, `${index}`);
+    const rowPath = Paths.compose(props.path, index);
     return {
       schema: props.schema,
       uischema: props.uischema,

packages/core/src/mappers/renderer.ts

@@ -718,7 +718,7 @@ export const mapStateToMasterListItemProps = (
   ownProps: OwnPropsOfMasterListItem
 ): StatePropsOfMasterItem => {
   const { schema, path, uischema, childLabelProp, index } = ownProps;
-  const childPath = composePaths(path, `${index}`);
+  const childPath = composePaths(path, index);
   const childLabel = computeChildLabel(
     getData(state),
     childPath,

packages/core/src/util/path.ts

@@ -39,18 +39,24 @@ import range from 'lodash/range';
  * The segments are appended in order to the JSON pointer and the special characters `~` and `/` are automatically encoded.
  *
  * @param {string} pointer Initial valid JSON pointer
- * @param {...string[]} segments **unencoded** path segments to append to the JSON pointer
+ * @param {...(string | number)[]} segments **unencoded** path segments to append to the JSON pointer. May also be a number in case of indices.
  * @returns {string} resulting JSON pointer
  */
-export const compose = (pointer: string, ...segments: string[]): string => {
-  return segments.reduce((currentPointer, segment) => {
-    // Only skip undefined segments, as empty string segments are allowed
-    // and reference a property that has the empty string as property name.
-    if (segment === undefined) {
-      return currentPointer;
-    }
-    return `${currentPointer}/${encode(segment)}`;
-  }, pointer ?? '');
+export const compose = (
+  pointer: string,
+  ...segments: (string | number)[]
+): string => {
+  // Remove undefined segments and encode string segments. Number don't need encoding.
+  // Only skip undefined segments, as empty string segments are allowed
+  // and reference a property that has the empty string as property name.
+  const sanitizedSegments = segments
+    .filter((s) => s !== undefined)
+    .map((s) => (typeof s === 'string' ? encode(s) : s.toString()));
+
+  return sanitizedSegments.reduce(
+    (currentPointer, segment) => `${currentPointer}/${segment}`,
+    pointer ?? ''
+  );
 };
 
 export { compose as composePaths };

packages/core/test/util/path.test.ts

@@ -304,6 +304,11 @@ test('compose - handles root json pointer', (t) => {
   t.is(result, '/foo');
 });
 
+test('compose - handles numbers', (t) => {
+  const result = compose('/foo', 0, 'bar');
+  t.is(result, '/foo/0/bar');
+});
+
 /*
  * Unexpected edge case but the RFC6901 standard defines that `/` points to a property with key `''`.
  * To point to the root object, the empty string `''` is used.

packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx

@@ -80,7 +80,7 @@ export const MaterialEnumArrayRenderer = ({
       </FormLabel>
       <FormGroup row>
         {options.map((option: any, index: number) => {
-          const optionPath = Paths.compose(path, `${index}`);
+          const optionPath = Paths.compose(path, index);
           const checkboxValue = data?.includes(option.value)
             ? option.value
             : undefined;

packages/material-renderers/src/complex/MaterialTableControl.tsx

@@ -422,7 +422,7 @@ const TableRows = ({
   return (
     <React.Fragment>
       {range(data).map((index: number) => {
-        const childPath = Paths.compose(path, `${index}`);
+        const childPath = Paths.compose(path, index);
 
         return (
           <NonEmptyRow

packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx

@@ -357,7 +357,7 @@ export const withContextToExpandPanelProps = (
       // eslint-disable-next-line react/prop-types
       uischemas,
     } = props;
-    const childPath = composePaths(path, `${index}`);
+    const childPath = composePaths(path, index);
 
     const childLabel = useMemo(() => {
       return computeChildLabel(