@syncfusion/ej2-form-renderer 34.2.2

package/src/common/datagrid-component.js

@@ -0,0 +1,410 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { Grid, Edit, Toolbar, Page, Resize, Sort, Filter } from '@syncfusion/ej2-grids';
+import { GridExpressions } from './expressions/grid-expressions';
+import { CustomValidationEngine } from './custom-validation-engine';
+/**
+ * @private
+ *
+ * `DataGridComponent` is the Category C native reimplementation of
+ * `Common/DataGridComponent.tsx` using the EJ2 `Grid` (with `Edit`,
+ * `Toolbar`, `Page`, `Resize`, `Sort`, `Filter` inject modules).
+ *
+ * Reproduces:
+ *  - internal current-data state seeded from `dataSource`;
+ *  - calculated/expression columns (disable `allowEditing`, recompute on
+ *    sibling field change via edit `change` params, update UI value by
+ *    column type);
+ *  - per-column custom validation merged into `validationRules`
+ *    (required + custom validator via `CustomValidationEngine`);
+ *  - dynamic toolbar (`Add`/`Edit`/`Delete` conditional + always
+ *    `Update`/`Cancel`);
+ *  - `actionComplete` → sync state + `onDataChange` callback;
+ *  - `getGridData()` equivalent;
+ *  - column mapping (`field, headerText, type, isPrimaryKey, width,
+ *    format (date default 'MM/dd/yyyy'), editType, allowEditing`);
+ *  - `filterSettings.mode='Immediate'`.
+ */
+var DataGridComponent = /** @class */ (function () {
+    function DataGridComponent(options) {
+        var _this = this;
+        this.grid = null;
+        this.wrapper = null;
+        /**
+         * Map React custom validation to a Syncfusion-style custom validator
+         * closure. Mirrors `mapCustomValidationToSyncfusion`.
+         */
+        this.mapCustomValidationToSyncfusion = function (col) {
+            if (!col.customValidation || col.customValidation.length === 0) {
+                return undefined;
+            }
+            return function (value) {
+                var formObj = _this.grid && _this.grid.editModule ? _this.grid.editModule.formObj : null;
+                if (!formObj) {
+                    return true;
+                }
+                var rowContext = {};
+                (_this.columns || []).forEach(function (gridCol) {
+                    var input = formObj.getInputElement(gridCol.field);
+                    if (input) {
+                        var v = input.value;
+                        rowContext[gridCol.field] = gridCol.type === 'number' ? parseInt(v, 10) : v;
+                    }
+                });
+                for (var _i = 0, _a = col.customValidation; _i < _a.length; _i++) {
+                    var rule = _a[_i];
+                    if (!rule.expression) {
+                        continue;
+                    }
+                    var fieldValue = col.type === 'number' ? parseInt(value.value, 10) : value.value;
+                    var result = _this.validationEngine.validate(rule.expression, fieldValue, rowContext);
+                    return result === true;
+                }
+                return true;
+            };
+        };
+        /**
+         * Create edit params attaching a `change` callback for non-calculated
+         * columns that have calc dependents. Mirrors `createEditParams`.
+         */
+        this.createEditParams = function (col) {
+            if (!_this.hasExpressions) {
+                return undefined;
+            }
+            var calculatedCols = _this.calculatedColumns;
+            var hasDependents = calculatedCols.some(function (calcCol) {
+                if (!calcCol.expression) {
+                    return false;
+                }
+                return calcCol.expression.indexOf("{" + col.field + "}") !== -1;
+            });
+            if (!hasDependents) {
+                return undefined;
+            }
+            return {
+                params: {
+                    change: function () {
+                        if (!_this.grid || !_this.grid.element) {
+                            return;
+                        }
+                        var form = _this.grid.element.querySelector('form');
+                        if (!form || !form.ej2_instances || !form.ej2_instances[0]) {
+                            return;
+                        }
+                        var formInstance = form.ej2_instances[0];
+                        calculatedCols.forEach(function (calcCol) {
+                            var input = formInstance.getInputElement(calcCol.field);
+                            if (!input) {
+                                return;
+                            }
+                            try {
+                                var rowValues_1 = {};
+                                _this.columns.forEach(function (c) {
+                                    var fieldInput = formInstance.getInputElement(c.field);
+                                    if (fieldInput) {
+                                        rowValues_1[c.field] = fieldInput.value;
+                                    }
+                                });
+                                var result = _this.gridExpressions.evaluateRowExpressions(rowValues_1, _this.columns);
+                                var calculatedValue = result[calcCol.field];
+                                if (calculatedValue !== undefined && calculatedValue !== null) {
+                                    if (calcCol.type === 'boolean') {
+                                        input.checked = !!calculatedValue;
+                                    }
+                                    else if (calcCol.type === 'number') {
+                                        var wrapper = input.closest('.e-control-wrapper');
+                                        var numericInput = wrapper ? wrapper.querySelector('input.e-control:not([type="hidden"])') : null;
+                                        if (numericInput && numericInput.ej2_instances && 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 (_a) {
+                            }
+                        });
+                    }
+                }
+            };
+        };
+        /**
+         * Sync the working data on `actionComplete`. Mirrors `handleActionComplete`.
+         */
+        this.handleActionComplete = function (args) {
+            if (!_this.grid) {
+                return;
+            }
+            var eventType = args.requestType;
+            switch (eventType) {
+                case 'save':
+                case 'delete':
+                case 'add': {
+                    if (_this.grid.dataSource) {
+                        var updatedData = Array.isArray(_this.grid.dataSource)
+                            ? _this.grid.dataSource
+                            : [];
+                        _this.currentData = updatedData;
+                        if (_this.onDataChange) {
+                            _this.onDataChange(updatedData);
+                        }
+                    }
+                    break;
+                }
+                default:
+                    break;
+            }
+        };
+        this.id = options.id;
+        this.columns = options.columns || [];
+        this.dataSource = Array.isArray(options.dataSource) ? options.dataSource : [];
+        this.height = options.height != null ? options.height : '200px';
+        this.width = options.width != null ? options.width : '100%';
+        this.locale = options.locale;
+        this.cssClass = options.cssClass;
+        this.pageSize = options.pageSize != null ? options.pageSize : 6;
+        this.allowPaging = options.allowPaging !== false;
+        this.allowAdding = options.allowAdding !== false;
+        this.allowEditing = options.allowEditing !== false;
+        this.allowDeleting = options.allowDeleting !== false;
+        this.allowFiltering = options.allowFiltering === true;
+        this.onDataChange = options.onDataChange;
+        this.isPreviewMode = options.isPreviewMode;
+        this.enableRtl = options.enableRtl;
+        this.ref = options.ref;
+        this.currentData = Array.isArray(this.dataSource) ? this.dataSource : [];
+        this.gridExpressions = new GridExpressions();
+        this.validationEngine = new CustomValidationEngine();
+    }
+    Object.defineProperty(DataGridComponent.prototype, "calculatedColumns", {
+        get: function () {
+            return this.gridExpressions.extractCalculatedColumns(this.columns);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DataGridComponent.prototype, "hasExpressions", {
+        get: function () {
+            return this.calculatedColumns.length > 0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * Build the dynamic toolbar array. Mirrors `buildToolbar`.
+     */
+    DataGridComponent.prototype.buildToolbar = function () {
+        var items = [];
+        if (this.allowAdding) {
+            items.push('Add');
+        }
+        if (this.allowEditing) {
+            items.push('Edit');
+        }
+        if (this.allowDeleting) {
+            items.push('Delete');
+        }
+        items.push('Update', 'Cancel');
+        return items;
+    };
+    /**
+     * Map a GridColumn to the EJ2 Grid column model, merging standard + custom
+     * validation rules and disabling editing on expression / no-edit columns.
+     */
+    DataGridComponent.prototype.mapColumn = function (col) {
+        var validationRules = col.validationRules ? __assign({}, col.validationRules) : {};
+        var customValidator = this.mapCustomValidationToSyncfusion(col);
+        if (customValidator) {
+            var errorMessage = col.customValidation && col.customValidation[0] && col.customValidation[0].expression
+                ? (this.validationEngine.parseExpression
+                    ? this.validationEngine.parseExpression(col.customValidation[0].expression).errorMessage
+                    : 'Validation failed') || 'Validation failed'
+                : 'Validation failed';
+            validationRules.required = [true, errorMessage];
+            validationRules.custom = [customValidator, errorMessage];
+        }
+        return {
+            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: validationRules,
+            edit: this.createEditParams(col)
+        };
+    };
+    /**
+     * Build the grid element, instantiate `Grid`, inject services and append
+     * to the target/created container. Returns the wrapper element.
+     */
+    DataGridComponent.prototype.render = function (targetOrHost) {
+        var _this = this;
+        // Normalize initial currentData with expression evaluation
+        var normalized = Array.isArray(this.dataSource) ? this.dataSource : [];
+        if (this.hasExpressions && normalized.length > 0) {
+            this.currentData = normalized.map(function (row) {
+                var result = _this.gridExpressions.evaluateRowExpressions(row, _this.columns);
+                return __assign({}, row, result);
+            });
+        }
+        else {
+            this.currentData = normalized;
+        }
+        var wrapper = document.createElement('div');
+        wrapper.className = 'datagrid-wrapper';
+        wrapper.style.width = typeof this.width === 'string' ? this.width : this.width + "px";
+        wrapper.style.height = 'auto';
+        var gridHost = document.createElement('div');
+        gridHost.className = 'datagrid-grid';
+        wrapper.appendChild(gridHost);
+        if (this.id) {
+            gridHost.id = this.id;
+        }
+        var grid = new Grid({
+            dataSource: this.currentData,
+            allowPaging: this.allowPaging,
+            filterSettings: { mode: 'Immediate' },
+            pageSettings: { pageSize: this.pageSize },
+            editSettings: {
+                allowEditing: this.allowEditing,
+                allowAdding: this.allowAdding,
+                allowDeleting: this.allowDeleting,
+                mode: 'Normal'
+            },
+            enableRtl: this.enableRtl,
+            locale: this.locale || 'en-US',
+            cssClass: this.cssClass,
+            toolbar: this.buildToolbar(),
+            actionComplete: this.handleActionComplete,
+            height: typeof this.height === 'string' ? this.height : this.height + "px",
+            width: typeof this.width === 'string' ? this.width : this.width + "px",
+            allowSorting: true,
+            allowFiltering: this.allowFiltering,
+            allowSelection: true,
+            columns: (this.columns || []).map(function (c) { return _this.mapColumn(c); })
+        });
+        grid.appendTo(gridHost);
+        this.ref(grid);
+        // Inject the required modules into the Grid prototype (executed once
+        // at module load — see the static `Grid.Inject(...)` call at the
+        // bottom of this file).
+        this.grid = grid;
+        if (targetOrHost) {
+            targetOrHost.appendChild(wrapper);
+        }
+        this.wrapper = wrapper;
+        return wrapper;
+    };
+    /**
+     * @private
+     */
+    DataGridComponent.prototype.getRef = function () {
+        var _this = this;
+        return {
+            getGridData: function () { return _this.currentData; },
+            gridRef: { current: this.grid }
+        };
+    };
+    /**
+     * Equivalent of `getGridData()`.
+     */
+    DataGridComponent.prototype.getGridData = function () {
+        return this.currentData;
+    };
+    /**
+     * Recompute expression-bearing rows from fresh `dataSource` (mirrors the
+     * useEffect on `[dataSource, hasExpressions, columns, ...]`).
+     */
+    DataGridComponent.prototype.setDataSource = function (dataSource) {
+        var _this = this;
+        if (!this.grid) {
+            return;
+        }
+        var normalized = Array.isArray(dataSource) ? dataSource : [];
+        if (this.hasExpressions && normalized.length > 0) {
+            this.currentData = normalized.map(function (row) {
+                var r = _this.gridExpressions.evaluateRowExpressions(row, _this.columns);
+                return __assign({}, row, r);
+            });
+        }
+        else {
+            this.currentData = normalized;
+        }
+        this.grid.dataSource = this.currentData;
+        if (this.grid.refreshBatchData) {
+            this.grid.setProperties({ dataSource: this.currentData }, true);
+        }
+        else {
+            this.grid.dataSource = this.currentData;
+        }
+        if (this.grid.refresh) {
+            this.grid.refresh();
+        }
+    };
+    /**
+     * Re-detect columns; refresh the grid (mirrors the useEffect on columns).
+     */
+    DataGridComponent.prototype.setColumns = function (columns) {
+        if (!this.grid) {
+            return;
+        }
+        if (!columns || columns.length === 0) {
+            this.grid.columns = [];
+        }
+        else if (this.grid.columns.length === 0 && columns && columns.length === 1) {
+            this.grid.columns = columns;
+        }
+        this.columns = columns;
+        if (this.grid.refresh && !this.isPreviewMode) {
+            if (this.dataSource && Array.isArray(this.dataSource) && this.dataSource.length > 0 && !this.hasExpressions) {
+                this.grid.dataSource = this.dataSource;
+            }
+            this.grid.refresh();
+        }
+    };
+    /**
+     * @private
+     */
+    DataGridComponent.prototype.destroy = function () {
+        if (this.grid) {
+            try {
+                this.grid.destroy();
+            }
+            catch (e) { /* ignore */ }
+            this.grid = null;
+        }
+        if (this.wrapper && this.wrapper.parentNode) {
+            this.wrapper.parentNode.removeChild(this.wrapper);
+        }
+        this.wrapper = null;
+        this.gridExpressions = null;
+        this.validationEngine = null;
+        this.currentData = [];
+        this.columns = [];
+        this.dataSource = [];
+    };
+    return DataGridComponent;
+}());
+export { DataGridComponent };
+export default DataGridComponent;
+Grid.Inject(Edit, Toolbar, Page, Resize, Sort, Filter);

package/src/common/expressions/dependency-tracker.d.ts

@@ -0,0 +1,29 @@
+/**
+ * DependencyTracker - Extract and track field dependencies
+ *
+ * Analyzes expressions to find field references and build dependency graphs
+ * Detects circular dependencies and calculates evaluation order
+ * @private
+ */
+export declare class DependencyTracker {
+    private escapedBracePattern;
+    /**
+     * Extract field names referenced in expression
+     */
+    extractFieldReferences(expression: string): string[];
+    /**
+     * Build dependency graph from multiple expressions
+     */
+    buildGraph(expressions: Record<string, string>): Record<string, string[]>;
+    /**
+     * Detect circular dependencies using DFS
+     */
+    detectCircularDependencies(graph: Record<string, string[]>): string[][];
+    /**
+     * Get topological sort order for evaluation
+     */
+    getTopologicalOrder(graph: Record<string, string[]>): string[];
+    private isFunctionCall;
+    private isOperator;
+    private isKeyword;
+}

package/src/common/expressions/dependency-tracker.js

@@ -0,0 +1,137 @@
+/**
+ * DependencyTracker - Extract and track field dependencies
+ *
+ * Analyzes expressions to find field references and build dependency graphs
+ * Detects circular dependencies and calculates evaluation order
+ * @private
+ */
+var DependencyTracker = /** @class */ (function () {
+    function DependencyTracker() {
+        this.escapedBracePattern = /\\{.*?\\}/g;
+    }
+    /**
+     * Extract field names referenced in expression
+     */
+    DependencyTracker.prototype.extractFieldReferences = function (expression) {
+        if (!expression)
+            return [];
+        var refs = new Set();
+        var match;
+        // Remove escaped braces first
+        var cleanExpression = expression.replace(this.escapedBracePattern, '');
+        // Extract field references from {field} syntax
+        var fieldRefPattern = /\{([^{}]+)\}/g;
+        while ((match = fieldRefPattern.exec(cleanExpression)) !== null) {
+            var ref = match[1].trim();
+            // Skip if it's a function call or operator
+            if (!this.isFunctionCall(ref) && !this.isOperator(ref)) {
+                // Extract field name from nested paths
+                var fieldName = ref.split(/[.\[\]]/)[0].trim();
+                if (fieldName && !this.isKeyword(fieldName)) {
+                    refs.add(fieldName);
+                }
+            }
+        }
+        // Extract identifiers from ${...} math expressions
+        var mathExprPattern = /\$\{([^}]+)\}/g;
+        while ((match = mathExprPattern.exec(cleanExpression)) !== null) {
+            var mathExpr = match[1];
+            // Extract all identifiers from the math expression
+            // Match word boundaries followed by identifier characters
+            // But skip if followed by ( or . (those are function calls or property access)
+            var identPattern = /\b([a-zA-Z_][a-zA-Z0-9_]*)\b(?!\s*[(\.])/g;
+            var idMatch = void 0;
+            while ((idMatch = identPattern.exec(mathExpr)) !== null) {
+                var identifier = idMatch[1];
+                // Skip keywords and constants
+                if (!this.isKeyword(identifier) && identifier !== 'Math') {
+                    refs.add(identifier);
+                }
+            }
+        }
+        return Array.from(refs);
+    };
+    /**
+     * Build dependency graph from multiple expressions
+     */
+    DependencyTracker.prototype.buildGraph = function (expressions) {
+        var graph = {};
+        var keys = Object.keys(expressions);
+        for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
+            var fieldName = keys_1[_i];
+            var deps = this.extractFieldReferences(expressions[fieldName]);
+            graph[fieldName] = deps;
+        }
+        return graph;
+    };
+    /**
+     * Detect circular dependencies using DFS
+     */
+    DependencyTracker.prototype.detectCircularDependencies = function (graph) {
+        var visited = new Set();
+        var recursionStack = new Set();
+        var cycles = [];
+        var visit = function (node, path) {
+            visited.add(node);
+            recursionStack.add(node);
+            path.push(node);
+            var deps = graph[node] || [];
+            for (var _i = 0, deps_1 = deps; _i < deps_1.length; _i++) {
+                var dep = deps_1[_i];
+                if (!visited.has(dep)) {
+                    visit(dep, path.slice());
+                }
+                else if (recursionStack.has(dep)) {
+                    var cycleStart = path.indexOf(dep);
+                    cycles.push(path.slice(cycleStart).concat([dep]));
+                }
+            }
+            recursionStack.delete(node);
+        };
+        for (var _i = 0, _a = Object.keys(graph); _i < _a.length; _i++) {
+            var node = _a[_i];
+            if (!visited.has(node)) {
+                visit(node, []);
+            }
+        }
+        return cycles;
+    };
+    /**
+     * Get topological sort order for evaluation
+     */
+    DependencyTracker.prototype.getTopologicalOrder = function (graph) {
+        var visited = new Set();
+        var order = [];
+        var visit = function (node) {
+            if (visited.has(node))
+                return;
+            visited.add(node);
+            var deps = graph[node] || [];
+            for (var _i = 0, deps_2 = deps; _i < deps_2.length; _i++) {
+                var dep = deps_2[_i];
+                if (graph[dep]) {
+                    visit(dep);
+                }
+            }
+            order.push(node);
+        };
+        for (var _i = 0, _a = Object.keys(graph); _i < _a.length; _i++) {
+            var node = _a[_i];
+            visit(node);
+        }
+        return order;
+    };
+    // Private helpers
+    DependencyTracker.prototype.isFunctionCall = function (ref) {
+        return /^\w+\s*\(/.test(ref);
+    };
+    DependencyTracker.prototype.isOperator = function (ref) {
+        return /^[+\-*/()=!<>&|]/.test(ref);
+    };
+    DependencyTracker.prototype.isKeyword = function (name) {
+        var keywords = ['PI', 'TRUE', 'FALSE', 'NULL', 'UNDEFINED', 'and', 'or', 'in'];
+        return keywords.indexOf(name.toUpperCase()) !== -1;
+    };
+    return DependencyTracker;
+}());
+export { DependencyTracker };

package/src/common/expressions/expression-engine.d.ts

@@ -0,0 +1,94 @@
+/**
+ * @private
+ */
+export declare type FormValueType = string | number | boolean | Date | null | undefined | any[];
+/**
+ * @private
+ */
+export interface EvaluationOptions {
+    timeout?: number;
+    maxDepth?: number;
+    locale?: string;
+    currencyCode?: string;
+    throwOnError?: boolean;
+}
+/**
+ * @private
+ */
+export declare type DependencyGraph = Record<string, string[]>;
+/**
+ * ExpressionEngine - Core evaluation engine
+ *
+ * Safely evaluates user-defined expressions against form state
+ * Supports field references, math operations, functions, and conditionals
+ * @private
+ */
+export declare class ExpressionEngine {
+    private parser;
+    private dependencyTracker;
+    private evaluationCache;
+    private compiledFunctions;
+    constructor();
+    /**
+     * Evaluate expression against form values
+     */
+    evaluate(expression: string, formValues: Record<string, FormValueType>, options?: EvaluationOptions, isCustomValidation?: boolean): any;
+    /**
+     * Extract field names referenced in expression
+     */
+    extractDependencies(expression: string): string[];
+    /**
+     * Build dependency graph for all expressions
+     */
+    buildDependencyGraph(components: any[]): DependencyGraph;
+    /**
+     * Detect circular dependencies
+     */
+    detectCircularDependencies(graph: DependencyGraph): string[][];
+    /**
+     * Get topological order for evaluation
+     */
+    getTopologicalOrder(graph: DependencyGraph): string[];
+    /**
+     * Clear internal caches
+     */
+    clearCache(): void;
+    private getCacheKey;
+    private buildContext;
+}
+/**
+ * ExpressionValidator - Validates expressions before runtime
+ *
+ * Checks syntax, validates field references, and detects circular dependencies
+ * @private
+ */
+export declare class ExpressionValidator {
+    private supportedFunctions;
+    private keywords;
+    /**
+     * Validate expression against available fields
+     */
+    validate(expression: string, availableFields: string[] | any[]): ValidationError[];
+    /**
+     * Validate field operations - check for invalid operators on string/date types
+     */
+    private validateFieldOperations;
+    private validateSyntax;
+    /**
+     * @private
+     */
+    validateFieldReferences(expression: string, availableFields: string[] | any[]): ValidationError[];
+    private validateFunctionCalls;
+    private isFunctionCall;
+    private isMathExpression;
+}
+/**
+ * @private
+ */
+export interface ValidationError {
+    type: 'SyntaxError' | 'UndefinedField' | 'InvalidFunction' | 'CircularDependency' | 'InvalidOperation';
+    message: string;
+    field?: string;
+    line?: number;
+    column?: number;
+}