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

package/src/FormRenderer.js

@@ -13,7 +13,8 @@ import { UniversalJsonParser } from './parser';
 import { TooltipComponent } from '@syncfusion/ej2-react-popups';
 import { VALIDATION_REGEX } from './FormValidator';
 import StaticHtmlRenderer from './StaticHtmlRenderer';
-import { splitWidths } from './utils';
+import { formatDateValues, splitWidths } from './utils';
+import { ConditionalRuleEngine } from './ConditionalRuleEngine';
 enableRipple(true);
 /**
  * Form layout options (only applies when UI schema is NOT provided)
@@ -109,7 +110,7 @@ function parseStringToUISchema(input) {
     }
 }
 // ForwardRef to expose public methods
-export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit, onChange, onButtonClick, className = '', layout = FormLayout.SingleColumn, created, ...restProps }, ref) => {
+export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, locale, onSubmit, onChange, onButtonClick, className = '', layout = FormLayout.SingleColumn, created, ...restProps }, ref) => {
     const processedSchema = React.useMemo(() => {
         try {
             // Parse and normalize data schema
@@ -158,19 +159,22 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
             }
             // Scenario 4: Neither provided - return empty form
             console.warn('FormRenderer: No schema provided (dataSchema or uiSchema)');
-            return { version: '1.0.0-beta', theme: 'tailwind3', components: [] };
+            return { version: '0.1.0', theme: 'tailwind3', components: [] };
         }
         catch (error) {
             console.error('FormRenderer schema processing error:', error);
-            return { version: '1.0.0-beta', theme: 'tailwind3', components: [] };
+            return { version: '0.1.0', theme: 'tailwind3', components: [] };
         }
     }, [dataSchema, uiSchema]);
     const [formState, setFormState] = useState(undefined);
     const isInitializedRef = useRef(false);
+    const formLocale = locale || 'en-US';
     // Attach ref to the input element for getComponent
     let setInputRef;
     // Store input component refs by name/id
     const inputRefs = useRef({});
+    // Track which fields have active conditional values applied (to prevent re-applying while condition stays true)
+    const conditionalValueAppliedRef = useRef({});
     // Check if UI schema has layout components (table, tabs, or panel)
     const hasLayoutComponents = React.useMemo(() => {
         if (!processedSchema.components)
@@ -256,7 +260,7 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
         const map = {};
         const traverse = (comps) => {
             comps.forEach(comp => {
-                if (comp.label && !['panel', 'table', 'tabs', 'card', 'button', 'message', 'splitbutton'].includes(comp.type)) {
+                if (comp.label && !['panel', 'table', 'tabs', 'card', 'button', 'message', 'splitButton'].includes(comp.type)) {
                     map[comp.id] = comp.label;
                 }
                 if (comp.children)
@@ -282,20 +286,27 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
      */
     const buildValidationRules = useCallback(() => {
         const rules = {};
+        const formValues = formState?.values || {};
         const collectRules = (components) => {
             components.forEach((component) => {
                 if (component) {
                     const componentRules = {};
-                    if (component.required && !component.disabled && !component.readOnly) {
+                    const conditionalRequired = ConditionalRuleEngine.isFieldRequired(component.conditions, formValues);
+                    const conditionalDisabled = ConditionalRuleEngine.isFieldDisabled(component.conditions, formValues);
+                    const conditionalReadOnly = ConditionalRuleEngine.isFieldReadOnly(component.conditions, formValues);
+                    const finalRequired = component.required || conditionalRequired;
+                    const finalDisabled = component.disabled || conditionalDisabled;
+                    const finalReadOnly = component.readOnly || conditionalReadOnly;
+                    if (finalRequired && !finalDisabled && !finalReadOnly) {
                         componentRules.required = [true, component.validationMessage || `${component.label} is required`];
                     }
-                    if (component.minLength && !component.disabled && !component.readOnly) {
+                    if (component.minLength && !finalDisabled && !finalReadOnly) {
                         componentRules.minLength = [component.minLength, `Minimum ${component.minLength} characters required`];
                     }
-                    if (component.maxLength && !component.disabled && !component.readOnly) {
+                    if (component.maxLength && !finalDisabled && !finalReadOnly) {
                         componentRules.maxLength = [component.maxLength, `Maximum ${component.maxLength} characters allowed`];
                     }
-                    if (component?.type === 'textbox' && component?.textboxType && !component?.regex && !componentRules.regex && !component.disabled && !component.readOnly) {
+                    if (component?.type === 'textbox' && component?.textboxType && !component?.regex && !componentRules.regex && !finalDisabled && !finalReadOnly) {
                         if (component.textboxType === 'email') {
                             componentRules.regex = [VALIDATION_REGEX['EMAIL'], component?.validationMessage || 'Invalid format'];
                         }
@@ -303,7 +314,7 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
                             componentRules.regex = [VALIDATION_REGEX['URL'], component?.validationMessage || 'Invalid format'];
                         }
                     }
-                    if (component.regex && !component.disabled && !component.readOnly) {
+                    if (component.regex && !finalDisabled && !finalReadOnly) {
                         componentRules.regex = [component.regex, component.validationMessage || 'Invalid format'];
                     }
                     if (Object.keys(componentRules).length > 0) {
@@ -329,7 +340,7 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
         };
         collectRules(processedSchema.components);
         return rules;
-    }, [processedSchema]);
+    }, [processedSchema, formState?.values]);
     const validationRules = buildValidationRules();
     /**
      * Build initial form values from component defaultValues
@@ -339,14 +350,23 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
         const allComponents = collectAllComponents(processedSchema.components);
         const componentIds = new Set();
         allComponents.forEach(comp => {
-            // Do NOT store datagrid data inside the form state; grids manage their own internal data.
-            if (comp.type === 'datagrid' || comp.type === 'richtexteditor') {
+            // Do NOT store dataGrid data inside the form state; grids manage their own internal data.
+            if (comp.type === 'dataGrid' || comp.type === 'richTextEditor') {
                 componentIds.add(comp.id);
                 return;
             }
             if (comp.defaultValue !== undefined) {
                 values[comp.id] = comp.defaultValue;
             }
+            else {
+                // Initialize with type-appropriate defaults
+                switch (comp.type) {
+                    case 'checkbox':
+                    case 'switch':
+                        values[comp.id] = false;
+                        break;
+                }
+            }
             componentIds.add(comp.id);
         });
         if (formState) {
@@ -374,17 +394,22 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
      * Render a single field with label and error
      */
     const renderField = (component) => {
-        // Skip invisible components
-        if (component.visible === false)
-            return null;
+        const formValues = formState?.values || {};
         // Skip layout and button components (handled separately)
-        if (['panel', 'table', 'tabs', 'card', 'message', 'button', 'splitbutton', 'statichtml'].includes(component.type)) {
+        if (['panel', 'table', 'tabs', 'card', 'message', 'button', 'splitButton', 'staticHtml'].includes(component.type)) {
             return null;
         }
+        const conditionalReadOnly = ConditionalRuleEngine.isFieldReadOnly(component.conditions, formValues);
+        const conditionalDisabled = ConditionalRuleEngine.isFieldDisabled(component.conditions, formValues);
+        const conditionalRequired = ConditionalRuleEngine.isFieldRequired(component.conditions, formValues);
+        const conditionalValue = ConditionalRuleEngine.getConditionalValue(component.conditions, formValues);
+        const computedReadOnly = component.readOnly || conditionalReadOnly;
+        const computedDisabled = component.disabled || conditionalDisabled;
+        const computedRequired = component.required || conditionalRequired;
         const labelPos = component.labelPosition || 'top';
         const labelWidth = component.labelWidth || 'auto';
-        const showLabel = !component.hideLabel && component.label && !['checkbox', 'button', 'statichtml'].includes(component.type);
-        if ((component.type === 'radio' || component.type === 'checkboxgroup') && Array.isArray(component.options)) {
+        const showLabel = !component.hideLabel && component.label && !['checkbox', 'button', 'staticHtml'].includes(component.type);
+        if ((component.type === 'radio' || component.type === 'checkboxGroup') && Array.isArray(component.options)) {
             // For radio, store each option's ref with unique key
             setInputRef = (el, idx) => {
                 if (el && typeof idx === 'number') {
@@ -399,16 +424,32 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
                 }
             };
         }
-        const hasError = !!formState?.errors[component.id];
-        return (_jsx(FormField, { name: component.id, children: _jsx("div", { className: "form-group", children: _jsxs("div", { className: `field-wrapper label-${labelPos.toLowerCase()}`, children: [showLabel && (_jsxs("label", { className: "field-label", htmlFor: component.id, style: { width: labelPos.toLowerCase() === 'left' ? `${labelWidth}%` : 'auto' }, children: [_jsx("span", { children: component.label }), component?.required && _jsx("span", { className: "required-asterisk", children: "*" }), component.tooltip && (_jsx(TooltipComponent, { content: component.tooltip, children: _jsx("span", { className: "e-msg-icon", style: {
+        const shouldShowError = !!formState?.errors[component.id];
+        const isRequiredError = shouldShowError && formState?.errors[component.id].includes('required');
+        const hasError = shouldShowError && !(isRequiredError && !computedRequired);
+        // Apply conditional value only when condition transitions from false to true (start of new cycle)
+        const conditionIsActive = conditionalValue !== undefined;
+        const wasConditionActive = conditionalValueAppliedRef.current[component.id] || false;
+        if (formState) {
+            if (conditionIsActive && !wasConditionActive) {
+                formState.onChange(component.id, { value: conditionalValue });
+                conditionalValueAppliedRef.current[component.id] = true;
+            }
+            else if (!conditionIsActive && wasConditionActive) {
+                // Condition just became inactive - clear tracking (ready for next cycle)
+                conditionalValueAppliedRef.current[component.id] = false;
+            }
+            // If condition stays active (wasConditionActive && conditionIsActive), do nothing - let user edit
+        }
+        return (_jsx(FormField, { name: component.id, children: _jsx("div", { className: "form-group", children: _jsxs("div", { className: `field-wrapper label-${labelPos.toLowerCase()}`, children: [showLabel && (_jsxs("label", { className: "field-label", htmlFor: component.id, style: { width: labelPos.toLowerCase() === 'left' ? `${labelWidth}%` : 'auto' }, children: [_jsx("span", { children: component.label }), computedRequired && _jsx("span", { className: "required-asterisk", children: "*" }), component.tooltip && (_jsx(TooltipComponent, { content: component.tooltip, children: _jsx("span", { className: "e-msg-icon", style: {
                                             cursor: 'pointer',
                                             display: 'flex',
                                             alignItems: 'center',
                                             justifyContent: 'center',
                                             flexShrink: 0,
-                                        } }) }))] })), _jsxs("div", { className: "field-input", children: [(component.type === 'radio' || component.type === 'checkboxgroup') && Array.isArray(component.options)
+                                        } }) }))] })), _jsxs("div", { className: "field-input", children: [(component.type === 'radio' || component.type === 'checkboxGroup') && Array.isArray(component.options)
                                     ? renderFormField({
-                                        component,
+                                        component: { ...component, readOnly: computedReadOnly, disabled: computedDisabled, required: computedRequired },
                                         value: formState?.values[component.id],
                                         onChange: (value) => {
                                             formState?.onChange(component.id, { value });
@@ -416,34 +457,45 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
                                                 onChange({ field: component.label || component.id, value });
                                             }
                                         },
+                                        locale: formLocale,
                                         onBlur: () => formState?.onBlur(component.id),
                                         ref: (el, idx) => setInputRef(el, idx),
                                         hasError,
                                     })
                                     : renderFormField({
-                                        component,
+                                        component: { ...component, readOnly: computedReadOnly, disabled: computedDisabled, required: computedRequired },
                                         value: formState?.values[component.id],
                                         onChange: (value) => {
-                                            if (component.type !== 'datagrid' && component.type !== 'signature' && component.type !== 'richtexteditor') {
+                                            if (component.type !== 'dataGrid' && component.type !== 'signature' && component.type !== 'richTextEditor') {
+                                                value = formatDateValues(component, value);
                                                 formState?.onChange(component.id, { value });
                                                 if (onChange) {
                                                     onChange({ field: component.label || component.id, value });
                                                 }
                                             }
                                         },
-                                        onBlur: () => { if (component.type !== 'datagrid' && component.type !== 'richtexteditor')
+                                        locale: formLocale,
+                                        onBlur: () => { if (component.type !== 'dataGrid' && component.type !== 'richTextEditor')
                                             formState?.onBlur(component.id); },
                                         ref: setInputRef,
                                         hasError,
-                                    }), formState?.errors[component.id] && _jsx("div", { className: "e-error", children: formState.errors[component.id] })] })] }) }) }, component.id));
+                                    }), hasError && _jsx("div", { className: "e-error", children: formState.errors[component.id] })] }), component.description && _jsx("div", { className: 'field-description', children: component.description })] }) }) }, component.id));
     };
     /**
      * Render component (including layouts)
      */
     const renderComponent = (component) => {
-        // Skip invisible components
-        if (component.visible === false)
+        const formValues = formState?.values || {};
+        const isVisible = component.visible === false
+            ? false
+            : ConditionalRuleEngine.isFieldVisible(component.conditions, formValues);
+        const isHidden = ConditionalRuleEngine.isFieldHidden(component.conditions, formValues);
+        if (!isVisible || isHidden) {
+            if (formState && formState.values[component.id] !== undefined && formState.values[component.id] !== null) {
+                formState.onChange(component.id, { value: null });
+            }
             return null;
+        }
         switch (component.type) {
             case 'panel':
                 return (_jsxs("fieldset", { className: `form-panel-renderer ${component.cssClass}`, children: [(component.label && !component.hideLabel) && _jsx("legend", { className: `${!component.hideBorders ? 'panel-legend' : ''}`, children: component.label }), _jsx("div", { className: "panel-content", children: component.children?.map(child => renderComponent(child)) })] }, component.id));
@@ -453,13 +505,15 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
                 const defaultColSpan = Math.floor(12 / tableCols);
                 const columnWidthsProp = component.columnWidths;
                 const splittedWidths = columnWidthsProp ? splitWidths(columnWidthsProp.widths) : [];
-                return (_jsx("div", { className: `form-table-renderer ${component.hideBorders ? '' : 'table-border'} ${component.cssClass}`, children: Array.from({ length: tableRows }).map((_, rowIndex) => (_jsx("div", { className: "table-row", children: Array.from({ length: tableCols }).map((_, colIndex) => {
+                return (_jsx("div", { className: `form-table-renderer ${component.hideBorders ? '' : 'table-border'} ${component.cssClass}`, children: Array.from({ length: tableRows }).map((_, rowIndex) => (_jsx("div", { className: "e-form-table-row", style: component.hideBorders ? { display: 'flex', gap: '1.5rem' } : {}, children: Array.from({ length: tableCols }).map((_, colIndex) => {
                             const cellComponents = component.tableCells?.[rowIndex]?.[colIndex] || [];
                             const cellSpan = defaultColSpan;
                             const colWidthValue = splittedWidths[colIndex];
-                            const cellStyle = colWidthValue ? { width: `${colWidthValue}%` } : {};
+                            const isSingleColumn = tableCols === 1;
+                            const cellStyle = isSingleColumn ? { width: '100%' } : (colWidthValue ? { width: `${colWidthValue}%` } : {});
                             const allNullWidths = !columnWidthsProp || (Array.isArray(columnWidthsProp.widths) && columnWidthsProp.widths.every((w) => w === null));
-                            return (_jsx("div", { className: `table-cell ${colWidthValue ? '' : allNullWidths ? `col-${cellSpan}` : ''}`, style: cellStyle, children: cellComponents.map(comp => renderComponent(comp)) }, `cell-${rowIndex}-${colIndex}`));
+                            const isFirstRow = rowIndex === 0;
+                            return (_jsx("div", { className: `e-form-table-cell ${colWidthValue ? '' : allNullWidths ? `col-${cellSpan}` : ''}`, style: component.hideBorders ? { ...cellStyle, padding: isFirstRow ? '0' : '12px 0 0 0' } : cellStyle, children: cellComponents.map(comp => renderComponent(comp)) }, `cell-${rowIndex}-${colIndex}`));
                         }) }, `row-${rowIndex}`))) }, component.id));
             case 'tabs':
                 return (_jsx("div", { className: `form-tabs-renderer ${component.cssClass || ''}`, children: _jsx(CustomTabComponent, { tabs: component.tabItems?.map(tab => ({
@@ -468,15 +522,18 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
                         })) || [], className: component.cssClass }) }, component.id));
             case 'card':
                 return (_jsxs("fieldset", { className: `e-card form-card-renderer ${component.cssClass}`, style: { padding: 0 }, children: [_jsx("div", { className: "e-card-header", children: _jsxs("div", { className: "e-card-header-caption", children: [_jsx("div", { className: "e-card-title", children: component.cardTitle || component.label || 'Card Title' }), component.cardSubtitle && (_jsx("div", { className: "e-card-sub-title", children: component.cardSubtitle }))] }) }), _jsx("div", { className: "e-card-content card-content", children: component.children?.map(child => renderComponent(child)) })] }, component.id));
-            case 'statichtml':
+            case 'staticHtml':
                 return (_jsx(StaticHtmlRenderer, { id: component.id, content: component.defaultValue || '<p>HTML content</p>', enableHtmlSanitizer: component.enableHtmlSanitizer }, component.id));
             case 'message':
                 return (_jsx("div", { className: "form-group", children: renderFormField({
                         component,
+                        locale: formLocale,
                         value: undefined,
                         onChange: () => { },
                     }) }, component.id));
             case 'button':
+                const buttonlDisabled = ConditionalRuleEngine.isFieldDisabled(component.conditions, formValues);
+                const buttonComputed = component.disabled || buttonlDisabled;
                 const handleButtonClick = (event) => {
                     if (onButtonClick) {
                         onButtonClick({
@@ -486,9 +543,10 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
                     }
                 };
                 return (_jsx("div", { className: "form-group", children: renderFormField({
-                        component,
+                        component: { ...component, disabled: buttonComputed },
                         value: undefined,
                         onChange: () => { },
+                        locale: formLocale,
                         onClick: (e) => { handleButtonClick(e); },
                         ref: (el, idx) => {
                             if (idx !== undefined) {
@@ -499,7 +557,9 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
                             }
                         }
                     }) }, component.id));
-            case 'splitbutton':
+            case 'splitButton':
+                const splitButtonDisabled = ConditionalRuleEngine.isFieldDisabled(component.conditions, formValues);
+                const computedDisabled = component.disabled || splitButtonDisabled;
                 setInputRef = (el) => {
                     if (el) {
                         inputRefs.current[component.id] = el;
@@ -515,8 +575,9 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
                     }
                 };
                 return (_jsx("div", { className: "form-group", children: renderFormField({
-                        component,
+                        component: { ...component, disabled: computedDisabled },
                         value: undefined,
+                        locale: formLocale,
                         onChange: () => { },
                         onClick: (e) => { handleSplitButtonEvent(e); },
                         ref: setInputRef
@@ -546,15 +607,36 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
         },
     }), []);
     return (_jsx("div", { ...restProps, className: `form-renderer-container ${className}`, children: _jsx(Form, { rules: validationRules, initialValues: initialValues, onFormStateChange: (state) => setFormState(state), onSubmit: (data) => {
-                const isValid = formState?.errors ? Object.keys(formState.errors).length === 0 : false;
+                const isValid = (formState?.errors ? Object.keys(formState.errors).length === 0 : false);
                 const transformedData = {};
+                const formValues = formState?.values || {};
                 // Exclude non-data components (buttons, messages, and layout-only components)
-                const excludedTypes = new Set(['button', 'message', 'panel', 'table', 'tabs', 'card', 'splitbutton', 'statichtml']);
+                const excludedTypes = new Set(['button', 'message', 'panel', 'table', 'tabs']);
                 const allComps = collectAllComponents(processedSchema.components || []);
                 const excludedIds = new Set(allComps.filter(c => excludedTypes.has(c.type)).map(c => c.id));
+                const hiddenFieldIds = new Set(allComps.filter(c => {
+                    if (c.visible === false)
+                        return true;
+                    if (c.conditions?.visibleWhen) {
+                        if (!ConditionalRuleEngine.isFieldVisible(c.conditions, formValues))
+                            return true;
+                    }
+                    if (c.conditions?.hideWhen) {
+                        if (ConditionalRuleEngine.isFieldHidden(c.conditions, formValues))
+                            return true;
+                    }
+                    return false;
+                }).map(c => c.id));
+                const disabledFieldIds = new Set(allComps.filter(c => {
+                    if (c.disabled)
+                        return true;
+                    if (c.conditions?.disabledWhen) {
+                        return ConditionalRuleEngine.isFieldDisabled(c.conditions, formValues);
+                    }
+                    return false;
+                }).map(c => c.id));
                 Object.entries(data).forEach(([id, val]) => {
-                    // Skip excluded components so they don't appear as submitted values
-                    if (excludedIds.has(id))
+                    if (excludedIds.has(id) || hiddenFieldIds.has(id) || disabledFieldIds.has(id))
                         return;
                     const label = idToLabel[id] || id;
                     transformedData[label] = val;

package/src/json-converter.d.ts

@@ -1,5 +1,6 @@
 import type { FormSchema, FormComponent } from '../FormBuilder/types/FormSchema';
 export declare const generateId: (type: string) => string;
+export declare const generateName: (type: string) => string;
 export interface SplitSchema {
     dataSchema: DataSchema;
     uiSchema: UISchema;
@@ -11,6 +12,7 @@ export interface DataSchema {
 export interface DataField {
     id: string;
     type: 'string' | 'number' | 'boolean' | 'array' | 'any' | 'button' | 'message' | 'sign' | 'image' | 'file' | 'color' | 'grid';
+    name: string;
     label?: string;
     format?: 'date' | 'date-time' | 'time' | 'email' | 'url';
     defaultValue?: any;
@@ -46,6 +48,7 @@ export interface FieldNode {
 export interface TableNode {
     type: 'table';
     id: string;
+    name: string;
     label?: string;
     cssClass?: string;
     hideBorders?: boolean;
@@ -55,6 +58,7 @@ export interface TableNode {
     columnWidths?: {
         widths: (number | null)[];
     };
+    conditions?: any;
 }
 export interface TableCell {
     row: number;
@@ -64,19 +68,23 @@ export interface TableCell {
 export interface PanelNode {
     type: 'panel';
     id: string;
+    name: string;
     label?: string;
     cssClass?: string;
     hideBorders?: boolean;
     hideLabel?: boolean;
     children: LayoutNode[];
+    conditions?: any;
 }
 export interface TabsNode {
     type: 'tabs';
     id: string;
+    name: string;
     cssClass?: string;
     label?: string;
     tabOptions?: string[];
     tabs: TabItem[];
+    conditions?: any;
 }
 export interface TabItem {
     header: string;
@@ -85,6 +93,7 @@ export interface TabItem {
 export interface CardNode {
     type: 'card';
     id: string;
+    name: string;
     label?: string;
     cssClass?: string;
     hideLabel?: boolean;
@@ -94,6 +103,7 @@ export interface CardNode {
     actionButtonLabel?: string;
     actionButtonType?: 'button' | 'submit';
     children: LayoutNode[];
+    conditions?: any;
 }
 /**
  * Convert label to camelCase identifier