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

package/Common/expressions/ExpressionParser.js

@@ -0,0 +1,269 @@
+/**
+ * ExpressionParser - Parse and compile expressions
+ *
+ * Converts string expressions into safe, compiled functions
+ * Supports field references, operators, functions, and conditionals
+ * @private
+ * @spec Expression_Engine.md
+ */
+export class ExpressionParser {
+    supportedFunctions = [
+        'SUM', 'AVG', 'MIN', 'MAX', 'COUNT',
+        'ROUND', 'FLOOR', 'CEIL', 'ABS', 'SQRT',
+        'UPPER', 'LOWER', 'CONCAT', 'LENGTH', 'TRIM', 'SUBSTRING',
+        'TODAY', 'AGE', 'DATEFORMAT', 'DATEDIFF', 'ADDDAYS', 'SUBDAYS', 'INCLUDES', 'CONTAINS', 'ISNAN', 'SUPPORTEDVALUESOF', 'TOSTRING', 'DATE', 'GETTIME',
+        'EVERY', 'SOME'
+    ];
+    availableFields = new Map();
+    /**
+     * Initialize parser with available fields for type validation
+     */
+    setAvailableFields(fields) {
+        this.availableFields.clear();
+        fields.forEach(field => {
+            this.availableFields.set(field.name, field);
+        });
+    }
+    validateFieldOperations(expression) {
+        const errors = [];
+        // Skip if no fields available
+        if (this.availableFields.size === 0) {
+            return errors;
+        }
+        // Invalid operators for string fields (allow only + for concatenation)
+        const stringInvalidOps = ['-', '*', '/', '%', '^'];
+        // All operators invalid for date fields
+        const dateInvalidOps = ['-', '*', '/', '%', '^', '+'];
+        // Track reported operator positions to avoid duplicates
+        const reportedOperators = new Set();
+        // Extract all field references and their surrounding operators
+        const fieldRefPattern = /(\{[^}]+\})/g;
+        let match;
+        while ((match = fieldRefPattern.exec(expression)) !== null) {
+            const fieldRef = match[0];
+            const fieldName = fieldRef.slice(1, -1); // Remove { }
+            const field = this.availableFields.get(fieldName);
+            if (!field)
+                continue; // Field not found in available fields, skip validation
+            const fieldIndex = match.index;
+            const fieldEndIndex = fieldIndex + fieldRef.length;
+            // Get context around field reference (including spaces)
+            const textBefore = expression.substring(Math.max(0, fieldIndex - 10), fieldIndex);
+            const textAfter = expression.substring(fieldEndIndex, Math.min(expression.length, fieldEndIndex + 10));
+            // Extract the operator if present (skip spaces)
+            const operatorBefore = textBefore.trimEnd().slice(-1);
+            const operatorAfter = textAfter.trimStart().charAt(0);
+            // Calculate actual position of operators in the original expression
+            const operatorBeforePos = fieldIndex - (textBefore.length - textBefore.trimEnd().length) - 1;
+            const operatorAfterPos = fieldEndIndex + (textAfter.length - textAfter.trimStart().length);
+            // For STRING fields: reject all operators except +
+            if (field.type === 'string' && !field.format) {
+                if (operatorBefore && stringInvalidOps.includes(operatorBefore)) {
+                    const key = `${operatorBeforePos}:${operatorBefore}`;
+                    if (!reportedOperators.has(key)) {
+                        errors.push(`Cannot perform '${operatorBefore}' operation on string field '{${fieldName}}'`);
+                        reportedOperators.add(key);
+                    }
+                }
+                if (operatorAfter && stringInvalidOps.includes(operatorAfter)) {
+                    const key = `${operatorAfterPos}:${operatorAfter}`;
+                    if (!reportedOperators.has(key)) {
+                        errors.push(`Cannot perform '${operatorAfter}' operation on string field '{${fieldName}}'`);
+                        reportedOperators.add(key);
+                    }
+                }
+            }
+            // For DATE fields: reject ALL operators including +
+            if (field.format === 'date' || field.format === 'date-time' || field.format === 'time') {
+                if (operatorBefore && dateInvalidOps.includes(operatorBefore)) {
+                    const key = `${operatorBeforePos}:${operatorBefore}`;
+                    if (!reportedOperators.has(key)) {
+                        errors.push(`Cannot perform '${operatorBefore}' operation on date field '{${fieldName}}'`);
+                        reportedOperators.add(key);
+                    }
+                }
+                if (operatorAfter && dateInvalidOps.includes(operatorAfter)) {
+                    const key = `${operatorAfterPos}:${operatorAfter}`;
+                    if (!reportedOperators.has(key)) {
+                        errors.push(`Cannot perform '${operatorAfter}' operation on date field '{${fieldName}}'`);
+                        reportedOperators.add(key);
+                    }
+                }
+            }
+        }
+        return errors;
+    }
+    /**
+     * Validate expression syntax
+     */
+    validate(expression) {
+        const errors = [];
+        if (!expression || expression.trim() === '') {
+            return { valid: true, errors: [] };
+        }
+        // Check for unbalanced braces
+        const openBraces = (expression.match(/\{/g) || []).length;
+        const closeBraces = (expression.match(/\}/g) || []).length;
+        if (openBraces !== closeBraces) {
+            errors.push('Unbalanced braces in expression');
+        }
+        // Check for unbalanced parentheses
+        const openParens = (expression.match(/\(/g) || []).length;
+        const closeParens = (expression.match(/\)/g) || []).length;
+        if (openParens !== closeParens) {
+            errors.push('Unbalanced parentheses in expression');
+        }
+        // Check for invalid function calls
+        const funcPattern = /(\w+)\s*\(/g;
+        let match;
+        while ((match = funcPattern.exec(expression)) !== null) {
+            const funcName = match[1].toUpperCase();
+            // Only validate uppercase-named functions
+            if (funcName === funcName.toUpperCase() && !this.supportedFunctions.includes(funcName)) {
+                errors.push(`Unknown function: ${funcName}`);
+            }
+        }
+        // Validate field operations based on field types
+        const fieldOpErrors = this.validateFieldOperations(expression);
+        errors.push(...fieldOpErrors);
+        return {
+            valid: errors.length === 0,
+            errors
+        };
+    }
+    /**
+     * Compile expression to executable function
+     */
+    compile(expression, options = {}) {
+        try {
+            // Set available fields for validation if provided
+            if (options.availableFields && Array.isArray(options.availableFields)) {
+                this.setAvailableFields(options.availableFields);
+            }
+            // Validate expression before compiling
+            const validation = this.validate(expression);
+            if (!validation.valid) {
+                console.error('Expression validation errors:', validation.errors, { expression });
+                return () => null;
+            }
+            // Replace field references with context lookups
+            let compiled = expression;
+            // Handle field references FIRST (this includes refs inside ${...})
+            compiled = this.compileFieldReferences(compiled);
+            compiled = options.isCustomValidation ? this.compileInputReferences(compiled) : compiled;
+            // Handle bare function calls SECOND (e.g., SUM([...]) without braces)
+            compiled = this.compileBareFunctionCalls(compiled);
+            // Handle math expressions THIRD (now ${} and {} contain already-replaced refs)
+            compiled = this.compileMatrixExpressions(compiled);
+            // Create function that safely evaluates the expression
+            return (context) => {
+                try {
+                    // This uses Function constructor with controlled context binding
+                    // which is safer than eval() but still allows expressions
+                    // Note: compiled expression already uses context['field'] syntax
+                    const func = new Function('context', `
+            try {
+              return ${compiled};
+            } catch (e) {
+              return null;
+            }
+          `);
+                    return func(context);
+                }
+                catch (e) {
+                    console.error('Expression execution error:', e, { expression, compiled });
+                    return null;
+                }
+            };
+        }
+        catch (error) {
+            console.error('Expression compilation error:', error, { expression });
+            return () => null;
+        }
+    }
+    // Private helpers
+    compileMatrixExpressions(expression) {
+        let compiled = expression;
+        const constants = ['PI', 'TRUE', 'FALSE', 'NULL', 'UNDEFINED', 'Math'];
+        const functions = [
+            'SUM', 'AVG', 'MIN', 'MAX', 'COUNT',
+            'ROUND', 'FLOOR', 'CEIL', 'ABS', 'SQRT',
+            'UPPER', 'LOWER', 'CONCAT', 'LENGTH', 'TRIM', 'SUBSTRING',
+            'TODAY', 'AGE', 'DATEFORMAT', 'DATEDIFF', 'ADDDAYS', 'SUBDAYS'
+        ];
+        // Create fresh regex each time to avoid lastIndex issues with g flag
+        const mathExprPattern = /\$?\{([^}]+)\}/g;
+        // Process ${...} and {...} blocks: replace bare identifiers with context lookups
+        compiled = compiled.replace(mathExprPattern, (_match, content) => {
+            let transformed = content;
+            // STEP 1: Handle function calls first
+            // Match function names followed by ( and prefix with context.
+            // Use negative lookbehind to avoid double-replacing (e.g., context.SUM)
+            functions.forEach(fn => {
+                const funcCallRegex = new RegExp(`(?<!context\\.)\\b${fn}\\b(?=\\s*\\()`, 'g');
+                transformed = transformed.replace(funcCallRegex, `context.${fn}`);
+            });
+            constants.forEach(constant => {
+                const constantRegex = new RegExp(`\\b${constant}\\b`, 'g');
+                transformed = transformed.replace(constantRegex, `context.${constant}`);
+            });
+            // Return as parenthesized expression
+            return `(${transformed})`;
+        });
+        return compiled;
+    }
+    compileBareFunctionCalls(expression) {
+        let compiled = expression;
+        const functions = [
+            'SUM', 'AVG', 'MIN', 'MAX', 'COUNT',
+            'ROUND', 'FLOOR', 'CEIL', 'ABS', 'SQRT',
+            'UPPER', 'LOWER', 'CONCAT', 'LENGTH', 'TRIM', 'SUBSTRING',
+            'TODAY', 'AGE', 'DATEFORMAT', 'DATEDIFF', 'ADDDAYS', 'SUBDAYS'
+        ];
+        // Handle bare function calls like SUM([...]) that are not inside ${...} or {...}
+        // Use negative lookbehind to avoid matching if already preceded by context.
+        functions.forEach(fn => {
+            const funcCallRegex = new RegExp(`(?<!context\\.)\\b${fn}\\b(?=\\s*\\()`, 'g');
+            compiled = compiled.replace(funcCallRegex, `context.${fn}`);
+        });
+        return compiled;
+    }
+    compileFieldReferences(expression) {
+        let compiled = expression;
+        // Create fresh regex each time to avoid lastIndex issues with g flag
+        const fieldRefPattern = /\{([^{}]+)\}/g;
+        // Replace {fieldName} with context['fieldName'] or field access
+        compiled = compiled.replace(fieldRefPattern, (match, ref) => {
+            // Handle escaped braces
+            if (ref.startsWith('\\') && ref.endsWith('\\')) {
+                return match; // Keep as is
+            }
+            // Handle nested paths like {customer.name}
+            return `context['${ref.replace(/\./g, '\'].[')}']`;
+        });
+        return compiled;
+    }
+    compileInputReferences(expression) {
+        const compiled = expression;
+        // First, protect string literals to avoid replacing 'input' inside strings
+        const strings = [];
+        let stringProtected = compiled;
+        stringProtected = stringProtected.replace(/(['"`])(?:(?=(\\?))\2.)*?\1/g, (match) => {
+            strings.push(match);
+            return `__STRING_${strings.length - 1}__`;
+        });
+        // Case 1: Replace input.property with context['input'].property
+        const inputPropertyPattern = /(?<!context\[')\binput\./g;
+        stringProtected = stringProtected.replace(inputPropertyPattern, 'context[\'input\'].');
+        // Case 2: Replace bare 'input' with context['input']
+        // Use negative lookbehind to avoid replacing if already preceded by context.'
+        const inputPattern = /(?<!context\[')\binput\b(?!\s*[(\.])/g;
+        stringProtected = stringProtected.replace(inputPattern, 'context[\'input\']');
+        // Restore string literals
+        let result = stringProtected;
+        strings.forEach((str, idx) => {
+            result = result.replace(`__STRING_${idx}__`, str);
+        });
+        return result;
+    }
+}

package/Common/expressions/useGridExpressions.d.ts

@@ -0,0 +1,12 @@
+import { ExpressionEngine } from './ExpressionEngine';
+/**
+ * Hook to evaluate expressions for grid rows
+ * Returns a function that calculates all expression columns for a given row
+ * @private
+ */
+export declare const useGridExpressions: () => {
+    evaluateRowExpressions: (row: Record<string, any>, columns: any[]) => Record<string, any>;
+    extractCalculatedColumns: (columns: any[]) => any[];
+    engine: ExpressionEngine;
+    parseColumnValue: (value: any, columnType?: string) => any;
+};

package/Common/expressions/useGridExpressions.js

@@ -0,0 +1,71 @@
+import { useCallback } from 'react';
+import { ExpressionEngine } from './ExpressionEngine';
+/**
+ * Hook to evaluate expressions for grid rows
+ * Returns a function that calculates all expression columns for a given row
+ * @private
+ */
+export const useGridExpressions = () => {
+    const engine = new ExpressionEngine();
+    /**
+     * Convert column values to proper types (especially numbers)
+     * Form inputs return strings, so we need to parse numeric values
+     */
+    const parseColumnValue = useCallback((value, columnType) => {
+        // Handle null/undefined
+        if (value === null || value === undefined || value === '') {
+            return value;
+        }
+        // Parse number types
+        if (columnType === 'number') {
+            const parsed = parseFloat(String(value));
+            return isNaN(parsed) ? 0 : parsed;
+        }
+        // Parse boolean types
+        if (columnType === 'boolean') {
+            if (typeof value === 'boolean')
+                return value;
+            return value === 'true' || value === '1' || value === 1 || value === true;
+        }
+        // Return as-is for string and other types
+        return value;
+    }, []);
+    const evaluateRowExpressions = useCallback((row, columns) => {
+        const calculatedRow = { ...row };
+        // Find all columns with expressions
+        const calculatedColumns = columns.filter(col => col.expression && col.expression.trim());
+        for (const column of calculatedColumns) {
+            if (!column.expression)
+                continue;
+            try {
+                // Prepare row values with proper type conversion
+                const typedRow = {};
+                columns.forEach((col) => {
+                    const value = calculatedRow[col.field];
+                    typedRow[col.field] = parseColumnValue(value, col.type);
+                });
+                // Evaluate expression with current row as context
+                const result = engine.evaluate(column.expression, typedRow, {
+                    throwOnError: false
+                });
+                // Update row with calculated value
+                calculatedRow[column.field] = result;
+            }
+            catch (error) {
+                console.error(`Failed to evaluate expression for column "${column.field}":`, error);
+                // Keep original value or set to null on error
+                calculatedRow[column.field] = null;
+            }
+        }
+        return calculatedRow;
+    }, [parseColumnValue]);
+    const extractCalculatedColumns = useCallback((columns) => {
+        return columns.filter(col => col.expression && col.expression.trim());
+    }, []);
+    return {
+        evaluateRowExpressions,
+        extractCalculatedColumns,
+        engine,
+        parseColumnValue
+    };
+};

package/Common/globalFormId.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @private
+ */
+export declare const setFormId: (id: string | null) => void;
+/**
+ * @private
+ */
+export declare const getFormId: () => string | null;
+/**
+ * @private
+ */
+export declare const subscribeFormId: (cb: (id: string | null) => void) => () => boolean;
+/**
+ * @private
+ */
+export declare const useFormId: () => string;
+/**
+ * @private
+ */
+declare const _default: {
+    setFormId: (id: string | null) => void;
+    getFormId: () => string | null;
+    subscribeFormId: (cb: (id: string | null) => void) => () => boolean;
+    useFormId: () => string;
+};
+export default _default;

package/Common/globalFormId.js

@@ -0,0 +1,45 @@
+import React from 'react';
+let formId = null;
+const listeners = new Set();
+/**
+ * @private
+ */
+export const setFormId = (id) => {
+    formId = id;
+    listeners.forEach((cb) => cb(id));
+};
+/**
+ * @private
+ */
+export const getFormId = () => formId;
+/**
+ * @private
+ */
+export const subscribeFormId = (cb) => {
+    listeners.add(cb);
+    return () => listeners.delete(cb);
+};
+/**
+ * @private
+ */
+export const useFormId = () => {
+    const [, setTick] = React.useState(0);
+    const [id, setId] = React.useState(formId);
+    React.useEffect(() => {
+        const unsub = subscribeFormId((newId) => {
+            setId(newId);
+            setTick((t) => t + 1);
+        });
+        return unsub;
+    }, []);
+    return id;
+};
+/**
+ * @private
+ */
+export default {
+    setFormId,
+    getFormId,
+    subscribeFormId,
+    useFormId,
+};