@syncfusion/ej2-react-form-builder 0.1.0-beta → 35.1.37

package/Common/CustomValidationEngine.js

@@ -1,146 +0,0 @@
-import { ExpressionEngine } from './expressions/ExpressionEngine';
-/**
- * Custom Validation Engine
- *
- * Evaluates FormIO-style custom validation expressions:
- * valid = (condition) ? true : 'error message';
- *
- * Reuses ExpressionEngine for dependency extraction and expression parsing
- * @private
- * @spec custom_validation_spec_new.md
- */
-export class CustomValidationEngine {
-    expressionEngine;
-    constructor() {
-        this.expressionEngine = new ExpressionEngine();
-    }
-    /**
-     * Validate field using custom validation expression
-     *
-     * @param expression - FormIO-style validation expression (generated by UI)
-     * @param fieldValue - Current field value (as 'input')
-     * @param formValues - All form values for cross-field references
-     * @returns true if valid, error message string if invalid
-     */
-    validate(expression, fieldValue, formValues) {
-        if (!expression || expression.trim() === '') {
-            return true; // No validation rule = valid
-        }
-        try {
-            // Inject 'input' as current field value
-            const context = {
-                ...formValues,
-                input: fieldValue,
-                valid: true // Initialize valid variable
-            };
-            // Parse expression - FormIO pattern uses assignment: valid = ...
-            // Pattern: valid = (condition) ? true : 'error message'
-            const validPattern = /valid\s*=\s*(.+?)\s*\?\s*true\s*:\s*['"](.+?)['"]\s*$/;
-            const match = expression.match(validPattern);
-            if (!match) {
-                console.warn('Custom validation expression must follow format: valid = (condition) ? true : "error message"');
-                return 'Invalid validation expression format';
-            }
-            const condition = match[1].trim();
-            const errorMessage = match[2];
-            // Evaluate the condition (should return boolean)
-            const conditionResult = this.expressionEngine.evaluate(condition, context, { throwOnError: false }, true);
-            // If condition is true, validation passes
-            if (conditionResult === true) {
-                return true;
-            }
-            else {
-                // Condition is false, return the error message
-                return errorMessage;
-            }
-        }
-        catch (error) {
-            console.error('Custom validation error:', error);
-            return 'Validation expression error';
-        }
-    }
-    /**
-     * Extract field dependencies from validation expression
-     *
-     * @param expression - Custom validation expression (or just condition)
-     * @returns Array of field names referenced in expression
-     */
-    extractDependencies(expression) {
-        if (!expression)
-            return [];
-        // Extract validation logic (right side of = sign if present)
-        const validPattern = /valid\s*=\s*(.+)/;
-        const match = expression.match(validPattern);
-        const validationLogic = match ? match[1] : expression;
-        // Use ExpressionEngine to extract field references
-        const deps = this.expressionEngine.extractDependencies(validationLogic);
-        // Filter out 'input' as it's the current field, not a dependency
-        return deps.filter(dep => dep !== 'input');
-    }
-    /**
-     * Validate condition syntax (simplified - no need for "valid =" check)
-     *
-     * @param condition - Validation condition (without "valid =" prefix)
-     * @param availableFields - Available field names for reference validation
-     * @returns Array of validation error messages
-     */
-    validateConditionSyntax(condition, availableFields) {
-        if (!condition || condition.trim() === '') {
-            return ['Condition cannot be empty'];
-        }
-        const errors = [];
-        // Check for balanced parentheses
-        const openParens = (condition.match(/\(/g) || []).length;
-        const closeParens = (condition.match(/\)/g) || []).length;
-        if (openParens !== closeParens) {
-            errors.push(`Unbalanced parentheses (${openParens} open, ${closeParens} close)`);
-        }
-        // Check for balanced braces
-        const openBraces = (condition.match(/\{/g) || []).length;
-        const closeBraces = (condition.match(/\}/g) || []).length;
-        if (openBraces !== closeBraces) {
-            errors.push(`Unbalanced braces (${openBraces} open, ${closeBraces} close)`);
-        }
-        // Validate field references
-        const deps = this.extractDependencies(condition);
-        const invalidFields = deps.filter(field => !availableFields.includes(field));
-        if (invalidFields.length > 0) {
-            errors.push(`Unknown field references: ${invalidFields.join(', ')}`);
-        }
-        return errors;
-    }
-    /**
-     * Build full FormIO expression from condition and error message
-     *
-     * @param condition - Validation condition (e.g., "(input === {password})")
-     * @param errorMessage - Error message to show when validation fails
-     * @returns Full FormIO expression
-     */
-    buildExpression(condition, errorMessage) {
-        // Remove outer parentheses if present (we'll add them back in ternary)
-        const trimmedCondition = condition.trim();
-        // Escape single quotes in error message
-        const escapedMessage = errorMessage.replace(/'/g, "\\'");
-        // Build FormIO expression
-        return `valid = ${trimmedCondition} ? true : '${escapedMessage}'`;
-    }
-    /**
-     * Extract condition and error message from full FormIO expression
-     * For editing existing rules
-     *
-     * @param expression - Full FormIO expression
-     * @returns { condition, errorMessage } or null if invalid
-     */
-    parseExpression(expression) {
-        // Pattern: valid = (condition) ? true : 'error message'
-        const pattern = /valid\s*=\s*(.+?)\s*\?\s*true\s*:\s*'(.+)'/;
-        const match = expression.match(pattern);
-        if (match) {
-            return {
-                condition: match[1].trim(),
-                errorMessage: match[2].replace(/\\'/g, "'") // Unescape quotes
-            };
-        }
-        return null;
-    }
-}

package/Common/DataGridComponent.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-import type { GridComponentSchema } from '../FormBuilder/types/FormSchema';
-/**
- * @private
- */
-export interface DataGridRef {
-    getGridData: () => Record<string, any>[];
-}
-/**
- * @private
- */
-export interface DataGridComponentProps extends GridComponentSchema {
-    isPreviewMode?: boolean;
-    onDataChange?: (data: Record<string, any>[]) => void;
-    enableRtl?: boolean;
-}
-/**
- * @private
- */
-export declare const DataGridComponent: React.ForwardRefExoticComponent<DataGridComponentProps & React.RefAttributes<DataGridRef>>;

package/Common/DataGridComponent.js

@@ -1,273 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useImperativeHandle, useRef, useState, useCallback, useMemo, useEffect } from 'react';
-import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, Edit, Page, Filter, Resize, Sort, } from '@syncfusion/ej2-react-grids';
-import { useGridExpressions } from './expressions/useGridExpressions';
-import { CustomValidationEngine } from './CustomValidationEngine';
-(() => {
-    const filterPrefix = '[EJ2Grid.Warning]';
-    const _origWarn = console.warn;
-    const _origLog = console.log;
-    const _origError = console.error;
-    const makeFiltered = (orig) => (...args) => {
-        const first = args[0];
-        if (typeof first === 'string' && first.includes(filterPrefix))
-            return;
-        orig.apply(console, args);
-    };
-    // Apply only once
-    if (!console.__ej2WarnsFiltered) {
-        console.warn = makeFiltered(_origWarn);
-        console.log = makeFiltered(_origLog);
-        console.error = makeFiltered(_origError);
-        console.__ej2WarnsFiltered = true;
-    }
-})();
-/**
- * @private
- */
-export const DataGridComponent = React.forwardRef(({ id, columns, dataSource = [], height = '200px', width = '100%', locale, cssClass, pageSize = 6, allowPaging = true, allowAdding = true, allowEditing = true, allowDeleting = true, allowFiltering = false, onDataChange, isPreviewMode, enableRtl }, ref) => {
-    // Internal state: maintain current grid data
-    const [_currentData, setCurrentData] = useState(Array.isArray(dataSource) ? dataSource : []);
-    const gridRef = useRef(null);
-    const { evaluateRowExpressions, extractCalculatedColumns } = useGridExpressions();
-    const validationEngine = useRef(new CustomValidationEngine()).current;
-    const calculatedColumns = useMemo(() => extractCalculatedColumns(columns || []), [columns, extractCalculatedColumns]);
-    const hasExpressions = calculatedColumns.length > 0;
-    /**
-     * Detect column definition changes and refresh grid
-     * This ensures that changes to headerText, type, width, etc. are immediately reflected
-     * Only enabled in preview mode to avoid issues in the main form builder view
-     */
-    useEffect(() => {
-        if (gridRef.current) {
-            if (columns && !(columns.length > 0)) {
-                gridRef.current.columns = [];
-            }
-            else if (gridRef.current.columns.length === 0 && columns && columns.length == 1) {
-                gridRef.current.columns = columns;
-            }
-            setTimeout(() => {
-                if (gridRef.current?.refresh && !isPreviewMode) {
-                    if (dataSource && Array.isArray(dataSource) && dataSource.length > 0 && !hasExpressions) {
-                        gridRef.current.dataSource = dataSource;
-                    }
-                    gridRef.current.refresh();
-                }
-            }, 10);
-        }
-    }, [columns, allowAdding, allowDeleting, allowEditing, allowPaging, pageSize, allowFiltering, isPreviewMode]);
-    useEffect(() => {
-        const normalized = Array.isArray(dataSource) ? dataSource : [];
-        if (hasExpressions && normalized.length > 0) {
-            // Calculate expressions for initial data
-            const calculated = normalized.map((row) => {
-                const result = evaluateRowExpressions(row, columns || []);
-                return { ...row, ...result };
-            });
-            setCurrentData(calculated);
-        }
-        else {
-            setCurrentData(normalized);
-        }
-    }, [dataSource, hasExpressions, columns, evaluateRowExpressions]);
-    /**
-     * Expose getGridData() via ref - returns current grid data for form submission
-     */
-    useImperativeHandle(ref, () => ({
-        getGridData: () => _currentData,
-        gridRef
-    }), [_currentData]);
-    const mapCustomValidationToSyncfusion = useCallback((col) => {
-        if (!col.customValidation || col.customValidation.length === 0) {
-            return undefined;
-        }
-        // Return a custom validation function that receives the field value
-        return (value) => {
-            // Get the current form instance during edit (similar to grid-example pattern)
-            const formObj = gridRef.current?.editModule?.formObj;
-            if (!formObj)
-                return true; // Form not available, skip validation
-            // Build row context from current form values
-            const rowContext = {};
-            (columns || []).forEach((gridCol) => {
-                const input = formObj.getInputElement(gridCol.field);
-                if (input) {
-                    const value = input.value;
-                    rowContext[gridCol.field] = gridCol.type === 'number' ? parseInt(value, 10) : value;
-                }
-            });
-            // Evaluate all custom validation rules for this column
-            for (const rule of col.customValidation) {
-                if (!rule.expression)
-                    continue;
-                const fieldValue = col.type === 'number' ? parseInt(value.value, 10) : value.value;
-                const result = validationEngine.validate(rule.expression, fieldValue, rowContext);
-                // If validation fails, return error message
-                return result === true;
-            }
-            return null; // All validations passed
-        };
-    }, [validationEngine, columns, gridRef]);
-    /**
-     * Create edit params with expression calculation callback
-     * Attaches to columns that have dependencies
-     */
-    const createEditParams = useCallback((col) => {
-        if (!hasExpressions)
-            return undefined;
-        // Check if any calculated column depends on this field
-        const hasDependents = calculatedColumns.some((calcCol) => {
-            if (!calcCol.expression)
-                return false;
-            return calcCol.expression.includes(`{${col.field}}`);
-        });
-        if (!hasDependents)
-            return undefined;
-        // Return edit params with change callback
-        return {
-            params: {
-                change: () => {
-                    // Get form element and grid reference
-                    if (!gridRef.current?.element)
-                        return;
-                    const form = gridRef.current.element.querySelector('form');
-                    if (!form || !form.ej2_instances || !form.ej2_instances[0])
-                        return;
-                    const formInstance = form.ej2_instances[0];
-                    // Update all calculated columns
-                    calculatedColumns.forEach((calcCol) => {
-                        const input = formInstance.getInputElement(calcCol.field);
-                        if (!input)
-                            return;
-                        try {
-                            // Collect current form values
-                            const rowValues = {};
-                            columns?.forEach((col) => {
-                                const fieldInput = formInstance.getInputElement(col.field);
-                                if (fieldInput) {
-                                    rowValues[col.field] = fieldInput.value;
-                                }
-                            });
-                            // Evaluate expression
-                            const result = evaluateRowExpressions(rowValues, columns || []);
-                            const calculatedValue = result[calcCol.field];
-                            // Update UI
-                            if (calculatedValue !== undefined && calculatedValue !== null) {
-                                if (calcCol.type === 'boolean') {
-                                    input.checked = !!calculatedValue;
-                                }
-                                else if (calcCol.type === 'number') {
-                                    const wrapper = input.closest('.e-control-wrapper');
-                                    const numericInput = wrapper?.querySelector('input.e-control:not([type="hidden"])');
-                                    if (numericInput?.ej2_instances?.[0]) {
-                                        numericInput.ej2_instances[0].value = calculatedValue;
-                                    }
-                                    else {
-                                        input.value = calculatedValue;
-                                    }
-                                }
-                                else if (calcCol.type === 'date') {
-                                    input.ej2_instances[0].value = new Date(calculatedValue);
-                                }
-                                else {
-                                    input.value = calculatedValue;
-                                }
-                            }
-                        }
-                        catch (error) {
-                            console.warn(`Failed to calculate ${calcCol.field}:`, error);
-                        }
-                    });
-                }
-            }
-        };
-    }, [hasExpressions, calculatedColumns, columns, evaluateRowExpressions]);
-    /**
-     * Handle Syncfusion grid action events (add/edit/delete)
-     * Update _currentData state when rows are modified
-     */
-    const handleActionComplete = useCallback((args) => {
-        if (!gridRef.current)
-            return;
-        const eventType = args.requestType;
-        // Handle different action types
-        switch (eventType) {
-            case 'save':
-            case 'delete':
-            case 'add':
-                // After any data modification, sync grid data to state
-                // Use dataSource directly as it's the current working data in Syncfusion
-                if (gridRef.current.dataSource) {
-                    const updatedData = Array.isArray(gridRef.current.dataSource)
-                        ? gridRef.current.dataSource
-                        : [];
-                    setCurrentData(updatedData);
-                    onDataChange?.(updatedData);
-                }
-                break;
-            default:
-                break;
-        }
-    }, [onDataChange]);
-    /**
-     * Build toolbar array dynamically based on allowAdding/Editing/Deleting
-     * Default toolbar includes: Add, Edit, Delete, Update, Cancel, ExcelExport, Search
-     */
-    const buildToolbar = useCallback(() => {
-        const toolbarItems = [];
-        if (allowAdding) {
-            toolbarItems.push('Add');
-        }
-        if (allowEditing) {
-            toolbarItems.push('Edit');
-        }
-        if (allowDeleting) {
-            toolbarItems.push('Delete');
-        }
-        // Always include Update and Cancel for inline editing flow
-        toolbarItems.push('Update', 'Cancel');
-        return toolbarItems;
-    }, [allowAdding, allowEditing, allowDeleting]);
-    /**
-     * Map validation rules from GridColumn.validationRules to Syncfusion format
-     * Syncfusion ValidationRules type supports:
-     * - required: boolean
-     * - min/max: number (for numeric types)
-     * - minLength/maxLength: number (for string types)
-     */
-    const mapValidationRules = useCallback((col) => {
-        if (!col.validationRules) {
-            return undefined;
-        }
-        return col.validationRules;
-    }, []);
-    /**
-     * Memoize toolbar to prevent unnecessary re-renders
-     */
-    const toolbarConfig = useMemo(() => buildToolbar(), [buildToolbar]);
-    return (_jsx("div", { className: "datagrid-wrapper", style: { width, height: 'auto' }, children: _jsx("div", { className: "datagrid-grid", children: _jsxs(GridComponent, { ref: gridRef, id: id, dataSource: _currentData, allowPaging: allowPaging, filterSettings: { mode: "Immediate" }, pageSettings: { pageSize }, editSettings: {
-                    allowEditing,
-                    allowAdding,
-                    allowDeleting,
-                    mode: 'Normal',
-                }, enableRtl: enableRtl, locale: locale || 'en-US', cssClass: cssClass, toolbar: toolbarConfig, actionComplete: handleActionComplete, height: typeof height === 'string' ? height : `${height}px`, width: typeof width === 'string' ? width : `${width}px`, allowSorting: true, allowFiltering: allowFiltering, allowSelection: true, children: [_jsx(ColumnsDirective, { children: (columns || []).map((col) => {
-                            const validationRules = mapValidationRules(col);
-                            const customValidator = mapCustomValidationToSyncfusion(col);
-                            // Merge standard and custom validation rules
-                            const mergedValidationRules = validationRules ? { ...validationRules } : {};
-                            // Add custom validator to validationRules if custom validation exists
-                            if (customValidator) {
-                                // Extract error message from custom validation expression
-                                const errorMessage = col.customValidation?.[0]?.expression
-                                    ? validationEngine.parseExpression(col.customValidation[0].expression)?.errorMessage || 'Validation failed'
-                                    : 'Validation failed';
-                                mergedValidationRules.required = [true, errorMessage];
-                                mergedValidationRules.custom = [
-                                    customValidator,
-                                    errorMessage
-                                ];
-                            }
-                            return (_jsx(ColumnDirective, { field: col.field, headerText: col.headerText, type: col.type || 'string', isPrimaryKey: col.isPrimaryKey || false, width: col.width, format: col.type === 'date' ? (col.format || 'MM/dd/yyyy') : col.format, editType: col.editType, allowEditing: col.allowEditing !== false && !col.expression, validationRules: mergedValidationRules, edit: createEditParams(col) }, col.field));
-                        }) }), _jsx(Inject, { services: [Edit, Toolbar, Page, Resize, Sort, Filter] })] }) }) }));
-});
-DataGridComponent.displayName = 'DataGridComponent';