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

package/src/components/layout/Preview.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import '@syncfusion/ej2-form-renderer/styles/tailwind3.css';
-import type { FormSchema } from '../../types/FormSchema';
-import type { UnifiedSchema } from '../../../Common/json-converter';
-interface PreviewProps {
-    isOpen: boolean;
-    onClose: () => void;
-    schema?: UnifiedSchema;
-    formSchema: FormSchema;
-}
-export declare const Preview: React.FC<PreviewProps>;
-export default Preview;

package/src/components/layout/Preview.js

@@ -1,337 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useMemo, useEffect, useRef } from 'react';
-import { FormRendererComponent } from '@syncfusion/ej2-react-form-renderer';
-import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
-import '@syncfusion/ej2-form-renderer/styles/tailwind3.css';
-import { DialogComponent } from '@syncfusion/ej2-react-popups';
-import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Page, Sort, Filter } from '@syncfusion/ej2-react-grids';
-import { formBuilderMode } from '../../FormBuilder';
-import { getFormId } from '../../../Common/globalFormId';
-import { useLocalization } from '../../context/LocalizationContext';
-// Ignore list for components to exclude from grid columns
-const IGNORE_COMPONENT_TYPES = ['button', 'staticHtml', 'panel', 'table', 'tabs', 'card', 'splitButton', 'fileUpload', 'message'];
-const IGNORE_COMPONENT_NAMES = []; // Can be populated manually
-const getSubmissionsFromStorage = async (formName) => {
-    try {
-        const response = await fetch(/*getRecordsUrl*/ '' + `${formName}`);
-        return response.ok ? await response.json() : [];
-    }
-    catch (error) {
-        console.error('Error fetching submissions:', error);
-        return [];
-    }
-};
-const saveSubmissionToStorage = async (formName, submission) => {
-    try {
-        await fetch(/*submitUrl*/ '' + `${formName}`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(submission)
-        });
-    }
-    catch (error) {
-        console.error('Error saving submission:', error);
-    }
-};
-const clearSubmissionsFromStorage = async (formName) => {
-    try {
-        await fetch(/*submitUrl*/ '' + `${formName}`, { method: 'DELETE' });
-    }
-    catch (error) {
-        console.error('Error clearing submissions:', error);
-    }
-};
-const extractGridColumns = (formSchema) => {
-    const columns = [];
-    if (!formSchema?.components)
-        return columns;
-    const extractFromComponent = (component) => {
-        if (IGNORE_COMPONENT_TYPES.includes(component.type) || IGNORE_COMPONENT_NAMES.includes(component.name)) {
-            return;
-        }
-        if (component.label && component.type !== 'dataGrid') {
-            columns.push({
-                field: component.label,
-                headerText: component.label
-            });
-        }
-        else if (component.label && component.type === 'dataGrid') {
-            columns.push({
-                field: component.label,
-                headerText: `${component.label} (View)`
-            });
-        }
-        if (component.children && Array.isArray(component.children)) {
-            component.children.forEach((child) => {
-                if (Array.isArray(child)) {
-                    child.forEach((nestedChild) => extractFromComponent(nestedChild));
-                }
-                else {
-                    extractFromComponent(child);
-                }
-            });
-        }
-        if (component.tableCells && Array.isArray(component.tableCells)) {
-            component.tableCells.forEach((row) => {
-                if (Array.isArray(row)) {
-                    row.forEach((cell) => {
-                        if (Array.isArray(cell)) {
-                            cell.forEach((cellComponent) => extractFromComponent(cellComponent));
-                        }
-                        else {
-                            extractFromComponent(cell);
-                        }
-                    });
-                }
-            });
-        }
-        if (component.tabItems && Array.isArray(component.tabItems)) {
-            component.tabItems.forEach((tab) => {
-                if (tab.content && Array.isArray(tab.content)) {
-                    tab.content.forEach((tabComponent) => extractFromComponent(tabComponent));
-                }
-            });
-        }
-    };
-    formSchema.components.forEach(component => extractFromComponent(component));
-    return columns;
-};
-export const Preview = ({ isOpen, onClose, schema, formSchema }) => {
-    const [showSuccessScreen, setShowSuccessScreen] = useState(false);
-    const [formKey, setFormKey] = useState(0);
-    const [showDataDialog, setShowDataDialog] = useState(false);
-    const [storageRefresh, setStorageRefresh] = useState(0);
-    const gridColumns = useMemo(() => extractGridColumns(formSchema), [formSchema]);
-    const [gridData, setGridData] = useState([]);
-    const [expandedGridData, setExpandedGridData] = useState(null);
-    const [showExpandedDialog, setShowExpandedDialog] = useState(false);
-    const previewMainSectionRef = useRef(null);
-    const { locale } = useLocalization();
-    const dataGridFields = useMemo(() => {
-        const fields = new Set();
-        const traverse = (components) => {
-            components.forEach(comp => {
-                if (comp.type === 'dataGrid' && comp.label) {
-                    fields.add(comp.label);
-                }
-                if (comp.children)
-                    traverse(comp.children);
-                if (comp.tableCells)
-                    comp.tableCells.forEach((row) => row.forEach((cell) => traverse(cell)));
-                if (comp.tabItems)
-                    comp.tabItems.forEach((tab) => tab.content && traverse(tab.content));
-            });
-        };
-        traverse(formSchema?.components || []);
-        return fields;
-    }, [formSchema]);
-    useEffect(() => {
-        if (!isOpen || formBuilderMode !== 'component')
-            return;
-        const updatePreviewHeight = () => {
-            const container = document.getElementById('form-builder');
-            if (!container)
-                return;
-            const previewMainSection = previewMainSectionRef.current || container.querySelector('.preview-main-section');
-            if (!previewMainSection)
-                return;
-            const containerHeight = container.offsetHeight;
-            previewMainSection.style.height = `${containerHeight - 48}px`;
-        };
-        const rafId = requestAnimationFrame(updatePreviewHeight);
-        const resizeObserver = new ResizeObserver(updatePreviewHeight);
-        const container = document.getElementById('form-builder');
-        if (container) {
-            resizeObserver.observe(container);
-        }
-        window.addEventListener('resize', updatePreviewHeight);
-        return () => {
-            cancelAnimationFrame(rafId);
-            resizeObserver.disconnect();
-            window.removeEventListener('resize', updatePreviewHeight);
-        };
-    }, [isOpen, formSchema.components, formSchema.settings]);
-    if (!isOpen)
-        return null;
-    const handleSubmit = (args) => {
-        const formName = formSchema?.settings?.name || 'Untitled Form';
-        // Process auto number fields
-        const processedData = { ...args.data };
-        if (formBuilderMode === undefined) {
-            if (formSchema?.components) {
-                const processAutoNumberFields = (components) => {
-                    components.forEach((component) => {
-                        if (component.type === 'autoNumber') {
-                            // Get submissions count from form data storage to calculate next index
-                            const submissions = getSubmissionsFromStorage(formName);
-                            const lastIndex = parseInt((submissions[submissions.length - 1]?.[component.label]?.replace(component.prefix, '').replace(component.suffix, '')) || String(component.startIndex - 1 || -1), 10);
-                            const nextIndex = lastIndex + 1;
-                            const formattedValue = `${component.prefix || ''}${nextIndex}${component.suffix || ''}`;
-                            processedData[component.label] = formattedValue;
-                        }
-                        // Handle nested components (like panel children)
-                        if (component.children && Array.isArray(component.children)) {
-                            component.children.forEach((child) => {
-                                if (Array.isArray(child)) {
-                                    processAutoNumberFields(child);
-                                }
-                                else {
-                                    processAutoNumberFields([child]);
-                                }
-                            });
-                        }
-                        // Handle table cells
-                        if (component.tableCells && Array.isArray(component.tableCells)) {
-                            component.tableCells.forEach((row) => {
-                                if (Array.isArray(row)) {
-                                    row.forEach((cell) => {
-                                        if (Array.isArray(cell)) {
-                                            processAutoNumberFields(cell);
-                                        }
-                                        else {
-                                            processAutoNumberFields([cell]);
-                                        }
-                                    });
-                                }
-                            });
-                        }
-                        // Handle tab items
-                        if (component.tabItems && Array.isArray(component.tabItems)) {
-                            component.tabItems.forEach((tab) => {
-                                if (tab.content && Array.isArray(tab.content)) {
-                                    processAutoNumberFields(tab.content);
-                                }
-                            });
-                        }
-                    });
-                };
-                processAutoNumberFields(formSchema.components);
-            }
-            const currentFormId = getFormId();
-            const storageKey = (currentFormId && String(currentFormId).trim()) ? currentFormId : formName;
-            saveSubmissionToStorage(storageKey, processedData);
-            setStorageRefresh(prev => prev + 1);
-            setShowSuccessScreen(true);
-        }
-    };
-    const handleAddAnotherResponse = () => {
-        setShowSuccessScreen(false);
-        setFormKey(prev => prev + 1);
-    };
-    const handleClearData = () => {
-        const formName = formSchema?.settings?.name || 'Untitled Form';
-        clearSubmissionsFromStorage(formName);
-        setStorageRefresh(prev => prev + 1);
-    };
-    return (_jsxs(_Fragment, { children: [_jsxs("main", { role: "dialog", "aria-modal": "true", className: "preview-main-section", style: { position: 'absolute', top: '48px', left: 0, width: '100%' }, children: [_jsxs("div", { className: "main-header", children: [_jsx("div", { className: "left-section", children: formSchema?.settings?.name || 'Untitled Form' }), _jsx("div", { className: "center-section" }), _jsx("div", { className: "right-section", children: _jsx(ButtonComponent, { onClick: onClose, cssClass: "action-btn e-flat", children: "Close Preview" }) })] }), _jsx("div", { className: "preview-main-content", style: { width: "100%", position: "relative", zIndex: 9999, marginTop: "48px" }, children: !showSuccessScreen ? (_jsx("div", { className: `form-preview-area`, ref: previewMainSectionRef, children: (schema) &&
-                                _jsx(FormRendererComponent, { locale: locale, style: { maxWidth: formSchema.settings?.width || 'var(--form-width)' }, schema: schema, className: "preview-form", submit: handleSubmit }, formKey) })) : (_jsx("div", { style: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                minHeight: 'calc(100vh - 100px)',
-                                position: 'relative',
-                                zIndex: 99999,
-                                background: "var(--preview-area-color)",
-                                padding: '40px 20px'
-                            }, children: _jsxs("div", { className: "e-card", style: {
-                                    textAlign: 'center',
-                                    maxWidth: '500px',
-                                    borderRadius: '12px',
-                                    padding: '60px 40px',
-                                    boxShadow: '0 10px 40px rgba(0, 0, 0, 0.08)',
-                                    animation: 'fadeIn 0.5s ease-in'
-                                }, children: [_jsx("div", { style: {
-                                            width: '80px',
-                                            height: '80px',
-                                            background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
-                                            borderRadius: '50%',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            margin: '0 auto 30px',
-                                            animation: 'scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)'
-                                        }, children: _jsx("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M13.8333 23.3333L19.25 28.75L30.1667 15.25", stroke: "white", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("h1", { style: {
-                                            fontSize: '28px',
-                                            fontWeight: '600',
-                                            color: 'var(--dashboard-heading-color)',
-                                            margin: '0 0 12px 0',
-                                            lineHeight: '1.4'
-                                        }, children: "Thank You!" }), _jsx("p", { style: {
-                                            fontSize: '16px',
-                                            color: '#64748b',
-                                            margin: '0 0 40px 0',
-                                            lineHeight: '1.6'
-                                        }, children: "Your response has been submitted successfully." }), _jsxs("div", { style: {
-                                            display: 'flex',
-                                            gap: '12px',
-                                            flexDirection: 'column'
-                                        }, children: [_jsx(ButtonComponent, { onClick: handleAddAnotherResponse, cssClass: "e-primary", style: {
-                                                    background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
-                                                    border: 'none',
-                                                    height: '44px',
-                                                    fontSize: '15px',
-                                                    fontWeight: '500',
-                                                    borderRadius: '8px',
-                                                    cursor: 'pointer',
-                                                    transition: 'all 0.3s ease',
-                                                    boxShadow: '0 4px 15px rgba(99, 102, 241, 0.3)'
-                                                }, children: "\uFF0B Add Another Response" }), _jsx(ButtonComponent, { onClick: () => {
-                                                    const fetchData = async () => {
-                                                        const currentFormId = getFormId()?.toString();
-                                                        const data = await getSubmissionsFromStorage(currentFormId);
-                                                        setGridData(data);
-                                                    };
-                                                    fetchData();
-                                                    setShowDataDialog(true);
-                                                }, cssClass: "e-outline", style: {
-                                                    height: '44px',
-                                                    fontSize: '15px',
-                                                    fontWeight: '500',
-                                                    borderRadius: '8px',
-                                                    cursor: 'pointer',
-                                                }, children: "View Submitted Data" }), _jsx(ButtonComponent, { onClick: onClose, cssClass: "e-outline", style: {
-                                                    height: '44px',
-                                                    fontSize: '15px',
-                                                    fontWeight: '500',
-                                                    borderRadius: '8px',
-                                                    cursor: 'pointer',
-                                                }, children: "Close Preview" })] })] }) })) })] }), _jsx(DialogComponent, { header: "Submitted Data", isModal: false, width: "100%", height: "calc(100dvh - 48px)", position: { X: 0, Y: 48 }, visible: showDataDialog, close: () => setShowDataDialog(false), showCloseIcon: true, footerTemplate: () => (_jsx("div", { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end' }, children: _jsx(ButtonComponent, { onClick: handleClearData, cssClass: "e-danger", children: "Clear All Data" }) })), children: _jsx("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: _jsxs(GridComponent, { dataSource: gridData, allowPaging: true, pageSettings: { pageSize: 10 }, allowSorting: true, allowFiltering: true, children: [_jsx(ColumnsDirective, { children: gridColumns.map((column, index) => (_jsx(ColumnDirective, { field: column.field, headerText: column.headerText, isPrimaryKey: index === 0, template: (props) => {
-                                        const value = props[column.field];
-                                        if (dataGridFields.has(column.field) && Array.isArray(value)) {
-                                            return (_jsxs(ButtonComponent, { cssClass: "e-outline e-small", onClick: () => {
-                                                    setExpandedGridData(value);
-                                                    setShowExpandedDialog(true);
-                                                }, children: ["View (", value.length, ")"] }));
-                                        }
-                                        if (typeof value === 'boolean') {
-                                            return value ? 'true' : 'false';
-                                        }
-                                        if (typeof value === 'object' && value !== null) {
-                                            return JSON.stringify(value);
-                                        }
-                                        return value ?? '';
-                                    } }, index))) }), _jsx(Inject, { services: [Page, Sort, Filter] })] }) }) }), _jsx(DialogComponent, { isModal: true, width: "90%", height: "80%", visible: showExpandedDialog, close: () => setShowExpandedDialog(false), showCloseIcon: true, children: _jsxs(GridComponent, { dataSource: expandedGridData || [], allowPaging: true, pageSettings: { pageSize: 10 }, allowSorting: true, allowFiltering: true, children: [_jsx(ColumnsDirective, { children: expandedGridData && expandedGridData.length > 0 && Object.keys(expandedGridData[0]).map((key, index) => (_jsx(ColumnDirective, { field: key, headerText: key }, index))) }), _jsx(Inject, { services: [Page, Sort, Filter] })] }) }), _jsx("style", { children: `
-        @keyframes fadeIn {
-          from {
-            opacity: 0;
-            transform: translateY(10px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-
-        @keyframes scaleIn {
-          from {
-            transform: scale(0.3);
-            opacity: 0;
-          }
-          to {
-            transform: scale(1);
-            opacity: 1;
-          }
-        }
-      ` })] }));
-};
-export default Preview;

package/src/components/layout/RightPane.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import type { PropertyValues, ComponentDefinition } from '../../types/ComponentProperties';
-import type { FormSettings } from '../../types/FormSchema';
-import { type PropertyChangedEventArgs } from '../../FormBuilder';
-interface RightPaneProps {
-    mode: 'component' | 'formSettings';
-    componentType: string;
-    configData: Record<string, ComponentDefinition>;
-    formSettingsConfig?: any;
-    existingValues?: PropertyValues;
-    formSettings?: FormSettings;
-    onSave: (values: PropertyValues | FormSettings, key?: string) => void;
-    onPropertyChanged?: (args: PropertyChangedEventArgs) => void;
-    onClose: () => void;
-    builderMode?: 'Simple' | 'Developer';
-}
-/**
- * RightPane Component
- */
-export declare const RightPane: React.FC<RightPaneProps>;
-declare const _default: React.NamedExoticComponent<RightPaneProps>;
-export default _default;