df-ae-forms-package 1.1.5 → 1.1.6

package/dist/index.js

@@ -820,7 +820,6 @@ const DfFormInput = ({ id, properties, validationErrors = {}, formValue = '', in
     // Update ref if ID changes (shouldn't happen, but safety check)
     React.useEffect(() => {
         if (id !== componentIdRef.current) {
-            console.warn(`[DfFormInput] Component ID changed from ${componentIdRef.current} to ${id}`);
             componentIdRef.current = id;
         }
     }, [id]);
@@ -2998,8 +2997,6 @@ const DfFormLocation = ({ id, properties, validationErrors = {}, formValue = nul
                 }
             }
             catch (error) {
-                // Capacitor not properly initialized, fall through to web geolocation
-                console.warn('Capacitor Geolocation not available, falling back to web geolocation');
             }
         }
         // Fallback to standard web geolocation API (for browsers)
@@ -3713,7 +3710,6 @@ const AttachmentThumbnails = ({ attachments, onRemove }) => {
                     newUrls.set(index, url);
                 }
                 catch (e) {
-                    console.warn('Failed to create object URL for attachment:', e);
                 }
             }
             else if (file && file.url && file.type && file.type.startsWith('image/')) {
@@ -4624,7 +4620,6 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                         zIndex: 5
                     }, children: jsxRuntime.jsxs("button", { onClick: (e) => {
                             e.stopPropagation();
-                            console.log('[TableView] Add Entry button clicked (grid view)', 'entries:', dataEntries.length, 'max:', maxEntries);
                             onAddEntry();
                         }, disabled: dataEntries.length >= maxEntries, style: {
                             padding: '8px 16px',
@@ -4750,7 +4745,6 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                     justifyContent: 'center'
                 }, children: jsxRuntime.jsxs("button", { onClick: (e) => {
                         e.stopPropagation();
-                        console.log('[TableView] Add Entry button clicked (list view)', 'entries:', dataEntries.length, 'max:', maxEntries);
                         onAddEntry();
                     }, disabled: dataEntries.length >= maxEntries, style: {
                         padding: '8px 16px',
@@ -5003,12 +4997,8 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
         // In edit/preview modes, don't handle value changes as components are read-only
     }, [mode, onValueChange]);
     const handleAddEntry = React.useCallback(() => {
-        console.log('[DfFormDataGrid] handleAddEntry called - Component ID:', id);
         // Safety check: ensure we have entries array
         const currentEntries = Array.isArray(properties.entries) ? properties.entries : [];
-        console.log('[DfFormDataGrid] gridComponents:', gridComponents.length);
-        console.log('[DfFormDataGrid] current entries count:', currentEntries.length);
-        console.log('[DfFormDataGrid] onValueChange exists:', !!onValueChange);
         // Use timestamp and random string to ensure uniqueness even if entries are deleted
         const uniqueSuffix = `${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
         const newEntryId = `entry-${uniqueSuffix}`;
@@ -5030,11 +5020,8 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             }),
             styles: {}
         };
-        console.log('[DfFormDataGrid] newEntry created:', newEntry.id, 'with', newEntry.components.length, 'components');
         const updatedEntries = [...currentEntries, newEntry];
-        console.log('[DfFormDataGrid] updatedEntries count:', updatedEntries.length);
         if (onValueChange) {
-            console.log('[DfFormDataGrid] calling onValueChange with updated datagrid structure - Entries:', updatedEntries.length);
             onValueChange({
                 id: gridId, // Use sanitized gridId
                 value: {
@@ -5044,13 +5031,9 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             });
             // Notify parent if callback provided
             if (onEntryAdd) {
-                console.log('[DfFormDataGrid] calling onEntryAdd callback');
                 onEntryAdd();
             }
         }
-        else {
-            console.warn('[DfFormDataGrid] Cannot add entry: onValueChange is missing');
-        }
     }, [onValueChange, properties, gridId, gridComponents, onEntryAdd]);
     const handleRemoveEntry = React.useCallback((entryIndex) => {
         // Safety check: ensure we have entries array
@@ -5059,7 +5042,6 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             .filter((_, index) => index !== entryIndex)
             .map((entry, index) => ({ ...entry, index })); // Only update index, preserve unique ID
         if (onValueChange) {
-            console.log('[DfFormDataGrid] Removing entry at index:', entryIndex, 'New count:', updatedEntries.length);
             onValueChange({
                 id: gridId, // Use sanitized gridId
                 value: { ...properties, entries: updatedEntries }
@@ -5447,8 +5429,8 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
     const [validationErrors, setValidationErrors] = React.useState({});
     const [formSubmitted, setFormSubmitted] = React.useState(false);
     const [touchedFields, setTouchedFields] = React.useState({});
-    // Conditional logic disabled temporarily
-    // const [componentVisibility, setComponentVisibility] = useState<Record<string, boolean>>({})
+    // Component visibility state - driven by conditional logic evaluation
+    const [componentVisibility, setComponentVisibility] = React.useState({});
     // Track raised issues for threshold conditions (Set of condition IDs)
     const [raisedThresholdIssues, setRaisedThresholdIssues] = React.useState(new Set());
     // Track threshold action completions: Map<conditionId, { notesCompleted, attachmentsCompleted, emailSent }>
@@ -5546,6 +5528,11 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             if (component.children && Array.isArray(component.children)) {
                 initializeComponentValues(component.children, values);
             }
+            // CRITICAL for conditional logic: Also store value under the label key
+            // so condition lookups by label (e.g. "Temperature") work during init
+            if (component.basic?.label && componentId && values[componentId] !== undefined) {
+                values[component.basic.label] = values[componentId];
+            }
         });
     };
     const initializeFormState = React.useCallback(() => {
@@ -5617,15 +5604,12 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         const labelPart = safeLabel ? `-${safeLabel}` : '';
                         validatedComponent.id = `${name}${labelPart}-${index}`;
                     }
-                    console.warn(`[DfFormPreview] Fixed missing/invalid ID: ${validatedComponent.id}`);
                 }
                 else {
                     // ID is a valid string, check for duplicates
                     if (seenIds.has(validatedComponent.id)) {
-                        console.error(`[DfFormPreview] Duplicate component ID detected: ${validatedComponent.id}`);
                         // Generate a unique ID for duplicate - using index to keep it somewhat stable
                         validatedComponent.id = `${validatedComponent.id}-dup-${index}`;
-                        console.warn(`[DfFormPreview] Generated new unique ID: ${validatedComponent.id}`);
                     }
                 }
                 seenIds.add(validatedComponent.id);
@@ -5680,7 +5664,6 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             validatedFormComponents = getValidatedComponents(localFormComponents);
             // Synchronize local state if components were mutated (IDs added/fixed)
             if (JSON.stringify(validatedFormComponents) !== JSON.stringify(localFormComponents)) {
-                console.log('[DfFormPreview] Synchronizing local components after ID validation');
                 setLocalFormComponents(validatedFormComponents);
                 onFormDataChange?.(validatedFormComponents);
             }
@@ -5733,13 +5716,229 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         // Initialize notes and attachments state
         setComponentNotes(prev => ({ ...initialNotes, ...prev }));
         setComponentAttachments(prev => ({ ...initialAttachments, ...prev }));
-        // Conditional logic evaluation disabled temporarily to fix table issues
-        // evaluateConditionalLogic()
+        // Evaluate conditional logic on initialization
+        evaluateConditionalLogic(initialValues);
     }, [initialFormData, localFormComponents]);
-    // Conditional logic disabled temporarily - all components are always visible
-    const shouldShowComponent = React.useCallback((_componentId) => {
-        return true;
+    // ======================== CONDITIONAL LOGIC ENGINE ========================
+    // This is a pure visibility layer. It NEVER modifies component data.
+    // It computes a { [componentId]: boolean } map based on each component's
+    // `logic` property and the current form values.
+    // Helper: Flatten all components (including nested) into a flat list
+    const flattenAllComponents = React.useCallback((components) => {
+        const flat = [];
+        const traverse = (items) => {
+            if (!items || !Array.isArray(items))
+                return;
+            for (const item of items) {
+                flat.push(item);
+                if (item.children && Array.isArray(item.children))
+                    traverse(item.children);
+                if (item.cells && Array.isArray(item.cells)) {
+                    for (const row of item.cells) {
+                        const normalizedRow = normalizeTableRow(row);
+                        for (const cell of normalizedRow) {
+                            if (cell.components)
+                                traverse(cell.components);
+                        }
+                    }
+                }
+                if (item.entries && Array.isArray(item.entries)) {
+                    for (const entry of item.entries) {
+                        if (entry.components)
+                            traverse(entry.components);
+                    }
+                }
+                if (item.templateComponents && Array.isArray(item.templateComponents)) {
+                    traverse(item.templateComponents);
+                }
+            }
+        };
+        traverse(components);
+        return flat;
+    }, []);
+    // Helper: Get the value of a component referenced by a condition's `when` field.
+    // The `when` field is typically a component LABEL (e.g. "Temperature"), not an ID.
+    const getConditionComponentValue = React.useCallback((conditionWhen, allComponents, currentFormValues) => {
+        // Try to find the component by label, id, or _id
+        const comp = allComponents.find(c => c.basic?.label === conditionWhen ||
+            ensureStringId$1(c.id) === conditionWhen ||
+            ensureStringId$1(c._id) === conditionWhen);
+        if (!comp)
+            return undefined;
+        const compId = ensureStringId$1(comp.id || comp._id);
+        // Check formValues by ID first
+        if (compId && currentFormValues[compId] !== undefined) {
+            return currentFormValues[compId];
+        }
+        // Also check by label (main website stores values by label too)
+        if (comp.basic?.label && currentFormValues[comp.basic.label] !== undefined) {
+            return currentFormValues[comp.basic.label];
+        }
+        // Fall back to component's basic.value or defaultValue
+        if (comp.basic?.value !== undefined && comp.basic?.value !== null && comp.basic?.value !== '') {
+            return comp.basic.value;
+        }
+        if (comp.basic?.defaultValue !== undefined && comp.basic?.defaultValue !== null && comp.basic?.defaultValue !== '') {
+            return comp.basic.defaultValue;
+        }
+        return undefined;
     }, []);
+    // Helper: Evaluate a single condition
+    const evaluateSingleCondition = React.useCallback((condition, componentValue) => {
+        const { operator, value } = condition;
+        // isEmpty / isNotEmpty
+        if (operator === 'isEmpty') {
+            if (componentValue == null)
+                return true;
+            if (typeof componentValue === 'string')
+                return componentValue.trim() === '';
+            if (Array.isArray(componentValue))
+                return componentValue.length === 0;
+            return false;
+        }
+        if (operator === 'isNotEmpty') {
+            if (componentValue == null)
+                return false;
+            if (typeof componentValue === 'string')
+                return componentValue.trim() !== '';
+            if (Array.isArray(componentValue))
+                return componentValue.length > 0;
+            return true;
+        }
+        // checked / notChecked (for checkboxes)
+        if (operator === 'checked' || operator === 'notChecked') {
+            let isChecked = false;
+            if (typeof componentValue === 'boolean')
+                isChecked = componentValue;
+            else if (typeof componentValue === 'string')
+                isChecked = componentValue.toLowerCase() === 'true' || componentValue === '1' || componentValue.length > 0;
+            else if (Array.isArray(componentValue))
+                isChecked = componentValue.length > 0;
+            else if (typeof componentValue === 'number')
+                isChecked = componentValue > 0;
+            return operator === 'checked' ? isChecked : !isChecked;
+        }
+        // equals / notEquals
+        if (operator === 'equals' || operator === 'notEquals') {
+            let isEqual = false;
+            // Loose comparison
+            if (componentValue == value)
+                isEqual = true;
+            // String comparison (case-insensitive, trimmed)
+            if (!isEqual && componentValue != null && value != null) {
+                const strA = String(componentValue).trim();
+                const strB = String(value).trim();
+                // Numeric comparison within strings
+                if (strA !== '' && strB !== '' && !isNaN(Number(strA)) && !isNaN(Number(strB))) {
+                    isEqual = Number(strA) === Number(strB);
+                }
+                if (!isEqual) {
+                    isEqual = strA.toLowerCase() === strB.toLowerCase();
+                }
+            }
+            // Array contains check (for multi-select)
+            if (!isEqual && Array.isArray(componentValue)) {
+                isEqual = componentValue.some(v => String(v).trim().toLowerCase() === String(value).trim().toLowerCase());
+            }
+            return operator === 'equals' ? isEqual : !isEqual;
+        }
+        // contains / notContains
+        if (operator === 'contains' || operator === 'notContains') {
+            let doesContain = false;
+            if (typeof componentValue === 'string' && value != null) {
+                doesContain = componentValue.trim().toLowerCase().includes(String(value).trim().toLowerCase());
+            }
+            else if (Array.isArray(componentValue) && value != null) {
+                doesContain = componentValue.some(v => String(v).trim().toLowerCase() === String(value).trim().toLowerCase());
+            }
+            return operator === 'contains' ? doesContain : !doesContain;
+        }
+        // Numeric comparisons
+        if (['greaterThan', 'lessThan', 'greaterThanOrEqual', 'lessThanOrEqual'].includes(operator)) {
+            const numA = typeof componentValue === 'number' ? componentValue : parseFloat(String(componentValue));
+            const numB = typeof value === 'number' ? value : parseFloat(String(value));
+            if (isNaN(numA) || isNaN(numB))
+                return false;
+            switch (operator) {
+                case 'greaterThan': return numA > numB;
+                case 'lessThan': return numA < numB;
+                case 'greaterThanOrEqual': return numA >= numB;
+                case 'lessThanOrEqual': return numA <= numB;
+                default: return false;
+            }
+        }
+        return false;
+    }, []);
+    // Main conditional logic evaluation function
+    const evaluateConditionalLogic = React.useCallback((explicitValues) => {
+        const currentComponents = localFormComponents;
+        const currentValues = explicitValues || formValues;
+        if (!currentComponents || currentComponents.length === 0)
+            return;
+        const allComponents = flattenAllComponents(currentComponents);
+        const visibility = {};
+        allComponents.forEach(component => {
+            const compId = ensureStringId$1(component.id || component._id);
+            if (!compId)
+                return;
+            // Container components are ALWAYS visible — their children handle their own logic
+            if (['table', 'datagrid', 'section', 'heading', 'instructions'].includes(component.name)) {
+                visibility[compId] = true;
+                return;
+            }
+            // Get the logic property (API sends it as `logic`, builder uses `conditional`)
+            const logic = component.logic || component.conditional;
+            // No logic or action is 'always' → always show
+            if (!logic || logic.action === 'always' || !logic.conditions || logic.conditions.length === 0) {
+                visibility[compId] = true;
+                return;
+            }
+            // Evaluate each condition
+            const conditionResults = logic.conditions.map((condition) => {
+                const componentValue = getConditionComponentValue(condition.when, allComponents, currentValues);
+                return evaluateSingleCondition(condition, componentValue);
+            });
+            // Determine if conditions are met based on 'when' (all/any)
+            let conditionsMet;
+            if (logic.when === 'any') {
+                conditionsMet = conditionResults.some((r) => r);
+            }
+            else {
+                // Default to 'all'
+                conditionsMet = conditionResults.every((r) => r);
+            }
+            // Apply action
+            if (logic.action === 'show') {
+                visibility[compId] = conditionsMet;
+            }
+            else if (logic.action === 'hide') {
+                visibility[compId] = !conditionsMet;
+            }
+            else {
+                visibility[compId] = true;
+            }
+        });
+        // Only update state if visibility actually changed (prevent re-render loops)
+        setComponentVisibility(prev => {
+            const prevStr = JSON.stringify(prev);
+            const newStr = JSON.stringify(visibility);
+            if (prevStr === newStr)
+                return prev;
+            return visibility;
+        });
+    }, [localFormComponents, formValues, flattenAllComponents, getConditionComponentValue, evaluateSingleCondition]);
+    // Re-evaluate conditional logic whenever form values change
+    React.useEffect(() => {
+        evaluateConditionalLogic();
+    }, [formValues, evaluateConditionalLogic]);
+    // Check if a component should be visible
+    const shouldShowComponent = React.useCallback((componentId) => {
+        // In preview mode (read-only submission view), always show everything
+        if (isPreviewMode)
+            return true;
+        // Default to visible if not explicitly set to false
+        return componentVisibility[componentId] !== false;
+    }, [componentVisibility, isPreviewMode]);
     // Handle form value changes and re-evaluate conditional logic
     const onFormValueChange = React.useCallback((change) => {
         // CRITICAL: Validate that change.id is valid and unique
@@ -5791,6 +5990,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         // Only update formValues for actual value changes, not structure updates
         if (!isStructureUpdate) {
             newFormValues[change.id] = change.value;
+            // CRITICAL for conditional logic: Also store value under the component's label.
+            // Conditions reference components by label (e.g. "Temperature"), not by ID.
+            const allComponents = flattenAllComponents(localFormComponents);
+            const targetComp = allComponents.find(c => ensureStringId$1(c.id || c._id) === change.id);
+            if (targetComp?.basic?.label) {
+                newFormValues[targetComp.basic.label] = change.value;
+            }
             setFormValues(newFormValues);
         }
         // Clear raised issues for this component when value changes
@@ -6531,7 +6737,6 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 componentCounterRef.current += 1;
                 cachedId = `generated-${name}-${componentCounterRef.current}-${Math.random().toString(36).substr(2, 9)}`;
                 componentIdCacheRef.current.set(cacheKey, cachedId);
-                console.warn('[DfFormPreview] Generated and cached ID for component:', cachedId, 'key:', cacheKey);
             }
             finalComponentId = cachedId;
             // Create a new component object with the cached ID (don't mutate original)
@@ -6547,9 +6752,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         if (formValue !== undefined) {
             // Check if this value is being used by multiple components
             const componentsWithSameValue = localFormComponents.filter(comp => comp.id !== componentId && formValues[comp.id] === formValue);
-            if (componentsWithSameValue.length > 0) {
-                console.warn(`[DfFormPreview] Component ${componentId} shares form value with other components:`, componentsWithSameValue.map(c => c.id));
-            }
+            if (componentsWithSameValue.length > 0) ;
         }
         const commonProps = {
             id: componentId, // Use the validated component ID
@@ -6762,10 +6965,8 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     }, onValueChange: (change) => {
                         const changeId = ensureStringId$1(change.id);
                         const componentId = ensureStringId$1(component.id);
-                        console.log(`[DfFormPreview] datagrid onValueChange - Target: ${changeId}, Component: ${componentId}`);
                         // Handle datagrid value changes (entries updates)
                         if (changeId === componentId && change.value && typeof change.value === 'object' && 'entries' in change.value) {
-                            console.log('[DfFormPreview] datagrid entries update - entries count:', change.value.entries?.length);
                             // Update localFormComponents with new entries structure
                             const updatedComponents = localFormComponents.map(comp => {
                                 const currentCompId = ensureStringId$1(comp.id);
@@ -6808,7 +7009,6 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                     }
                                 });
                                 if (valuesChanged) {
-                                    console.log('[DfFormPreview] Initializing form values for new datagrid entries');
                                     setFormValues(newValues);
                                 }
                             }