@syncfusion/ej2-react-form-renderer 0.1.2-beta → 34.2.2

package/src/DataGridComponent.js

@@ -1,147 +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';
-(() => {
-    try {
-        const filterPrefix = '[EJ2Grid.Warning]';
-        const _origWarn = console.warn;
-        const _origLog = console.log;
-        const _origError = console.error;
-        const makeFiltered = (orig) => (...args) => {
-            try {
-                const first = args[0];
-                if (typeof first === 'string' && first.includes(filterPrefix))
-                    return;
-            }
-            catch { }
-            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;
-        }
-    }
-    catch { }
-})();
-/**
- * DataGridComponent: Wrapper around Syncfusion GridComponent
- *
- * Responsibilities:
- * - Manages internal _currentData state (initialized from dataSource)
- * - Exposes getGridData() via useImperativeHandle for form submission
- * - Handles actionComplete events (add/edit/delete operations)
- * - Maps GridColumn.validationRules to ColumnDirective.validationRules
- * - Renders Syncfusion toolbar with CRUD actions based on allowAdding/Editing/Deleting
- */
-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 }, ref) => {
-    // Internal state: maintain current grid data
-    const [_currentData, setCurrentData] = useState(Array.isArray(dataSource) ? dataSource : []);
-    const gridRef = useRef(null);
-    /**
-     * 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) {
-                    if (dataSource && Array.isArray(dataSource) && dataSource.length > 0) {
-                        gridRef.current.dataSource = dataSource;
-                    }
-                    gridRef.current.refresh();
-                }
-            }, 10);
-        }
-    }, [columns, allowAdding, allowDeleting, allowEditing, allowPaging, pageSize, allowFiltering]);
-    useEffect(() => {
-        const normalized = Array.isArray(dataSource) ? dataSource : [];
-        setCurrentData(normalized);
-    }, [dataSource]);
-    /**
-     * Expose getGridData() via ref - returns current grid data for form submission
-     */
-    useImperativeHandle(ref, () => ({
-        getGridData: () => _currentData,
-        gridRef
-    }), [_currentData]);
-    /**
-     * 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',
-                }, 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 && columns.length > 0 && columns.map((col) => (_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, validationRules: mapValidationRules(col) }, col.field))) }), _jsx(Inject, { services: [Edit, Toolbar, Page, Resize, Sort, Filter] })] }) }) }));
-});
-DataGridComponent.displayName = 'DataGridComponent';

package/src/FormRenderer.d.ts

@@ -1,84 +0,0 @@
-/**
- * Form Renderer Component
- * Renders JSON-driven forms with React FormValidator
- */
-import React from 'react';
-import { type FormSchema, type ButtonClickEventArgs } from './types/FormSchema';
-import { type LayoutNode, type UIField, type DataField } from './json-converter';
-export interface DataSchema {
-    version: string;
-    properties: Record<string, DataField>;
-}
-export interface UISchema {
-    properties: Record<string, UIField>;
-    layout: LayoutNode[];
-}
-export interface ChangeEventArgs {
-    field: string;
-    value: any;
-}
-export interface SubmitEventArgs {
-    data: Record<string, any>;
-    isValid: boolean;
-}
-/**
- * Form layout options (only applies when UI schema is NOT provided)
- */
-export declare const FormLayout: {
-    readonly SingleColumn: "single";
-    readonly TwoColumn: "twocolumn";
-    readonly ThreeColumn: "threecolumn";
-    readonly FourColumn: "fourcolumn";
-};
-export type FormLayout = typeof FormLayout[keyof typeof FormLayout];
-export interface FormRendererProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSubmit' | 'onClick'> {
-    /**
-     * Data Schema - can be provided as:
-     * - JSON string (parsed with UniversalJsonParser)
-     * - FormSchema object (components converted to DataSchema)
-     * - DataSchema object (used directly)
-     */
-    schema?: DataSchema | string | FormSchema | any;
-    /**
-     * Specifies the locale/language for the form component.
-     * Supports locale-specific formatting and translations.
-     * @default 'en-US'
-     */
-    locale?: string;
-    /**
-     * Callback invoked when the form is submitted.
-     * Receives form data and validation status.
-     * @param args - Object containing form data and isValid flag
-     */
-    onSubmit?: (args: SubmitEventArgs) => void;
-    /**
-     * Callback invoked when any form field value changes.
-     * Fired on user input for tracked fields.
-     * @param args - Object containing changed field name and new value
-     */
-    onChange?: (args: ChangeEventArgs) => void;
-    /**
-     * Callback invoked when a button in the form is clicked.
-     * Applies to all button types (button, submit, splitButton).
-     * @param args - Object containing button click event details
-     */
-    onButtonClick?: (args: ButtonClickEventArgs) => void;
-    /**
-     * CSS class names to apply to the root form container element.
-     * Supports space-separated multiple classes.
-     */
-    className?: string;
-    /**
-     * Form layout configuration (only applies when UI schema is NOT provided).
-     * Determines how form fields are arranged in columns.
-     * @default FormLayout.SingleColumn
-     */
-    layout?: FormLayout;
-    /**
-     * Called when all form elements are rendered and ready for interaction.
-     * Useful for performing post-render initialization or setup.
-     */
-    created?: () => void;
-}
-export declare const FormRenderer: React.ForwardRefExoticComponent<FormRendererProps & React.RefAttributes<any>>;
-export default FormRenderer;