form-builder-pro 1.0.14 → 1.0.15

package/dist/index.js

@@ -7719,102 +7719,105 @@ var FormBuilder = class {
     wrapper.appendChild(this.renderToolbar(state));
     const main = createElement("div", { className: "flex flex-col md:flex-row flex-1 overflow-hidden" });
     if (state.isPreviewMode) {
-      const masterTypes = state.masterTypes;
+      const masterTypes = state.masterTypes || [];
       const dropdownOptionsMap = state.dropdownOptionsMap;
-      if (masterTypes && masterTypes.length > 0 && state.schema.sections) {
-        const convertIndexesToOptions = (indexes) => {
-          if (!indexes || !Array.isArray(indexes) || indexes.length === 0) {
-            return [];
-          }
-          return indexes.map((item, index2) => {
-            if (typeof item === "string") {
-              return { label: item, value: item };
-            }
-            if (typeof item === "object" && item !== null) {
-              const label = item.label || item.name || item.displayName || item.text || `Option ${index2 + 1}`;
-              const value = item.value || item.id || item.name || String(index2);
-              return { label, value };
+      if (state.schema.sections) {
+        let previewSchema = state.schema;
+        if (masterTypes && masterTypes.length > 0) {
+          const convertIndexesToOptions = (indexes) => {
+            if (!indexes || !Array.isArray(indexes) || indexes.length === 0) {
+              return [];
             }
-            return { label: String(item), value: String(item) };
-          });
-        };
-        const areDefaultOptions = (options) => {
-          if (!options || options.length === 0)
-            return true;
-          return options.every(
-            (opt, idx) => opt.label === `Option ${idx + 1}` && (opt.value === `opt${idx + 1}` || opt.value === `Option ${idx + 1}`)
-          );
-        };
-        const fieldsNeedingApiCall = [];
-        const previewSchema = {
-          ...state.schema,
-          sections: state.schema.sections.map((section) => ({
-            ...section,
-            fields: section.fields.map((field) => {
-              if (field.type === "select") {
-                let masterType;
-                if (field.masterTypeName) {
-                  masterType = masterTypes.find(
-                    (mt) => mt.active === true && mt.enumName === field.masterTypeName
-                  );
-                  if (masterType && masterType.enumName) {
-                    const hasOptionsInMap = dropdownOptionsMap && dropdownOptionsMap[masterType.enumName] && dropdownOptionsMap[masterType.enumName].length > 0;
-                    const hasOptionsInIndexes = masterType.indexes && masterType.indexes.length > 0;
-                    const alreadyRequested = this.requestedMasterTypesCache.has(masterType.enumName);
-                    if (!hasOptionsInMap && !hasOptionsInIndexes && !alreadyRequested) {
-                      this.requestedMasterTypesCache.add(masterType.enumName);
-                      fieldsNeedingApiCall.push({
-                        fieldId: field.id,
-                        groupEnumName: masterType.enumName
-                      });
+            return indexes.map((item, index2) => {
+              if (typeof item === "string") {
+                return { label: item, value: item };
+              }
+              if (typeof item === "object" && item !== null) {
+                const label = item.label || item.name || item.displayName || item.text || `Option ${index2 + 1}`;
+                const value = item.value || item.id || item.name || String(index2);
+                return { label, value };
+              }
+              return { label: String(item), value: String(item) };
+            });
+          };
+          const areDefaultOptions = (options) => {
+            if (!options || options.length === 0)
+              return true;
+            return options.every(
+              (opt, idx) => opt.label === `Option ${idx + 1}` && (opt.value === `opt${idx + 1}` || opt.value === `Option ${idx + 1}`)
+            );
+          };
+          const fieldsNeedingApiCall = [];
+          previewSchema = {
+            ...state.schema,
+            sections: state.schema.sections.map((section) => ({
+              ...section,
+              fields: section.fields.map((field) => {
+                if (field.type === "select") {
+                  let masterType;
+                  if (field.masterTypeName) {
+                    masterType = masterTypes.find(
+                      (mt) => mt.active === true && mt.enumName === field.masterTypeName
+                    );
+                    if (masterType && masterType.enumName) {
+                      const hasOptionsInMap = dropdownOptionsMap && dropdownOptionsMap[masterType.enumName] && dropdownOptionsMap[masterType.enumName].length > 0;
+                      const hasOptionsInIndexes = masterType.indexes && masterType.indexes.length > 0;
+                      const alreadyRequested = this.requestedMasterTypesCache.has(masterType.enumName);
+                      if (!hasOptionsInMap && !hasOptionsInIndexes && !alreadyRequested) {
+                        this.requestedMasterTypesCache.add(masterType.enumName);
+                        fieldsNeedingApiCall.push({
+                          fieldId: field.id,
+                          groupEnumName: masterType.enumName
+                        });
+                      }
                     }
+                  } else if (field.groupName) {
+                    masterType = masterTypes.find(
+                      (mt) => mt.active === true && (mt.id === field.groupName?.id || mt.name === field.groupName?.name)
+                    );
                   }
-                } else if (field.groupName) {
-                  masterType = masterTypes.find(
-                    (mt) => mt.active === true && (mt.id === field.groupName?.id || mt.name === field.groupName?.name)
-                  );
-                }
-                if (masterType) {
-                  let options = [];
-                  if (masterType.enumName && dropdownOptionsMap && dropdownOptionsMap[masterType.enumName]) {
-                    options = dropdownOptionsMap[masterType.enumName];
-                  } else if (masterType.indexes && masterType.indexes.length > 0) {
-                    options = convertIndexesToOptions(masterType.indexes);
-                  }
-                  if (options.length > 0) {
-                    if (field.masterTypeName || !field.options || field.options.length === 0 || areDefaultOptions(field.options)) {
-                      return { ...field, options };
+                  if (masterType) {
+                    let options = [];
+                    if (masterType.enumName && dropdownOptionsMap && dropdownOptionsMap[masterType.enumName]) {
+                      options = dropdownOptionsMap[masterType.enumName];
+                    } else if (masterType.indexes && masterType.indexes.length > 0) {
+                      options = convertIndexesToOptions(masterType.indexes);
+                    }
+                    if (options.length > 0) {
+                      if (field.masterTypeName || !field.options || field.options.length === 0 || areDefaultOptions(field.options)) {
+                        return { ...field, options };
+                      }
                     }
                   }
                 }
-              }
-              return field;
-            })
-          }))
-        };
-        if (fieldsNeedingApiCall.length > 0 && this.options.onGroupSelectionChange && !this.isTriggeringApiCalls) {
-          this.isTriggeringApiCalls = true;
-          setTimeout(() => {
-            const uniqueApiCalls = /* @__PURE__ */ new Map();
-            fieldsNeedingApiCall.forEach(({ fieldId, groupEnumName }) => {
-              if (!uniqueApiCalls.has(groupEnumName)) {
-                uniqueApiCalls.set(groupEnumName, []);
-              }
-              uniqueApiCalls.get(groupEnumName).push(fieldId);
-            });
-            uniqueApiCalls.forEach((fieldIds, groupEnumName) => {
-              if (process.env.NODE_ENV === "development") {
-                console.log(`[FormBuilder] Preview: Triggering API call for masterTypeName "${groupEnumName}" (affects ${fieldIds.length} field(s))`);
-              }
-              this.options.onGroupSelectionChange({
-                fieldId: fieldIds[0],
-                groupEnumName
-              });
-            });
+                return field;
+              })
+            }))
+          };
+          if (fieldsNeedingApiCall.length > 0 && this.options.onGroupSelectionChange && !this.isTriggeringApiCalls) {
+            this.isTriggeringApiCalls = true;
             setTimeout(() => {
-              this.isTriggeringApiCalls = false;
-            }, 100);
-          }, 0);
+              const uniqueApiCalls = /* @__PURE__ */ new Map();
+              fieldsNeedingApiCall.forEach(({ fieldId, groupEnumName }) => {
+                if (!uniqueApiCalls.has(groupEnumName)) {
+                  uniqueApiCalls.set(groupEnumName, []);
+                }
+                uniqueApiCalls.get(groupEnumName).push(fieldId);
+              });
+              uniqueApiCalls.forEach((fieldIds, groupEnumName) => {
+                if (process.env.NODE_ENV === "development") {
+                  console.log(`[FormBuilder] Preview: Triggering API call for masterTypeName "${groupEnumName}" (affects ${fieldIds.length} field(s))`);
+                }
+                this.options.onGroupSelectionChange({
+                  fieldId: fieldIds[0],
+                  groupEnumName
+                });
+              });
+              setTimeout(() => {
+                this.isTriggeringApiCalls = false;
+              }, 100);
+            }, 0);
+          }
         }
         const previewContainer = createElement("div", { className: "flex-1 p-8 overflow-y-auto bg-white dark:bg-gray-900 flex justify-center" });
         const inner = createElement("div", { className: "w-full max-w-3xl" });
@@ -7839,21 +7842,12 @@ var FormBuilder = class {
       } else {
         const previewContainer = createElement("div", { className: "flex-1 p-8 overflow-y-auto bg-white dark:bg-gray-900 flex justify-center" });
         const inner = createElement("div", { className: "w-full max-w-3xl" });
-        const structureChanged = !this.lastPreviewSchema || this.lastPreviewSchema.id !== state.schema.id || this.lastPreviewSchema.sections.length !== state.schema.sections.length || JSON.stringify(this.lastPreviewSchema.sections.map((s) => ({ id: s.id, fields: s.fields.map((f) => ({ id: f.id, type: f.type })) }))) !== JSON.stringify(state.schema.sections.map((s) => ({ id: s.id, fields: s.fields.map((f) => ({ id: f.id, type: f.type })) })));
-        if (!this.previewRenderer || structureChanged) {
-          if (this.previewRenderer) {
-            inner.innerHTML = "";
-          }
+        if (!this.previewRenderer) {
           this.previewRenderer = new FormRenderer(inner, state.schema, (data) => alert(JSON.stringify(data, null, 2)), this.options.onDropdownValueChange);
           this.lastPreviewSchema = state.schema;
         } else {
-          if (this.lastPreviewSchema) {
-            const optionsChanged = JSON.stringify(this.lastPreviewSchema.sections.flatMap((s) => s.fields.map((f) => f.options))) !== JSON.stringify(state.schema.sections.flatMap((s) => s.fields.map((f) => f.options)));
-            if (optionsChanged && this.previewRenderer) {
-              this.previewRenderer.setSchema(state.schema);
-              this.lastPreviewSchema = state.schema;
-            }
-          }
+          this.previewRenderer.setSchema(state.schema);
+          this.lastPreviewSchema = state.schema;
         }
         previewContainer.appendChild(inner);
         main.appendChild(previewContainer);