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

package/src/utils/ConditionalEditorUtils.js

@@ -0,0 +1,310 @@
+/**
+ * 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

@@ -0,0 +1,20 @@
+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>;