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

package/src/utils.js

@@ -1,408 +0,0 @@
-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')
- * @returns Space-separated CSS class string
- */
-export const mapButtonStyleToClass = (style) => {
-    const styleMap = {
-        'primary': 'e-primary',
-        'flat': 'e-flat',
-        'information': 'e-info',
-        'error': 'e-danger',
-        'success': 'e-success',
-        'warning': 'e-warning'
-    };
-    return styleMap[style || 'primary'] || 'e-primary';
-};
-/**
- * Resolves button type to valid HTML button type
- * @param type - Button type ('submit' | 'reset' | 'button')
- * @returns Resolved button type
- */
-export const resolveButtonType = (type) => {
-    return (type === 'submit' || type === 'reset') ? type : 'button';
-};
-/**
- * Maps button position to CSS justifyContent value
- * @param position - Button position ('Left' | 'Right' | 'Center')
- * @returns CSS justifyContent value
- */
-export const mapPositionToJustifyContent = (position) => {
-    const positionMap = {
-        'Left': 'flex-start',
-        'Right': 'flex-end',
-        'Center': 'center'
-    };
-    return positionMap[position || 'Left'] || 'flex-start';
-};
-export function splitWidths(input) {
-    const result = input.map(v => (v === null ? NaN : Number(v)));
-    const sumKnown = result.reduce((s, v) => s + (isNaN(v) ? 0 : v), 0);
-    // If knowns already >= 100, unknowns become 0
-    const remainingInt = Math.max(0, Math.round(100 - sumKnown));
-    const unknownIndexes = result.map((v, i) => (isNaN(v) ? i : -1)).filter(i => i >= 0);
-    const k = unknownIndexes.length;
-    if (k === 0) {
-        // nothing to split; just clamp/round knowns so they sum to 100 if you prefer, but return as-is
-        return result.map(v => Math.round(v));
-    }
-    // Distribute integer percentage points to avoid fractional rounding problems
-    const base = Math.floor(remainingInt / k);
-    let remainder = remainingInt - base * k;
-    // Fill unknowns with base + 1 for first `remainder` items
-    unknownIndexes.forEach((idx) => {
-        const add = remainder > 0 ? base + 1 : base;
-        result[idx] = add;
-        remainder = Math.max(0, remainder - 1);
-    });
-    // 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/bootstrap5.3-dark.css

@@ -1,26 +0,0 @@
-@import '@syncfusion/ej2-base/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-buttons/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-inputs/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-dropdowns/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-calendars/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-react-calendars/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-navigations/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-notifications/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-popups/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-lists/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-splitbuttons/styles/bootstrap5.3.css';
-@import "@syncfusion/ej2-react-popups/styles/bootstrap5.3.css";
-@import "@syncfusion/ej2-react-grids/styles/bootstrap5.3.css";
-@import "@syncfusion/ej2-splitbuttons/styles/bootstrap5.3.css";
-@import "@syncfusion/ej2-image-editor/styles/bootstrap5.3.css";
-@import "@syncfusion/ej2-layouts/styles/bootstrap5.3.css";
-@import '@syncfusion/ej2-richtexteditor/styles/bootstrap5.3.css';
-@import 'form-renderer.base.css';
-
-:root {
-  --sf-bg-color: #212529;
-  --sf-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'apple color emoji', 'Segoe UI emoji', 'Segoe UI Symbol', 'Noto color emoji';
-  --sf-text-color: #dee2e6;
-  --sf-tooltip-text-color: #adb5bd;
-  --sf-layout-border-color: #495057;
-}

package/styles/fluent2-dark.css

@@ -1,26 +0,0 @@
-@import '@syncfusion/ej2-base/styles/fluent2.css';
-@import '@syncfusion/ej2-buttons/styles/fluent2.css';
-@import '@syncfusion/ej2-inputs/styles/fluent2.css';
-@import '@syncfusion/ej2-dropdowns/styles/fluent2.css';
-@import '@syncfusion/ej2-calendars/styles/fluent2.css';
-@import '@syncfusion/ej2-react-calendars/styles/fluent2.css';
-@import '@syncfusion/ej2-navigations/styles/fluent2.css';
-@import '@syncfusion/ej2-notifications/styles/fluent2.css';
-@import '@syncfusion/ej2-popups/styles/fluent2.css';
-@import '@syncfusion/ej2-lists/styles/fluent2.css';
-@import '@syncfusion/ej2-splitbuttons/styles/fluent2.css';
-@import "@syncfusion/ej2-react-popups/styles/fluent2.css";
-@import "@syncfusion/ej2-react-grids/styles/fluent2.css";
-@import "@syncfusion/ej2-splitbuttons/styles/fluent2.css";
-@import "@syncfusion/ej2-image-editor/styles/fluent2.css";
-@import "@syncfusion/ej2-layouts/styles/fluent2.css";
-@import '@syncfusion/ej2-richtexteditor/styles/fluent2.css';
-@import 'form-renderer.base.css';
-
-:root {
-  --sf-bg-color: #1f1f1f;
-  --sf-font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-  --sf-text-color: #fff;
-  --sf-tooltip-text-color: #d6d6d6;
-  --sf-layout-border-color: #525252;
-}