@syncfusion/ej2-react-form-renderer 0.1.0-beta → 0.1.1-beta

package/src/json-converter.js

@@ -6,6 +6,10 @@ export const generateId = (type) => {
     const random = Math.floor(Math.random() * 1000);
     return `${type}_${timestamp}_${random}`;
 };
+export const generateName = (type) => {
+    const random = Math.floor(Math.random() * 1000);
+    return `${type}_${random}`;
+};
 // ============================================================================
 // LABEL TO CAMELCASE CONVERTER
 // ============================================================================
@@ -76,36 +80,36 @@ const UI_TYPE_TO_SEMANTIC_TYPE = {
     'url': { type: 'string', format: 'url' },
     'phone': { type: 'string' },
     'password': { type: 'string' },
-    'inputmask': { type: 'string' },
+    'inputMask': { type: 'string' },
     // Numeric types
     'number': { type: 'number' },
-    'rangeslider': { type: 'number' },
+    'rangeSlider': { type: 'number' },
     'rating': { type: 'number' },
     // Boolean types
     'checkbox': { type: 'boolean' },
     'switch': { type: 'boolean' },
     // Date/Time types
-    'datepicker': { type: 'string', format: 'date' },
-    'datetimepicker': { type: 'string', format: 'date-time' },
-    'timepicker': { type: 'string', format: 'time' },
-    'daterange': { type: 'string', format: 'date' },
+    'date': { type: 'string', format: 'date' },
+    'dateTime': { type: 'string', format: 'date-time' },
+    'time': { type: 'string', format: 'time' },
+    'dateRange': { type: 'string', format: 'date' },
     // Array types
     'multiselect': { type: 'array' },
-    'checkboxgroup': { type: 'array' },
+    'checkboxGroup': { type: 'array' },
     // Single-value selection (stored as string)
     'dropdown': { type: 'string' },
     'radio': { type: 'string' },
-    'splitbutton': { type: 'string' },
+    'splitButton': { type: 'string' },
     // Special types (excluded from data schema)
     'button': { type: 'button' },
     'message': { type: 'message' },
     'signature': { type: 'sign' },
-    'imageeditor': { type: 'image' },
-    'fileupload': { type: 'file' },
-    'colorpicker': { type: 'color' },
-    'datagrid': { type: 'grid' },
+    'imageEditor': { type: 'image' },
+    'fileUpload': { type: 'file' },
+    'colorPicker': { type: 'color' },
+    'dataGrid': { type: 'grid' },
     // Layout types (excluded from data schema)
-    'statichtml': { type: 'string' },
+    'staticHtml': { type: 'string' },
     'table': null,
     'panel': null,
     'tabs': null,
@@ -126,6 +130,73 @@ function stripConfiguredFlag(properties) {
     return out;
 }
 // ============================================================================
+// CONDITION VALIDATION HELPERS
+// ============================================================================
+/**
+ * Clean condition rules that reference non-existent field IDs
+ *
+ * Validates condition rules during split to remove references to deleted fields.
+ * Returns undefined if condition becomes empty after cleanup.
+ *
+ * @param condition - Condition object (visibleWhen/readOnlyWhen/disabledWhen)
+ * @param validFieldIds - Set of valid field IDs in current schema
+ * @returns Cleaned condition or undefined if empty
+ */
+function cleanConditionRules(condition, validFieldIds) {
+    if (!condition || !condition.rules || !Array.isArray(condition.rules)) {
+        return undefined;
+    }
+    const cleanedRules = condition.rules
+        .map((rule) => {
+        // If rule has nested rules (group), recursively clean
+        if (rule.rules && Array.isArray(rule.rules)) {
+            return cleanConditionRules(rule, validFieldIds);
+        }
+        // If rule references non-existent field, exclude it
+        if (rule.field && !validFieldIds.has(rule.field)) {
+            return null;
+        }
+        return rule;
+    })
+        .filter((rule) => rule !== null && rule !== undefined);
+    // If no rules remain, return undefined
+    if (cleanedRules.length === 0) {
+        return undefined;
+    }
+    return {
+        ...condition,
+        rules: cleanedRules
+    };
+}
+/**
+ * Get all valid field IDs from components
+ *
+ * @param components - Form components array
+ * @returns Set of field IDs
+ */
+function getAllComponentIds(components) {
+    const ids = new Set();
+    const stack = [...components];
+    while (stack.length) {
+        const comp = stack.pop();
+        ids.add(comp.id);
+        if (comp.children)
+            stack.push(...comp.children);
+        if (comp.tabItems) {
+            comp.tabItems.forEach(tab => {
+                if (tab.content)
+                    stack.push(...tab.content);
+            });
+        }
+        if (comp.tableCells) {
+            comp.tableCells.forEach(row => {
+                row.forEach(cell => stack.push(...cell));
+            });
+        }
+    }
+    return ids;
+}
+// ============================================================================
 // SPLIT ALGORITHM
 // ============================================================================
 export function splitSchema(heartSchema) {
@@ -134,6 +205,8 @@ export function splitSchema(heartSchema) {
     const layout = [];
     const usedFieldKeys = new Set(); // Track unique field keys
     const seenComponentIds = new Set(); // Track component IDs to prevent duplicates
+    // ✅ Get all valid field IDs for condition validation
+    const validFieldIds = getAllComponentIds(heartSchema.components);
     // Stack for iterative traversal (avoid recursion)
     const stack = heartSchema.components.map(c => ({
         component: c,
@@ -142,6 +215,58 @@ export function splitSchema(heartSchema) {
     while (stack.length > 0) {
         // Use shift() instead of pop() to maintain order (FIFO instead of LIFO)
         const { component, layoutParent } = stack.shift();
+        // ✅ Clean conditions before processing
+        if (component.conditions) {
+            const cleanedConditions = {};
+            let hasValidConditions = false;
+            if (component.conditions.visibleWhen) {
+                const cleaned = cleanConditionRules(component.conditions.visibleWhen, validFieldIds);
+                if (cleaned) {
+                    cleanedConditions.visibleWhen = cleaned;
+                    hasValidConditions = true;
+                }
+            }
+            if (component.conditions.hideWhen) {
+                const cleaned = cleanConditionRules(component.conditions.hideWhen, validFieldIds);
+                if (cleaned) {
+                    cleanedConditions.hideWhen = cleaned;
+                    hasValidConditions = true;
+                }
+            }
+            if (component.conditions.readOnlyWhen) {
+                const cleaned = cleanConditionRules(component.conditions.readOnlyWhen, validFieldIds);
+                if (cleaned) {
+                    cleanedConditions.readOnlyWhen = cleaned;
+                    hasValidConditions = true;
+                }
+            }
+            if (component.conditions.disabledWhen) {
+                const cleaned = cleanConditionRules(component.conditions.disabledWhen, validFieldIds);
+                if (cleaned) {
+                    cleanedConditions.disabledWhen = cleaned;
+                    hasValidConditions = true;
+                }
+            }
+            if (component.conditions.requiredWhen) {
+                const cleaned = cleanConditionRules(component.conditions.requiredWhen, validFieldIds);
+                if (cleaned) {
+                    cleanedConditions.requiredWhen = cleaned;
+                    hasValidConditions = true;
+                }
+            }
+            if (component.conditions.setValueWhen) {
+                const cleaned = cleanConditionRules(component.conditions.setValueWhen.condition, validFieldIds);
+                if (cleaned && component.conditions.setValueWhen.value !== undefined && component.conditions.setValueWhen.value !== '') {
+                    cleanedConditions.setValueWhen = {
+                        condition: cleaned,
+                        value: component.conditions.setValueWhen.value
+                    };
+                    hasValidConditions = true;
+                }
+            }
+            // Update component conditions (or remove if empty)
+            component.conditions = hasValidConditions ? cleanedConditions : undefined;
+        }
         // Get semantic type mapping (may be null for presentation-only widgets)
         const semanticType = UI_TYPE_TO_SEMANTIC_TYPE[component.type];
         // Handle layout containers
@@ -149,13 +274,15 @@ export function splitSchema(heartSchema) {
             const tableNode = {
                 type: 'table',
                 id: component.id,
+                name: component.name,
                 label: component.label,
                 cssClass: component.cssClass,
                 hideBorders: component.hideBorders,
                 rows: component.tableCells?.length || 0,
                 cols: component.tableCells?.[0]?.length || 0,
                 cells: [],
-                columnWidths: component.columnWidths
+                columnWidths: component.columnWidths,
+                ...(component.conditions ? { conditions: component.conditions } : {})
             };
             // Process table cells
             component.tableCells?.forEach((row, rowIndex) => {
@@ -177,11 +304,13 @@ export function splitSchema(heartSchema) {
             const panelNode = {
                 type: 'panel',
                 id: component.id,
+                name: component.name,
                 label: component.label,
                 cssClass: component.cssClass,
                 hideBorders: component.hideBorders,
                 hideLabel: component.hideLabel,
-                children: []
+                children: [],
+                ...(component.conditions ? { conditions: component.conditions } : {})
             };
             // Process panel children
             // Reverse children and use unshift() to maintain order with depth-first processing
@@ -194,11 +323,13 @@ export function splitSchema(heartSchema) {
         if (component.type === 'tabs') {
             const tabsNode = {
                 type: 'tabs',
+                name: component.name,
                 id: component.id,
                 label: component.label,
                 cssClass: component.cssClass,
                 tabOptions: component.tabOptions,
-                tabs: []
+                tabs: [],
+                ...(component.conditions ? { conditions: component.conditions } : {})
             };
             // Process tabs
             component.tabItems?.forEach((tab) => {
@@ -216,6 +347,7 @@ export function splitSchema(heartSchema) {
             const cardNode = {
                 type: 'card',
                 id: component.id,
+                name: component.name,
                 label: component.label,
                 cssClass: component.cssClass,
                 hideLabel: component.hideLabel,
@@ -224,7 +356,8 @@ export function splitSchema(heartSchema) {
                 enableAction: component.enableAction,
                 actionButtonLabel: component.actionButtonLabel,
                 actionButtonType: component.actionButtonType,
-                children: []
+                children: [],
+                ...(component.conditions ? { conditions: component.conditions } : {})
             };
             // Process card children
             // Reverse children and use unshift() to maintain order with depth-first processing
@@ -267,6 +400,7 @@ export function splitSchema(heartSchema) {
 function extractDataField(component, semanticType) {
     const dataField = {
         id: component.id,
+        name: component.name,
         type: semanticType.type,
     };
     // Add format if present
@@ -324,7 +458,7 @@ function extractUIField(component) {
     };
     // Copy all properties EXCEPT those in data schema allowed list
     const dataSchemaProps = new Set([
-        'id', 'type', 'label', 'format', 'defaultValue', 'required', 'options',
+        'id', 'type', 'label', 'format', 'defaultValue', 'required', 'options', 'name',
         'minLength', 'maxLength', 'minimum', 'maximum', 'minValue', 'maxValue',
         'minDate', 'maxDate', 'minTime', 'maxTime', 'regex', 'pattern', 'content', 'buttonType', 'textboxType'
     ]);
@@ -333,8 +467,8 @@ function extractUIField(component) {
             uiField[key] = component[key];
         }
     });
-    // Special handling: Filter DataGrid columns to keep only required properties
-    if (component.type === 'datagrid' && uiField.columns && Array.isArray(uiField.columns)) {
+    // Special handling: Filter dataGrid columns to keep only required properties
+    if (component.type === 'dataGrid' && uiField.columns && Array.isArray(uiField.columns)) {
         const requiredColumnProps = [
             'field',
             'headerText',
@@ -405,6 +539,7 @@ export function mergeSchema(split, existingUISchema) {
                     // Generate fallback data field
                     const fallbackDataField = {
                         id: fieldNode.propertyId,
+                        name: generateName(uiField?.widget || ''),
                         type: 'any',
                         label: uiField?.widget || 'Unknown Field'
                     };
@@ -418,6 +553,7 @@ export function mergeSchema(split, existingUISchema) {
                 const tableNode = node;
                 const tableComponent = {
                     id: tableNode.id,
+                    name: tableNode.name,
                     type: 'table',
                     label: tableNode.label || 'Table',
                     cssClass: tableNode.cssClass,
@@ -426,7 +562,8 @@ export function mergeSchema(split, existingUISchema) {
                     columns: tableNode.cols,
                     columnWidths: tableNode.columnWidths,
                     tableCells: [],
-                    _configured: true
+                    _configured: true,
+                    ...(tableNode.conditions ? { conditions: tableNode.conditions } : {})
                 };
                 // Process table cells recursively
                 tableNode.cells.forEach((row) => {
@@ -445,12 +582,14 @@ export function mergeSchema(split, existingUISchema) {
                 const panelComponent = {
                     id: panelNode.id,
                     type: 'panel',
+                    name: panelNode.name,
                     cssClass: panelNode.cssClass,
                     hideBorders: panelNode.hideBorders,
                     hideLabel: panelNode.hideLabel,
                     label: panelNode.label || 'Panel',
                     children: processLayoutNodes(panelNode.children),
-                    _configured: true
+                    _configured: true,
+                    ...(panelNode.conditions ? { conditions: panelNode.conditions } : {})
                 };
                 components.push(panelComponent);
             }
@@ -459,11 +598,13 @@ export function mergeSchema(split, existingUISchema) {
                 const tabsComponent = {
                     id: tabsNode.id,
                     type: 'tabs',
+                    name: tabsNode.name,
                     label: tabsNode.label || 'Tabs',
                     cssClass: tabsNode.cssClass,
                     tabOptions: tabsNode.tabOptions,
                     tabItems: [],
-                    _configured: true
+                    _configured: true,
+                    ...(tabsNode.conditions ? { conditions: tabsNode.conditions } : {})
                 };
                 // Process tabs recursively
                 tabsNode.tabs.forEach((tab) => {
@@ -479,11 +620,13 @@ export function mergeSchema(split, existingUISchema) {
                 const cardComponent = {
                     id: cardNode.id,
                     type: 'card',
+                    name: cardNode.name,
                     label: cardNode.label || 'Card',
                     cssClass: cardNode.cssClass,
                     hideLabel: cardNode.hideLabel,
                     children: processLayoutNodes(cardNode.children),
-                    _configured: true
+                    _configured: true,
+                    ...(cardNode.conditions ? { conditions: cardNode.conditions } : {})
                 };
                 // Add card-specific properties
                 if (cardNode.cardTitle !== undefined)
@@ -527,6 +670,7 @@ function mergeField(dataField, uiField) {
     const hasOptions = dataField.options !== undefined && dataField.options.length > 0;
     const component = {
         id: dataField.id,
+        name: dataField.name,
         type: (uiField?.widget || inferWidgetFromType(dataField.type, dataField.format, hasOptions)),
         label: dataField.label || dataField.id,
     };
@@ -577,11 +721,11 @@ function mergeField(dataField, uiField) {
 export function inferWidgetFromType(type, format, hasOptions) {
     if (type === 'string') {
         if (format === 'date')
-            return 'datepicker';
+            return 'date';
         if (format === 'date-time')
-            return 'datetimepicker';
+            return 'dateTime';
         if (format === 'time')
-            return 'timepicker';
+            return 'time';
         if (format === 'email')
             return 'email';
         if (format === 'url')
@@ -606,13 +750,13 @@ export function inferWidgetFromType(type, format, hasOptions) {
     if (type === 'sign')
         return 'signature';
     if (type === 'image')
-        return 'imageeditor';
+        return 'imageEditor';
     if (type === 'file')
-        return 'fileupload';
+        return 'fileUpload';
     if (type === 'color')
-        return 'colorpicker';
+        return 'colorPicker';
     if (type === 'grid')
-        return 'datagrid';
+        return 'dataGrid';
     if (type === 'any')
         return 'textbox';
     return 'textbox';
@@ -1071,6 +1215,7 @@ export function convertComponentsToUISchema(components) {
             return {
                 type: 'table',
                 id: comp.id,
+                name: comp.name,
                 label: comp.label,
                 cssClass: comp.cssClass,
                 hideBorders: comp.hideBorders,
@@ -1084,6 +1229,7 @@ export function convertComponentsToUISchema(components) {
             return {
                 type: 'panel',
                 id: comp.id,
+                name: comp.name,
                 label: comp.label,
                 cssClass: comp.cssClass,
                 hideBorders: comp.hideBorders,
@@ -1100,6 +1246,7 @@ export function convertComponentsToUISchema(components) {
             return {
                 type: 'tabs',
                 id: comp.id,
+                name: comp.name,
                 cssClass: comp.cssClass,
                 tabs
             };
@@ -1108,6 +1255,7 @@ export function convertComponentsToUISchema(components) {
             return {
                 type: 'card',
                 id: comp.id,
+                name: comp.name,
                 label: comp.label,
                 cssClass: comp.cssClass,
                 hideLabel: comp.hideLabel,
@@ -1170,11 +1318,12 @@ export function generateDataSchemaFromUI(uiSchema) {
         dataProperties[fieldId] = {
             id: fieldId,
             type: 'string',
+            name: generateName(uiField.label),
             label: uiField.label || fieldId
         };
     });
     return {
-        version: '1.0.0-beta',
+        version: '0.1.0',
         properties: dataProperties
     };
 }

package/src/parser.js

@@ -91,7 +91,7 @@ export class UniversalJsonParser {
             });
         }
         const schema = {
-            version: input.version || "1.0.0-beta",
+            version: input.version || "0.1.0",
             components
         };
         const schemaValidation = validateFormSchema(schema);
@@ -253,7 +253,7 @@ export class UniversalJsonParser {
                 return { type: 'textbox', textboxType: 'url' };
             }
             if (/^\d{4}-\d{2}-\d{2}/.test(value)) {
-                return { type: 'datepicker' };
+                return { type: 'date' };
             }
             // For generic strings, check field name patterns
             const fieldNameMatch = this.matchFieldNamePattern(fieldName);
@@ -284,7 +284,7 @@ export class UniversalJsonParser {
         if (/email|mail|e-?mail/.test(normalized))
             return { type: 'textbox', textboxType: 'email' };
         if (/date|birth|birthday|dob|created|updated/.test(normalized))
-            return { type: 'datepicker' };
+            return { type: 'date' };
         if (/phone|tel|mobile|cell|cellphone|msisdn/.test(normalized))
             return { type: 'textbox', textboxType: 'number' };
         if (/url|link|uri|website/.test(normalized))
@@ -396,7 +396,7 @@ export class UniversalJsonParser {
             defaultValue: element.defaultValue,
             ...Object.keys(validation).length > 0 ? validation : undefined
         };
-        if (type === 'dropdown' || type === 'multiselect' || type === 'radio' || type === 'splitbutton') {
+        if (type === 'dropdown' || type === 'multiselect' || type === 'radio' || type === 'splitButton') {
             if (element.choices && Array.isArray(element.choices)) {
                 component.options = element.choices;
             }
@@ -449,7 +449,7 @@ export class UniversalJsonParser {
                     component.regex = VALIDATION_REGEX['URL'];
                 }
             }
-            if (typeInference.type === 'datepicker' && component.defaultValue !== undefined && component.defaultValue !== null) {
+            if (typeInference.type === 'date' && component.defaultValue !== undefined && component.defaultValue !== null) {
                 const formatted = this.formatDateTimeValue(component.defaultValue);
                 if (formatted)
                     component.defaultValue = formatted;
@@ -487,6 +487,7 @@ export class UniversalJsonParser {
         }
         const component = {
             id: propDef.id || this.generateComponentId(typeInfo.type),
+            name: propDef.name,
             type: typeInfo.type,
             label: propDef.title || propDef.label || this.humanizeFieldName(fieldName),
             defaultValue: propDef.default || propDef.defaultValue || undefined,
@@ -511,12 +512,12 @@ export class UniversalJsonParser {
                 }
             }
         }
-        if (typeInfo.type === 'datepicker' && component.defaultValue !== undefined && component.defaultValue !== null) {
+        if (typeInfo.type === 'date' && component.defaultValue !== undefined && component.defaultValue !== null) {
             const formatted = this.formatDateTimeValue(component.defaultValue);
             if (formatted)
                 component.defaultValue = formatted;
         }
-        if ((typeInfo.type === 'splitbutton' || typeInfo.type === 'dropdown' || typeInfo.type === 'multiselect' || typeInfo.type === 'radio') && (propDef.enum || propDef.options)) {
+        if ((typeInfo.type === 'splitButton' || typeInfo.type === 'dropdown' || typeInfo.type === 'multiselect' || typeInfo.type === 'radio') && (propDef.enum || propDef.options)) {
             component.options = propDef.enum || propDef.options;
         }
         return component;
@@ -586,7 +587,7 @@ export class UniversalJsonParser {
             if (/password|pwd|pass|security|secret|key/.test(fmt) || /password|pwd|pass|security|secret|key/.test(text))
                 return { type: 'textbox', textboxType: 'password' };
             if (fmt === 'date' || fmt === 'date-time' || /date|birthday|dob/.test(text))
-                return { type: 'datepicker' };
+                return { type: 'date' };
             if (propDef.enum)
                 return { type: 'dropdown' };
             if (propDef.options)
@@ -606,14 +607,14 @@ export class UniversalJsonParser {
             return { type: 'button' };
         if (schemaType === 'signature' || schemaType === 'sign')
             return { type: 'signature' };
-        if (schemaType === 'image' || schemaType === 'imageeditor')
-            return { type: 'imageeditor' };
-        if (schemaType === 'file' || schemaType === 'fileupload')
-            return { type: 'fileupload' };
-        if (schemaType === 'color' || schemaType === 'colorpicker')
-            return { type: 'colorpicker' };
-        if (schemaType === 'splitbutton')
-            return { type: 'splitbutton' };
+        if (schemaType === 'image' || schemaType === 'imageEditor')
+            return { type: 'imageEditor' };
+        if (schemaType === 'file' || schemaType === 'fileUpload')
+            return { type: 'fileUpload' };
+        if (schemaType === 'color' || schemaType === 'colorPicker')
+            return { type: 'colorPicker' };
+        if (schemaType === 'splitButton')
+            return { type: 'splitButton' };
         return { type: this.config.defaultTextType };
     }
     generateComponentId(type) {
@@ -716,7 +717,7 @@ export const validateFormSchema = (schema) => {
  */
 export const sanitizeFormSchema = (schema) => {
     const sanitized = {
-        version: schema.version || "1.0.0-beta",
+        version: schema.version || "0.1.0",
         components: schema.components || []
     };
     const sanitizeComponent = (comp) => {

package/src/renderFormField.d.ts

@@ -12,8 +12,9 @@ export interface RenderFormFieldProps {
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     ref?: any;
     hasError?: boolean;
+    locale: string;
 }
 /**
  * Renders a single form field component
  */
-export declare const renderFormField: ({ component, value, onChange, onBlur, ref, hasError, onClick }: RenderFormFieldProps) => React.ReactNode;
+export declare const renderFormField: ({ component, value, onChange, onBlur, ref, hasError, onClick, locale }: RenderFormFieldProps) => React.ReactNode;