Handle unnamed properties with more than 1 digit (#118)

Fix logic to handle unname fields with more than 1 digit
Co-authored-by: Borja Ruiz Torres <[email protected]>

Author: bruiztorres

src/formBuilder/utils.js

@@ -867,6 +867,31 @@ export function updateSchemas(
   onChange(newSchema, newUiSchema);
 }
 
+export const DEFAULT_INPUT_NAME = 'newInput';
+
+// ensure that each added block has a unique name
+function getIdFromElementsBlock(elements: Array<ElementProps>) {
+  const names = elements.map((element) => element.name);
+  const defaultNameLength = DEFAULT_INPUT_NAME.length;
+
+  return names.length > 0
+    ? Math.max(
+        ...names.map((name) => {
+          if (name.startsWith(DEFAULT_INPUT_NAME)) {
+            const index = name.substring(defaultNameLength, name.length);
+            const value = Number.parseInt(index);
+
+            if (!isNaN(value)) {
+              return value;
+            }
+          }
+
+          return 0;
+        }),
+      ) + 1
+    : 1;
+}
+
 // given an initial schema, update with a new card appended
 export function addCardObj(parameters: {
   schema: { [string]: any },
@@ -896,24 +921,11 @@ export function addCardObj(parameters: {
     categoryHash,
   });
 
-  // ensure that each added block has a unique name
-
-  const names = newElementObjArr.map((element) => element.name);
-  const i =
-    names.length > 0
-      ? Math.max(
-          ...names.map((name) =>
-            name.startsWith('newInput')
-              ? Number.parseInt(name.charAt(8), 10)
-              : 0,
-          ),
-        ) + 1
-      : 1;
-
+  const i = getIdFromElementsBlock(newElementObjArr);
   const dataOptions = getNewElementDefaultDataOptions(i, mods);
 
   const newElement = ({
-    name: `newInput${i}`,
+    name: `${DEFAULT_INPUT_NAME}${i}`,
     required: false,
     dataOptions: dataOptions,
     uiOptions: (mods && mods.newElementDefaultUiSchema) || {},
@@ -964,21 +976,10 @@ export function addSectionObj(parameters: {
     categoryHash,
   });
 
-  // ensure that each added block has a unique name
-  const names = newElementObjArr.map((element) => element.name);
-  const i =
-    names.length > 0
-      ? Math.max(
-          ...names.map((name) =>
-            name.startsWith('newInput')
-              ? Number.parseInt(name.charAt(8), 10)
-              : 0,
-          ),
-        ) + 1
-      : 1;
+  const i = getIdFromElementsBlock(newElementObjArr);
 
   const newElement = ({
-    name: `newInput${i}`,
+    name: `${DEFAULT_INPUT_NAME}${i}`,
     required: false,
     dataOptions: {
       title: `New Input ${i}`,

src/formBuilder/utils.test.js

@@ -15,6 +15,9 @@ import {
   subtractArray,
   excludeKeys,
   getNewElementDefaultDataOptions,
+  addCardObj,
+  addSectionObj,
+  DEFAULT_INPUT_NAME,
 } from './utils';
 import DEFAULT_FORM_INPUTS from './defaults/defaultFormInputs';
 
@@ -72,6 +75,20 @@ const elementPropArr = [
   },
 ];
 
+function generateSchemaWithUnnamedProperties(amount) {
+  const properties = [...Array(10).keys()].reduce((acc, id) => {
+    return { ...acc, [`${DEFAULT_INPUT_NAME}${id + 1}`]: { type: 'string' } };
+  }, {});
+
+  return {
+    $id: 'https://example.com/person.schema.json',
+    $schema: 'https://json-schema.org/draft/2020-12/schema',
+    title: 'Test',
+    type: 'object',
+    properties: properties,
+  };
+}
+
 describe('parse', () => {
   it('parses valid JSON into a JS object', () => {
     expect(
@@ -711,3 +728,47 @@ describe('getNewElementDefaultDataOptions', () => {
     expect(actualDataOptions).toEqual(expectedDataOptions);
   });
 });
+
+describe('addCardObj', () => {
+  it('should be able to add more than 10 unnamed CardObj', () => {
+    const mockEvent = jest.fn(() => {});
+    const defaultUiSchema = {};
+    const props = {
+      schema: generateSchemaWithUnnamedProperties(10),
+      uischema: defaultUiSchema,
+      onChange: (schema, uischema) => mockEvent(schema, uischema),
+      definitionData: {},
+      definitionUi: {},
+      categoryHash: {},
+    };
+
+    addCardObj(props);
+
+    const currentSchema = mockEvent.mock.calls[0][0];
+    const inputElementsCount = Object.keys(currentSchema.properties).length;
+
+    expect(inputElementsCount).toEqual(11);
+  });
+});
+
+describe('addSectionObj', () => {
+  it('should be able to add more than 10 unnamed SectionObj', () => {
+    const mockEvent = jest.fn(() => {});
+    const defaultUiSchema = {};
+    const props = {
+      schema: generateSchemaWithUnnamedProperties(10),
+      uischema: defaultUiSchema,
+      onChange: (schema, uischema) => mockEvent(schema, uischema),
+      definitionData: {},
+      definitionUi: {},
+      categoryHash: {},
+    };
+
+    addSectionObj(props);
+
+    const currentSchema = mockEvent.mock.calls[0][0];
+    const inputElementsCount = Object.keys(currentSchema.properties).length;
+
+    expect(inputElementsCount).toEqual(11);
+  });
+});