Fix unique field id generation algorithm.

Unique id of every element is derived from
1. parentid
2. position index of current element.

This commmit introduce an optional property "id" to global component.
Default value is randomly generated using Math.random.

Fixes #61

Author: harish2704

src/vfjs-global-mixin/methods/vfjs-helpers/index.js

@@ -81,29 +81,6 @@ const vfjsHelpers = {
       },
     }));
   },
-  vfjsHelperHashString(string, binary = 62) {
-    let integer = 0;
-
-    for (let i = 0; i < string.length; i++) {
-      const char = string.charCodeAt(i);
-      integer = (integer * 33) ^ char; // eslint-disable-line no-bitwise
-    }
-
-    // Convert int to unsigned to get a positive number
-    integer >>>= 0; // eslint-disable-line no-bitwise
-
-    const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
-    const array = [];
-
-    // Create an alphanumeric hash of unsigned int
-    while (integer >= binary) {
-      const char = integer % binary;
-      array.push(chars[char]);
-      integer = Math.floor(integer / binary);
-    }
-
-    return array.join('');
-  },
   vfjsHelperCreateComponent({ children = [], component, props }) {
     // If the component matches one of the local components
     // passed in with the `components` prop
@@ -140,25 +117,23 @@ const vfjsHelpers = {
     set(newVfjsModel, key, value);
     return newVfjsModel;
   },
-  // The level param helps us to differentiate further between fields.
-  // As the same field configuration may be present throughout the ui schema
-  // and thus have the same hash.
-  //
-  // We mediate this by providing the depth level as a second param
-  // which will make the hash unique for every field
-  vfjsHelperGenerateField(field, level = 0) {
+  /*
+   * Unique id for every element is generated by simply appending the position index with parentid.
+   * The parentId is the unique id of parent component ( it can be either a form or a field )
+   * The id of top most form component is auto generated using Math.random.
+   * Since id is a function of parentId and element index, we will get consistent , but unique id for each component
+   */
+  vfjsHelperGenerateField(field, parentId) {
     if (!field) {
       return false;
     }
 
-    const { children = [], ...fieldWithoutChildren } = field;
-    const objString = JSON.stringify({ fieldWithoutChildren, level });
-    const id = this.vfjsHelperHashString(objString);
+    const { children = [] } = field;
 
     return {
       ...field,
-      id,
-      children: children.map((child, i) => this.vfjsHelperGenerateField(child, (i + 1) * (level + 1))),
+      id: parentId,
+      children: children.map((child, i) => this.vfjsHelperGenerateField(child, `${parentId}-${i}`)),
     };
   },
   vfjsHelperChildArrayMapper({ model, children = [], ...child }, parentModel, index) {

src/vfjs-global-mixin/methods/vfjs-ui/setters.js

@@ -4,7 +4,7 @@ import { VFJS_EVENT_STATE_UPDATED } from '../../../constants';
 const vfjsUiSetters = {
   setVfjsUiSchema(uiSchema = []) {
     const newVfjsUiSchema = uiSchema.reduce(
-      (fields, field, index) => [...fields, this.vfjsHelperGenerateField(field, index)],
+      (fields, field, index) => [...fields, this.vfjsHelperGenerateField(field, `${this.id}-${index}`)],
       [],
     );
 

src/vfjs-global-mixin/props.js

@@ -16,6 +16,10 @@ const props = {
     type: Object,
     default: () => ({}),
   },
+  id: {
+    type: String,
+    default: () => Math.random().toString(36).substr(2, 9),
+  },
   options: {
     type: Object,
     default: () => ({}),