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/util/path.ts

@@ -40,18 +40,24 @@ import { isScoped, Scopable } from '../models';
  * 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/src/util/renderer.ts

@@ -689,7 +689,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/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

@@ -424,7 +424,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

@@ -359,7 +359,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(

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

@@ -48,7 +48,7 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps) => {
     []
   );
   const isExpanded = (index: number) =>
-    expanded === composePaths(props.path, `${index}`);
+    expanded === composePaths(props.path, index);
 
   const {
     enabled,

packages/vanilla-renderers/src/complex/TableArrayControl.tsx

@@ -146,7 +146,7 @@ class TableArrayControl extends React.Component<
               </tr>
             ) : (
               data.map((_child, index) => {
-                const childPath = Paths.compose(path, `${index}`);
+                const childPath = Paths.compose(path, index);
                 const errorsPerEntry: any[] = filter(childErrors, (error) => {
                   const errorPath = getControlPath(error);
                   return errorPath.startsWith(childPath);
@@ -189,7 +189,7 @@ class TableArrayControl extends React.Component<
                         })
                       )(schema.properties)
                     ) : (
-                      <td key={Paths.compose(childPath, `${index}`)}>
+                      <td key={Paths.compose(childPath, index)}>
                         <DispatchCell
                           schema={schema}
                           uischema={createControlElement()}

packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx

@@ -107,7 +107,7 @@ export const ArrayControl = ({
       <div className={classNames.children}>
         {data ? (
           range(0, data.length).map((index) => {
-            const childPath = composePaths(path, `${index}`);
+            const childPath = composePaths(path, index);
             return (
               <div key={index}>
                 <JsonFormsDispatch

packages/vue-vanilla/src/array/ArrayListRenderer.vue

@@ -33,7 +33,7 @@
         <dispatch-renderer
           :schema="control.schema"
           :uischema="childUiSchema"
-          :path="composePaths(control.path, `${index}`)"
+          :path="composePaths(control.path, index)"
           :enabled="control.enabled"
           :renderers="control.renderers"
           :cells="control.cells"