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

package/src/utils/ConditionalEditorUtils.js

@@ -1,310 +0,0 @@
-/**
- * ConditionalEditorUtils - Shared utility functions for Conditional and ConditionalData editors
- * Exports field type inference, column templates, and helper functions
- */
-import { getComponent, Internationalization } from '@syncfusion/ej2-base';
-import { DropDownList, MultiSelect } from '@syncfusion/ej2-dropdowns';
-import { DatePicker, TimePicker, DateTimePicker, DateRangePicker } from '@syncfusion/ej2-calendars';
-import { resolveOptions } from '../../Common/utils';
-import { useLocalization } from '../context/LocalizationContext';
-/**
- * Infer field type from component type for QueryBuilder
- */
-export function inferFieldType(component) {
-    const type = component.type;
-    if (type === 'number' || type === 'rangeSlider' || type === 'rating') {
-        return 'number';
-    }
-    if (type === 'date') {
-        return 'date';
-    }
-    if (type === 'dateTime') {
-        return 'string';
-    }
-    if (type === 'time') {
-        return 'string';
-    }
-    if (type === 'dateRange') {
-        return 'string';
-    }
-    if (type === 'checkbox' || type === 'switch') {
-        return 'boolean';
-    }
-    if (type === 'multiselect' || type === 'checkboxGroup') {
-        return 'string';
-    }
-    return 'string';
-}
-/**
- * Check if component is an array field type
- */
-export function isArrayField(component) {
-    return component.type === 'multiselect' || component.type === 'checkboxGroup' || component.type === 'dateRange';
-}
-/**
- * Check if component has selectable options
- */
-export function hasSelectableOptions(component) {
-    const selectTypes = ['dropdown', 'radio', 'multiselect', 'checkboxGroup'];
-    return selectTypes.includes(component.type) && !!component.options;
-}
-/**
- * Create column template for QueryBuilder with custom input widgets
- * Supports date, time, multiselect, dropdown, and other input types
- */
-export function createColumnTemplate(component, qbRef, fetchedOptions = {}) {
-    const intl = new Internationalization();
-    const { locale } = useLocalization();
-    const isMultiple = component.type === 'multiselect' || component.type === 'checkboxGroup';
-    const isDateType = component.type === 'date';
-    const isTimeType = component.type === 'time';
-    const isDateTimeType = component.type === 'dateTime';
-    const isDateRangeType = component.type === 'dateRange';
-    const urlFetchedOptions = fetchedOptions[component.id] || [];
-    const resolvedOptions = Array.isArray(component.options)
-        ? component.options
-        : component.options?.type === 'url' ? resolveOptions(component.options, urlFetchedOptions) : [];
-    const dataSource = resolvedOptions ? resolvedOptions.map(opt => {
-        if (typeof opt === 'string') {
-            return { text: opt, value: opt };
-        }
-        else if (opt && typeof opt === 'object' && 'value' in opt) {
-            return {
-                text: opt.label || opt.text || opt.value,
-                value: opt.value
-            };
-        }
-        return { text: String(opt), value: String(opt) };
-    }) : [];
-    return {
-        create: () => {
-            const elem = document.createElement('input');
-            elem.setAttribute('type', 'text');
-            return elem;
-        },
-        destroy: (args) => {
-            const element = document.getElementById(args.elementId);
-            if (!element)
-                return;
-            if (isMultiple) {
-                const multiSelectObj = getComponent(element, 'multiselect');
-                if (multiSelectObj) {
-                    multiSelectObj.destroy();
-                }
-            }
-            else if (isDateType) {
-                const datePickerObj = getComponent(element, 'datepicker');
-                if (datePickerObj) {
-                    datePickerObj.destroy();
-                }
-            }
-            else if (isTimeType) {
-                const timePickerObj = getComponent(element, 'timepicker');
-                if (timePickerObj) {
-                    timePickerObj.destroy();
-                }
-            }
-            else if (isDateTimeType) {
-                const dateTimePickerObj = getComponent(element, 'datetimepicker');
-                if (dateTimePickerObj) {
-                    dateTimePickerObj.destroy();
-                }
-            }
-            else if (isDateRangeType) {
-                const dateRangePickerObj = getComponent(element, 'daterangepicker');
-                if (dateRangePickerObj) {
-                    dateRangePickerObj.destroy();
-                }
-            }
-            else {
-                const dropDownObj = getComponent(element, 'dropdownlist');
-                if (dropDownObj) {
-                    dropDownObj.destroy();
-                }
-            }
-        },
-        write: (args) => {
-            if (isMultiple) {
-                let initialValue = [];
-                if (args.values) {
-                    if (typeof args.values === 'string') {
-                        initialValue = args.values.split(',').map((v) => v.trim()).filter((v) => v);
-                    }
-                    else if (Array.isArray(args.values)) {
-                        initialValue = args.values;
-                    }
-                }
-                const multiSelectObj = new MultiSelect({
-                    change: (e) => {
-                        const valueStr = e.value && e.value.length > 0 ? e.value.join(', ') : '';
-                        qbRef.current?.notifyChange(valueStr, e.element);
-                    },
-                    dataSource: dataSource,
-                    fields: { text: 'text', value: 'value' },
-                    placeholder: `Select ${component.label || component.id}`,
-                    value: initialValue,
-                });
-                multiSelectObj.appendTo('#' + args.elements.id);
-                const elem = document.getElementById(args.elements.id);
-                if (elem) {
-                    elem.setAttribute('data-component-id', component.id);
-                }
-            }
-            else if (isDateType) {
-                let initialDate = null;
-                if (args.values) {
-                    if (typeof args.values === 'string') {
-                        initialDate = new Date(args.values);
-                    }
-                    else if (args.values instanceof Date) {
-                        initialDate = args.values;
-                    }
-                }
-                const datePickerObj = new DatePicker({
-                    locale: locale,
-                    change: (e) => {
-                        if (e.value) {
-                            const dFormatter = intl.getDateFormat({
-                                format: 'MM/dd/yyyy',
-                                type: 'date'
-                            });
-                            const formattedValue = dFormatter(e.value);
-                            qbRef.current?.notifyChange(formattedValue, e.element);
-                        }
-                        else {
-                            qbRef.current?.notifyChange('', e.element);
-                        }
-                    },
-                    format: 'MM/dd/yyyy',
-                    placeholder: `Select ${component.label || component.id}`,
-                    value: initialDate || undefined,
-                });
-                datePickerObj.appendTo('#' + args.elements.id);
-            }
-            else if (isTimeType) {
-                let initialTime = null;
-                if (args.values) {
-                    if (typeof args.values === 'string') {
-                        initialTime = new Date(`1970-01-01 ${args.values}`);
-                    }
-                    else if (args.values instanceof Date) {
-                        initialTime = args.values;
-                    }
-                }
-                const timePickerObj = new TimePicker({
-                    locale: locale,
-                    change: (e) => {
-                        if (e.value) {
-                            const tFormatter = intl.getDateFormat({
-                                format: 'hh:mm a',
-                                type: 'time'
-                            });
-                            const formattedValue = tFormatter(e.value);
-                            qbRef.current?.notifyChange(formattedValue, e.element);
-                        }
-                        else {
-                            qbRef.current?.notifyChange('', e.element);
-                        }
-                    },
-                    format: 'hh:mm a',
-                    placeholder: `Select ${component.label || component.id}`,
-                    value: initialTime || undefined,
-                });
-                timePickerObj.appendTo('#' + args.elements.id);
-            }
-            else if (isDateTimeType) {
-                let initialDateTime = null;
-                if (args.values) {
-                    if (typeof args.values === 'string') {
-                        initialDateTime = new Date(args.values);
-                    }
-                    else if (args.values instanceof Date) {
-                        initialDateTime = args.values;
-                    }
-                }
-                const dateTimePickerObj = new DateTimePicker({
-                    locale: locale,
-                    change: (e) => {
-                        if (e.value) {
-                            const dtFormatter = intl.getDateFormat({
-                                format: 'MM/dd/yyyy hh:mm a',
-                                type: 'dateTime'
-                            });
-                            const formattedValue = dtFormatter(e.value);
-                            const element = document.getElementById(args.elements.id);
-                            qbRef.current?.notifyChange(formattedValue, element);
-                        }
-                        else {
-                            const element = document.getElementById(args.elements.id);
-                            qbRef.current?.notifyChange('', element);
-                        }
-                    },
-                    format: 'MM/dd/yyyy hh:mm a',
-                    placeholder: `Select ${component.label || component.id}`,
-                    value: initialDateTime || undefined,
-                });
-                dateTimePickerObj.appendTo('#' + args.elements.id);
-            }
-            else if (isDateRangeType) {
-                let initialStartDate = null;
-                let initialEndDate = null;
-                if (args.values) {
-                    if (typeof args.values === 'string') {
-                        const dates = args.values.split(',').map((d) => d.trim());
-                        if (dates[0])
-                            initialStartDate = new Date(dates[0]);
-                        if (dates[1])
-                            initialEndDate = new Date(dates[1]);
-                    }
-                    else if (Array.isArray(args.values)) {
-                        if (args.values[0])
-                            initialStartDate = new Date(args.values[0]);
-                        if (args.values[1])
-                            initialEndDate = new Date(args.values[1]);
-                    }
-                }
-                const dateRangePickerObj = new DateRangePicker({
-                    locale: locale,
-                    change: (e) => {
-                        if (e.startDate && e.endDate) {
-                            const dFormatter = intl.getDateFormat({
-                                format: 'MM/dd/yyyy',
-                                type: 'date'
-                            });
-                            const formattedStart = dFormatter(e.startDate);
-                            const formattedEnd = dFormatter(e.endDate);
-                            const formattedValue = `${formattedStart} , ${formattedEnd}`;
-                            const element = document.getElementById(args.elements.id);
-                            qbRef.current?.notifyChange(formattedValue, element);
-                        }
-                        else {
-                            const element = document.getElementById(args.elements.id);
-                            qbRef.current?.notifyChange('', element);
-                        }
-                    },
-                    format: 'MM/dd/yyyy',
-                    placeholder: `Select ${component.label || component.id}`,
-                    startDate: initialStartDate || undefined,
-                    endDate: initialEndDate || undefined,
-                });
-                dateRangePickerObj.appendTo('#' + args.elements.id);
-            }
-            else {
-                const dropDownObj = new DropDownList({
-                    change: (e) => {
-                        qbRef.current?.notifyChange(e.itemData?.value || e.value, e.element);
-                    },
-                    dataSource: dataSource,
-                    fields: { text: 'text', value: 'value' },
-                    placeholder: `Select ${component.label || component.id}`,
-                    value: args.values || undefined
-                });
-                dropDownObj.appendTo('#' + args.elements.id);
-                const elem = document.getElementById(args.elements.id);
-                if (elem) {
-                    elem.setAttribute('data-component-id', component.id);
-                }
-            }
-        }
-    };
-}

package/src/utils/ConditionsEditor.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-import type { FormComponent, FormComponentConditions } from '../types/FormSchema';
-export interface ConditionsEditorProps {
-    /** Array of available form field names/components for condition rules */
-    componentFields: FormComponent[];
-    /** The component being edited (for determining value input type in setValueWhen) */
-    componentForEdit?: FormComponent;
-    /** ID of the component being edited - exclude this from columns to prevent self-reference */
-    excludeFieldId?: string;
-    /** Array of child component IDs to exclude (prevents circular dependencies with children) */
-    excludeChildIds?: string[];
-    /** Existing conditions to pre-populate QueryBuilders (for editing) */
-    existingConditions?: FormComponentConditions;
-    /** Callback when any condition changes */
-    onChange: (conditions: FormComponentConditions) => void;
-    /** Array of supported condition types for this component (default: all) */
-    supportedConditions?: ('visibleWhen' | 'hideWhen' | 'readOnlyWhen' | 'disabledWhen' | 'requiredWhen' | 'setValueWhen' | 'conditionalData' | 'choiceBasedField')[];
-    builderMode?: 'Simple' | 'Developer';
-}
-export declare const ConditionsEditor: React.FC<ConditionsEditorProps>;