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

package/src/utils.js

@@ -1,3 +1,8 @@
+import React from "react";
+import { Internationalization } from '@syncfusion/ej2-base';
+import { DataManager, Query, UrlAdaptor, WebApiAdaptor, ODataV4Adaptor } from '@syncfusion/ej2-data';
+import { ConditionalRuleEngine } from "./ConditionalRuleEngine";
+import { UI_TYPE_TO_SEMANTIC_TYPE } from './json-converter';
 /**
  * Maps button style to Syncfusion CSS classes
  * @param style - Button style ('primary' | 'flat' | 'information' | 'error' | 'success' | 'warning')
@@ -58,3 +63,346 @@ export function splitWidths(input) {
     // Convert any NaN (shouldn't remain) to 0 and round knowns
     return result.map(v => (isNaN(v) ? 0 : Math.round(v)));
 }
+export function extractAllDescendantIds(component) {
+    const childIds = [];
+    function traverse(comps) {
+        for (const comp of comps) {
+            childIds.push(comp.id);
+            // Recursively traverse nested structures
+            if (comp.children && Array.isArray(comp.children)) {
+                traverse(comp.children);
+            }
+            // Handle table cells
+            if (comp.tableCells && Array.isArray(comp.tableCells)) {
+                comp.tableCells.forEach((row) => {
+                    if (Array.isArray(row)) {
+                        row.forEach((cell) => {
+                            if (Array.isArray(cell)) {
+                                traverse(cell);
+                            }
+                        });
+                    }
+                });
+            }
+            // Handle tab items
+            if (comp.tabItems && Array.isArray(comp.tabItems)) {
+                comp.tabItems.forEach((tabItem) => {
+                    if (tabItem.content && Array.isArray(tabItem.content)) {
+                        traverse(tabItem.content);
+                    }
+                });
+            }
+        }
+    }
+    // Start with direct children
+    if (component.children && Array.isArray(component.children)) {
+        traverse(component.children);
+    }
+    // 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)) {
+                        traverse(cell);
+                    }
+                });
+            }
+        });
+    }
+    // Handle tab items
+    if (component.tabItems && Array.isArray(component.tabItems)) {
+        component.tabItems.forEach((tabItem) => {
+            if (tabItem.content && Array.isArray(tabItem.content)) {
+                traverse(tabItem.content);
+            }
+        });
+    }
+    return childIds;
+}
+export function formatDateValues(component, value) {
+    let intl = new Internationalization();
+    let dFormatter = intl.getDateFormat({
+        format: 'MM/dd/yyyy',
+        type: 'date'
+    });
+    if (component.type === 'date') {
+        value = dFormatter(new Date(value));
+    }
+    if (component.type === 'time') {
+        dFormatter = intl.getDateFormat({
+            format: 'hh:mm a',
+            type: 'time'
+        });
+        value = dFormatter(new Date(value));
+    }
+    if (component.type === 'dateTime') {
+        dFormatter = intl.getDateFormat({
+            format: 'MM/dd/yyyy hh:mm a',
+            type: 'dateTime'
+        });
+        value = dFormatter(new Date(value));
+    }
+    if (component.type === 'dateRange' && Array.isArray(value)) {
+        value = value.map(date => date ? dFormatter(new Date(date)) : null);
+    }
+    return value;
+}
+export const getComponentFromSchema = (id, formSchema) => {
+    if (!id || !formSchema)
+        return null;
+    const findInComponents = (components) => {
+        for (const comp of components) {
+            if (comp.id === id || comp.name === id)
+                return comp;
+            if (comp.children) {
+                const found = findInComponents(comp.children);
+                if (found)
+                    return found;
+            }
+            if (comp.tableCells) {
+                for (const row of comp.tableCells) {
+                    for (const cell of row) {
+                        const found = findInComponents(cell);
+                        if (found)
+                            return found;
+                    }
+                }
+            }
+            if (comp.tabItems) {
+                for (const tab of comp.tabItems) {
+                    if (tab.content) {
+                        const found = findInComponents(tab.content);
+                        if (found)
+                            return found;
+                    }
+                }
+            }
+        }
+        return null;
+    };
+    return findInComponents(formSchema.components || []);
+};
+/**
+ * Helper function to get the appropriate adaptor instance
+ * @param adaptorType - Type of adaptor ('WebApiAdaptor' | 'UrlAdaptor' | 'ODataV4Adaptor')
+ * @returns Adaptor instance
+ */
+export const getAdaptorInstance = (adaptorType) => {
+    switch (adaptorType) {
+        case 'WebApiAdaptor':
+            return new WebApiAdaptor();
+        case 'ODataV4Adaptor':
+            return new ODataV4Adaptor();
+        case 'UrlAdaptor':
+        default:
+            return new UrlAdaptor();
+    }
+};
+/**
+ * Extracts data from a nested path using dot notation and array indices
+ * @param data - The data object or array
+ * @param path - Path to the data (e.g., 'results.items', '[0].data', 'response[0].values')
+ * @returns Extracted data or empty array
+ */
+export const extractDataFromPath = (data, path) => {
+    if (!path || data === null || data === undefined)
+        return data;
+    // Split by dots but preserve array indices
+    const parts = path.split(/\.(?![^\[]*\])/); // Split by dots not inside brackets
+    let current = data;
+    for (const part of parts) {
+        if (current === null || current === undefined) {
+            return null;
+        }
+        // Handle array index notation like [0] or results[0]
+        const arrayMatch = part.match(/^(\w*)\[(\d+)\]$/);
+        if (arrayMatch) {
+            const propName = arrayMatch[1];
+            const index = parseInt(arrayMatch[2]);
+            // If propName is empty, current should be an array
+            if (!propName) {
+                current = current[index];
+            }
+            else {
+                current = current[propName]?.[index];
+            }
+        }
+        else {
+            // Regular property access
+            current = current[part];
+        }
+    }
+    return current;
+};
+/**
+ * Custom hook to fetch options from URL with custom headers
+ * @param componentOptions - The component options object which may contain URL and headers
+ * @param adaptorType - Type of adaptor to use ('WebApiAdaptor' | 'UrlAdaptor' | 'ODataV4Adaptor')
+ * @returns Array of fetched options
+ */
+export const useFetchOptions = (componentOptions) => {
+    const [fetchedOptions, setFetchedOptions] = React.useState([]);
+    React.useEffect(() => {
+        const isUrlType = componentOptions &&
+            typeof componentOptions === 'object' &&
+            !Array.isArray(componentOptions) &&
+            componentOptions.type === 'url' &&
+            componentOptions.url;
+        if (isUrlType) {
+            const urlConfig = componentOptions;
+            try {
+                const headers = {};
+                if (urlConfig.headers && Array.isArray(urlConfig.headers)) {
+                    urlConfig.headers.forEach((h) => {
+                        if (h.key?.trim()) {
+                            headers[h.key] = h.value;
+                        }
+                    });
+                }
+                // ✅ Create DataManager with selected adaptor
+                const dataManager = new DataManager({
+                    url: urlConfig.url,
+                    adaptor: getAdaptorInstance(urlConfig.adaptorType),
+                    headers: Object.keys(headers).length ? headers : undefined
+                });
+                // ✅ Build Query (dynamic support)
+                let query = new Query();
+                if (urlConfig.search && urlConfig.search.enabled && urlConfig.search.fields && urlConfig.search.fields.length > 0) {
+                    const searchKey = urlConfig.search.key || 'search';
+                    query = query.search(searchKey, urlConfig.search.fields);
+                }
+                // Apply sort query
+                if (urlConfig.sort && urlConfig.sort.enabled && urlConfig.sort.field) {
+                    const sortDirection = urlConfig.sort.direction === 'descending' ? 'descending' : 'ascending';
+                    query = query.sortBy(urlConfig.sort.field, sortDirection);
+                }
+                // Apply filter queries
+                if (urlConfig.filters && Array.isArray(urlConfig.filters) && urlConfig.filters.length > 0) {
+                    urlConfig.filters.forEach((f) => {
+                        if (f.field && f.operator && f.value) {
+                            query = query.where(f.field, f.operator, f.value);
+                        }
+                    });
+                }
+                // Example: add params (query string)
+                if (urlConfig.queryParams) {
+                    Object.keys(urlConfig.queryParams).forEach(key => {
+                        query = query.addParams(key, urlConfig.queryParams[key]);
+                    });
+                }
+                // Example: paging
+                if (urlConfig.skip)
+                    query = query.skip(urlConfig.skip);
+                if (urlConfig.take)
+                    query = query.take(urlConfig.take);
+                // ✅ Execute query
+                dataManager.executeQuery(query).then((res) => {
+                    let data = res.result;
+                    if (urlConfig.dataPath) {
+                        data = extractDataFromPath(data, urlConfig.dataPath);
+                    }
+                    if (Array.isArray(data)) {
+                        setFetchedOptions(data);
+                    }
+                    else if (typeof data === 'string') {
+                        setFetchedOptions([data]);
+                    }
+                    else {
+                        setFetchedOptions([]);
+                    }
+                }).catch((err) => {
+                    console.error('DataManager fetch error:', err);
+                    setFetchedOptions([]);
+                });
+            }
+            catch (err) {
+                console.error('Setup error:', err);
+                setFetchedOptions([]);
+            }
+        }
+    }, [componentOptions]);
+    return fetchedOptions;
+};
+/**
+ * Resolves component options from various sources
+ * Handles array options, URL-fetched options, and raw data options
+ * @param options - Component options (can be array, URL config, or raw data config)
+ * @param fetchedOptions - Pre-fetched options from URL
+ * @returns Resolved array of options
+ */
+export const resolveOptions = (options, fetchedOptions) => {
+    // If URL type with fetched data, return fetched options
+    if (options && typeof options === 'object' && !Array.isArray(options) && options.type === 'url') {
+        return fetchedOptions.length > 0 ? fetchedOptions : [];
+    }
+    // If already an array, return as-is
+    if (Array.isArray(options)) {
+        return options;
+    }
+    // If it's raw data type
+    if (options && typeof options === 'object' && !Array.isArray(options) && options.type === 'raw') {
+        return Array.isArray(options.data) ? options.data : [];
+    }
+    return [];
+};
+export const collectAvailableFieldNames = (components) => {
+    const fieldNames = [];
+    const traverse = (comps) => {
+        comps.forEach(comp => {
+            // Only add fields that have a name and aren't layout components
+            if (comp.name && !['panel', 'table', 'tabs', 'card', 'message', 'button', 'splitButton', 'staticHtml'].includes(comp.type)) {
+                // Get semantic type mapping for this component
+                const semanticType = UI_TYPE_TO_SEMANTIC_TYPE[comp.type];
+                if (semanticType) {
+                    fieldNames.push({
+                        name: comp.name,
+                        type: semanticType.type,
+                        ...(semanticType.format && { format: semanticType.format })
+                    });
+                }
+            }
+            // Traverse nested components
+            if (comp.children)
+                traverse(comp.children);
+            if (comp.tabItems) {
+                comp.tabItems.forEach(tab => {
+                    if (tab.content)
+                        traverse(tab.content);
+                });
+            }
+            if (comp.tableCells) {
+                comp.tableCells.forEach(row => {
+                    row.forEach(cell => traverse(cell));
+                });
+            }
+        });
+    };
+    traverse(components);
+    return fieldNames;
+};
+/**
+ * Resolve conditional data for a DataGrid component
+ * Evaluates all conditionalData rules and applies the first matching one
+ * Returns both dataSource and custom columns if defined
+ *
+ * @param conditions - Component conditions including conditionalData rules
+ * @param formValues - Current form field values
+ * @returns Object with dataSource and columns, or undefined if no condition matches
+ */
+export const resolveConditionalData = (conditions, formValues) => {
+    if (!conditions?.conditionalData || !Array.isArray(conditions.conditionalData)) {
+        return undefined;
+    }
+    // Evaluate each conditional data rule in order
+    for (const rule of conditions.conditionalData) {
+        if (ConditionalRuleEngine.evaluateCondition(rule.condition, formValues)) {
+            // Condition is met - resolve and return both data source and columns
+            return {
+                dataSource: rule.dataSource,
+                columns: rule.includeColumns ? rule.columns : undefined
+            };
+        }
+    }
+    return undefined;
+};

package/styles/form-renderer.base.css

@@ -150,6 +150,22 @@
   min-width: 0;
 }
 
+.field-wrapper:has(.e-small) .field-label {
+  font-size: .75rem;
+}
+
+.field-wrapper:has(.e-small) .field-description {
+  font-size: 0.625rem;
+}
+
+.field-wrapper:has(.e-bigger) .field-label {
+  font-size: 1rem;
+}
+
+.field-wrapper:has(.e-bigger) .field-description {
+  font-size: 0.875rem;
+}
+
 /* Label */
 .field-label {
   font-size: 0.875rem;
@@ -213,7 +229,6 @@
   border: none;
   border-radius: 8px;
   padding: 0;
-  margin: 1rem 0;
 }
 
 .form-panel-renderer:has(.panel-legend) {
@@ -268,45 +283,45 @@
   overflow-y: hidden; 
 }
 
-.form-table-renderer .table-row {
+.form-table-renderer .e-form-table-row {
   display: table-row;
   background: transparent;
 }
 
-.form-table-renderer .table-cell {
+.form-table-renderer .e-form-table-cell {
   display: table-cell;
   padding: 12px;
   vertical-align: top;
 }
 
-.table-border .table-cell {
+.table-border .e-form-table-cell {
   border-bottom: 1px solid var(--sf-layout-border-color);
   border-right: 1px solid var(--sf-layout-border-color);
 }
 
-.table-cell:last-child {
+.e-form-table-cell:last-child {
   border-right: none;
 }
 
-.form-table-renderer .table-row:last-child .table-cell {
+.form-table-renderer .e-form-table-row:last-child .e-form-table-cell {
   border-bottom: none;
 }
 
-.table-cell > .form-table-renderer,
-.table-cell > .form-tabs-renderer,
-.table-cell > .form-card-renderer,
-.table-cell > .form-panel-renderer,
-.table-cell > .form-group
+.e-form-table-cell > .form-table-renderer,
+.e-form-table-cell > .form-tabs-renderer,
+.e-form-table-cell > .form-card-renderer,
+.e-form-table-cell > .form-panel-renderer,
+.e-form-table-cell > .form-group
  {
-    margin-bottom: 0.5rem;
+    margin-bottom: 1.5rem;
 }
 
 
-.table-cell > .form-table-renderer:last-child,
-.table-cell > .form-tabs-renderer:last-child,
-.table-cell > .form-card-renderer:last-child,
-.table-cell > .form-panel-renderer:last-child,
-.table-cell > .form-group:last-child
+.e-form-table-cell > .form-table-renderer:last-child,
+.e-form-table-cell > .form-tabs-renderer:last-child,
+.e-form-table-cell > .form-card-renderer:last-child,
+.e-form-table-cell > .form-panel-renderer:last-child,
+.e-form-table-cell > .form-group:last-child
 {
   margin-bottom: 0;
 }
@@ -342,6 +357,7 @@
 }
 
 .tab-content-renderer {
+  padding-top: 10px;
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -387,11 +403,11 @@
   border-color: #3d3d3d;
 }
 
-[data-theme="dark"] .table-row {
+[data-theme="dark"] .e-form-table-row {
   border-color: #3d3d3d;
 }
 
-[data-theme="dark"] .table-cell {
+[data-theme="dark"] .e-form-table-cell {
   border-color: #3d3d3d;
 }
 
@@ -406,6 +422,16 @@
   line-height: 16px;
 }
 
+.form-title h1,
+.form-title h2,
+.form-title h3 {
+  margin-top: 0;
+}
+
+.form-title {
+  text-align: center;
+}
+
 .e-card .e-card-content {
   padding: 12px 18px 12px 18px;
 }
@@ -442,7 +468,7 @@
     width: 100%;
   }
   
-  .form-table-renderer .table-cell {
+  .form-table-renderer .e-form-table-cell {
     display: block;
     flex: 1 1 auto;
     min-width: 250px; /* minimum width before wrapping to next row */
@@ -457,17 +483,17 @@
     flex: 1 1 auto;
   }
   
-  .table-border .table-cell  {
+  .table-border .e-form-table-cell  {
     border-right: none;
     border-bottom: 1px solid var(--sf-layout-border-color);
     border-radius: 4px;
   }
   
-  .form-table-renderer .table-cell:last-child {
+  .form-table-renderer .e-form-table-cell:last-child {
     border-bottom: 1px solid var(--sf-layout-border-color);
   }
   
-  .form-table-renderer .row:last-child .table-cell {
+  .form-table-renderer .row:last-child .e-form-table-cell {
     border-bottom: none;
   }
 }