@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/templates/node-forms/ForLoopNode.tsx

@@ -1,313 +1,313 @@
-import { useEffect, useState, useCallback } from 'react';
-import ExpressionInput from '../../atoms/ExpressionInput';
-import { useTranslation } from 'react-i18next';
-import { Expression } from '../../types/ndoe-form-types';
-import { useFormValidation } from '../../hooks/useFormValidation';
-import ValidationError from '../../atoms/ValidationError';
-import { Box, Stack, Collapse, Typography, IconButton } from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-
-interface ForLoopNodeFormProps {
-  formData: {
-    init: Expression;
-    condition: Expression;
-    update: Expression;
-    initDataType?: string;
-    conditionDataType?: string;
-    updateDataType?: string;
-    childNodesExpanded?: boolean;
-  };
-  handleInputChange: (field: string, value: Expression | boolean) => void;
-}
-
-export const ForLoopNodeForm = ({
-  formData,
-  handleInputChange,
-}: ForLoopNodeFormProps) => {
-  const { t } = useTranslation();
-  const [tempInit, setTempInit] = useState<Expression>(formData.init || '');
-  const [tempCondition, setTempCondition] = useState<Expression>(formData.condition || '');
-  const [tempUpdate, setTempUpdate] = useState<Expression>(formData.update || '');
-  const [conditionsExpanded, setConditionsExpanded] = useState(true);
-  const [childNodesExpanded, setChildNodesExpanded] = useState(formData.childNodesExpanded ?? true);
-
-  const {
-    validateForLoopNodeForm,
-    setFieldTouched,
-    shouldShowFieldError,
-    getFieldError,
-    clearFieldError,
-    setFieldError,
-    validationState,
-  } = useFormValidation();
-
-  // Keep local state in sync with formData if formData changes
-  useEffect(() => {
-    setTempInit(formData.init || '');
-    setTempCondition(formData.condition || '');
-    setTempUpdate(formData.update || '');
-    setChildNodesExpanded(formData.childNodesExpanded ?? true);
-  }, [formData.init, formData.condition, formData.update, formData.childNodesExpanded]);
-
-  // Validate form when data changes, but only after user interaction
-  useEffect(() => {
-    // Only validate if at least one field has been touched by the user
-    const hasUserInteraction = Object.keys(validationState.touched).some(key =>
-      ['init', 'condition', 'update'].includes(key)
-    );
-
-    if (hasUserInteraction) {
-      // Add a small delay to give users time to type before showing validation errors
-      const timeoutId = setTimeout(() => {
-        validateForLoopNodeForm({
-          init: tempInit,
-          condition: tempCondition,
-          update: tempUpdate,
-          initDataType: formData.initDataType,
-          conditionDataType: formData.conditionDataType,
-          updateDataType: formData.updateDataType,
-        });
-      }, 500); // 500ms delay
-
-      return () => clearTimeout(timeoutId);
-    }
-  }, [tempInit, tempCondition, tempUpdate, formData.initDataType, formData.conditionDataType, formData.updateDataType, validateForLoopNodeForm, validationState.touched]);
-
-  const handleInitChange = useCallback((val: Expression) => {
-    // Mark the field as touched when user starts typing
-    setFieldTouched('init', true);
-
-    // Clear error when user starts typing
-    if (getFieldError('init')) {
-      clearFieldError('init');
-    }
-
-    setTempInit(val);
-    handleInputChange('init', val);
-  }, [handleInputChange, setFieldTouched, getFieldError, clearFieldError]);
-
-  const handleConditionChange = useCallback((val: Expression) => {
-    // Mark the field as touched when user starts typing
-    setFieldTouched('condition', true);
-
-    // Clear error when user starts typing
-    if (getFieldError('condition')) {
-      clearFieldError('condition');
-    }
-
-    setTempCondition(val);
-    handleInputChange('condition', val);
-  }, [handleInputChange, setFieldTouched, getFieldError, clearFieldError]);
-
-  const handleUpdateChange = useCallback((val: Expression) => {
-    // Mark the field as touched when user starts typing
-    setFieldTouched('update', true);
-
-    // Clear error when user starts typing
-    if (getFieldError('update')) {
-      clearFieldError('update');
-    }
-
-    setTempUpdate(val);
-    handleInputChange('update', val);
-  }, [handleInputChange, setFieldTouched, getFieldError, clearFieldError]);
-
-  // Handle field blur for validation
-  const handleFieldBlur = (fieldName: string) => {
-    setFieldTouched(fieldName, true);
-  };
-
-  // Toggle conditions section expansion
-  const toggleConditionsExpansion = () => {
-    setConditionsExpanded(!conditionsExpanded);
-  };
-
-  // Toggle child nodes section expansion
-  const toggleChildNodesExpansion = () => {
-    const newExpandedState = !childNodesExpanded;
-    setChildNodesExpanded(newExpandedState);
-    handleInputChange('childNodesExpanded', newExpandedState);
-  };
-
-  return (
-    <div>
-      <Stack spacing={2}>
-        {/* Collapsible Conditions Section Header */}
-        <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          onClick={toggleConditionsExpansion}
-          sx={{
-            cursor: 'pointer',
-            '&:hover': { bgcolor: 'action.hover' },
-            borderRadius: 2,
-            border: '1px solid #3a3a3a',
-            bgcolor: '#3a3a3a'
-          }}
-        >
-          <Typography variant="subtitle1" fontWeight="medium">
-            {t('forLoopNodeForm.conditions')}
-          </Typography>
-          <IconButton size="small" onClick={(e) => {
-            e.stopPropagation();
-            toggleConditionsExpansion();
-          }}>
-            {conditionsExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-          </IconButton>
-        </Box>
-
-        {/* Collapsible Conditions Content */}
-        <Collapse in={conditionsExpanded}>
-          <Stack spacing={2} sx={{ pl: 2 }}>
-            <Box>
-              <ExpressionInput
-                label={t('forLoopNodeForm.initialization')}
-                value={tempInit}
-                onChange={handleInitChange}
-                showDataTypeDropdown={true}
-                dataType={formData.initDataType || 'String'}
-                onDataTypeChange={(dataType) => {
-                  handleInputChange('initDataType', dataType);
-                  // Only re-validate if user has interacted with this field
-                  if (validationState.touched.init) {
-                    setTimeout(() => {
-                      validateForLoopNodeForm({
-                        ...formData,
-                        init: tempInit,
-                        condition: tempCondition,
-                        update: tempUpdate,
-                        initDataType: dataType,
-                      });
-                    }, 100);
-                  }
-                }}
-                onValidationChange={(isValid, errors) => {
-                  // Handle validation from ExpressionInput
-                  if (!isValid && errors.length > 0) {
-                    setFieldError('init', errors[0]);
-                  } else {
-                    clearFieldError('init');
-                  }
-                }}
-              />
-              <ValidationError
-                error={getFieldError('init')}
-                show={shouldShowFieldError('init')}
-              />
-            </Box>
-
-            <Box>
-              <ExpressionInput
-                label={t('forLoopNodeForm.condition')}
-                value={tempCondition}
-                onChange={handleConditionChange}
-                showDataTypeDropdown={true}
-                dataType={formData.conditionDataType || 'String'}
-                onDataTypeChange={(dataType) => {
-                  handleInputChange('conditionDataType', dataType);
-                  // Only re-validate if user has interacted with this field
-                  if (validationState.touched.condition) {
-                    setTimeout(() => {
-                      validateForLoopNodeForm({
-                        ...formData,
-                        init: tempInit,
-                        condition: tempCondition,
-                        update: tempUpdate,
-                        conditionDataType: dataType,
-                      });
-                    }, 100);
-                  }
-                }}
-                onValidationChange={(isValid, errors) => {
-                  // Handle validation from ExpressionInput
-                  if (!isValid && errors.length > 0) {
-                    setFieldError('condition', errors[0]);
-                  } else {
-                    clearFieldError('condition');
-                  }
-                }}
-              />
-              <ValidationError
-                error={getFieldError('condition')}
-                show={shouldShowFieldError('condition')}
-              />
-            </Box>
-
-            <Box>
-              <ExpressionInput
-                label={t('forLoopNodeForm.update')}
-                value={tempUpdate}
-                onChange={handleUpdateChange}
-                showDataTypeDropdown={true}
-                dataType={formData.updateDataType || 'String'}
-                onDataTypeChange={(dataType) => {
-                  handleInputChange('updateDataType', dataType);
-                  // Only re-validate if user has interacted with this field
-                  if (validationState.touched.update) {
-                    setTimeout(() => {
-                      validateForLoopNodeForm({
-                        ...formData,
-                        init: tempInit,
-                        condition: tempCondition,
-                        update: tempUpdate,
-                        updateDataType: dataType,
-                      });
-                    }, 100);
-                  }
-                }}
-                onValidationChange={(isValid, errors) => {
-                  // Handle validation from ExpressionInput
-                  if (!isValid && errors.length > 0) {
-                    setFieldError('update', errors[0]);
-                  } else {
-                    clearFieldError('update');
-                  }
-                }}
-              />
-              <ValidationError
-                error={getFieldError('update')}
-                show={shouldShowFieldError('update')}
-              />
-            </Box>
-          </Stack>
-        </Collapse>
-
-        {/* Collapsible Child Nodes Section Header */}
-        <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          onClick={toggleChildNodesExpansion}
-          sx={{
-            cursor: 'pointer',
-            '&:hover': { bgcolor: 'action.hover' },
-            borderRadius: 2,
-            border: '1px solid #3a3a3a',
-            bgcolor: '#3a3a3a'
-          }}
-        >
-          <Typography variant="subtitle1" fontWeight="medium">
-            {t('forLoopNodeForm.childNodes')}
-          </Typography>
-          <IconButton size="small" onClick={(e) => {
-            e.stopPropagation();
-            toggleChildNodesExpansion();
-          }}>
-            {childNodesExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-          </IconButton>
-        </Box>
-
-        {/* Collapsible Child Nodes Content */}
-        <Collapse in={childNodesExpanded}>
-          <Stack spacing={2} sx={{ pl: 2 }}>
-            <Typography variant="body2" color="text.secondary">
-              {t('forLoopNodeForm.childNodesDescription')}
-            </Typography>
-          </Stack>
-        </Collapse>
-      </Stack>
-    </div>
-  );
-};
+import { useEffect, useState, useCallback } from 'react';
+import ExpressionInput from '../../atoms/ExpressionInput';
+import { useTranslation } from 'react-i18next';
+import { Expression } from '../../types/ndoe-form-types';
+import { useFormValidation } from '../../hooks/useFormValidation';
+import ValidationError from '../../atoms/ValidationError';
+import { Box, Stack, Collapse, Typography, IconButton } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+
+interface ForLoopNodeFormProps {
+  formData: {
+    init: Expression;
+    condition: Expression;
+    update: Expression;
+    initDataType?: string;
+    conditionDataType?: string;
+    updateDataType?: string;
+    childNodesExpanded?: boolean;
+  };
+  handleInputChange: (field: string, value: Expression | boolean) => void;
+}
+
+export const ForLoopNodeForm = ({
+  formData,
+  handleInputChange,
+}: ForLoopNodeFormProps) => {
+  const { t } = useTranslation();
+  const [tempInit, setTempInit] = useState<Expression>(formData.init || '');
+  const [tempCondition, setTempCondition] = useState<Expression>(formData.condition || '');
+  const [tempUpdate, setTempUpdate] = useState<Expression>(formData.update || '');
+  const [conditionsExpanded, setConditionsExpanded] = useState(true);
+  const [childNodesExpanded, setChildNodesExpanded] = useState(formData.childNodesExpanded ?? true);
+
+  const {
+    validateForLoopNodeForm,
+    setFieldTouched,
+    shouldShowFieldError,
+    getFieldError,
+    clearFieldError,
+    setFieldError,
+    validationState,
+  } = useFormValidation();
+
+  // Keep local state in sync with formData if formData changes
+  useEffect(() => {
+    setTempInit(formData.init || '');
+    setTempCondition(formData.condition || '');
+    setTempUpdate(formData.update || '');
+    setChildNodesExpanded(formData.childNodesExpanded ?? true);
+  }, [formData.init, formData.condition, formData.update, formData.childNodesExpanded]);
+
+  // Validate form when data changes, but only after user interaction
+  useEffect(() => {
+    // Only validate if at least one field has been touched by the user
+    const hasUserInteraction = Object.keys(validationState.touched).some(key =>
+      ['init', 'condition', 'update'].includes(key)
+    );
+
+    if (hasUserInteraction) {
+      // Add a small delay to give users time to type before showing validation errors
+      const timeoutId = setTimeout(() => {
+        validateForLoopNodeForm({
+          init: tempInit,
+          condition: tempCondition,
+          update: tempUpdate,
+          initDataType: formData.initDataType,
+          conditionDataType: formData.conditionDataType,
+          updateDataType: formData.updateDataType,
+        });
+      }, 500); // 500ms delay
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [tempInit, tempCondition, tempUpdate, formData.initDataType, formData.conditionDataType, formData.updateDataType, validateForLoopNodeForm, validationState.touched]);
+
+  const handleInitChange = useCallback((val: Expression) => {
+    // Mark the field as touched when user starts typing
+    setFieldTouched('init', true);
+
+    // Clear error when user starts typing
+    if (getFieldError('init')) {
+      clearFieldError('init');
+    }
+
+    setTempInit(val);
+    handleInputChange('init', val);
+  }, [handleInputChange, setFieldTouched, getFieldError, clearFieldError]);
+
+  const handleConditionChange = useCallback((val: Expression) => {
+    // Mark the field as touched when user starts typing
+    setFieldTouched('condition', true);
+
+    // Clear error when user starts typing
+    if (getFieldError('condition')) {
+      clearFieldError('condition');
+    }
+
+    setTempCondition(val);
+    handleInputChange('condition', val);
+  }, [handleInputChange, setFieldTouched, getFieldError, clearFieldError]);
+
+  const handleUpdateChange = useCallback((val: Expression) => {
+    // Mark the field as touched when user starts typing
+    setFieldTouched('update', true);
+
+    // Clear error when user starts typing
+    if (getFieldError('update')) {
+      clearFieldError('update');
+    }
+
+    setTempUpdate(val);
+    handleInputChange('update', val);
+  }, [handleInputChange, setFieldTouched, getFieldError, clearFieldError]);
+
+  // Handle field blur for validation
+  const handleFieldBlur = (fieldName: string) => {
+    setFieldTouched(fieldName, true);
+  };
+
+  // Toggle conditions section expansion
+  const toggleConditionsExpansion = () => {
+    setConditionsExpanded(!conditionsExpanded);
+  };
+
+  // Toggle child nodes section expansion
+  const toggleChildNodesExpansion = () => {
+    const newExpandedState = !childNodesExpanded;
+    setChildNodesExpanded(newExpandedState);
+    handleInputChange('childNodesExpanded', newExpandedState);
+  };
+
+  return (
+    <div>
+      <Stack spacing={2}>
+        {/* Collapsible Conditions Section Header */}
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          onClick={toggleConditionsExpansion}
+          sx={{
+            cursor: 'pointer',
+            '&:hover': { bgcolor: 'action.hover' },
+            borderRadius: 2,
+            border: '1px solid #3a3a3a',
+            bgcolor: '#3a3a3a'
+          }}
+        >
+          <Typography variant="subtitle1" fontWeight="medium">
+            {t('forLoopNodeForm.conditions')}
+          </Typography>
+          <IconButton size="small" onClick={(e) => {
+            e.stopPropagation();
+            toggleConditionsExpansion();
+          }}>
+            {conditionsExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+          </IconButton>
+        </Box>
+
+        {/* Collapsible Conditions Content */}
+        <Collapse in={conditionsExpanded}>
+          <Stack spacing={2} sx={{ pl: 2 }}>
+            <Box>
+              <ExpressionInput
+                label={t('forLoopNodeForm.initialization')}
+                value={tempInit}
+                onChange={handleInitChange}
+                showDataTypeDropdown={true}
+                dataType={formData.initDataType || 'String'}
+                onDataTypeChange={(dataType) => {
+                  handleInputChange('initDataType', dataType);
+                  // Only re-validate if user has interacted with this field
+                  if (validationState.touched.init) {
+                    setTimeout(() => {
+                      validateForLoopNodeForm({
+                        ...formData,
+                        init: tempInit,
+                        condition: tempCondition,
+                        update: tempUpdate,
+                        initDataType: dataType,
+                      });
+                    }, 100);
+                  }
+                }}
+                onValidationChange={(isValid, errors) => {
+                  // Handle validation from ExpressionInput
+                  if (!isValid && errors.length > 0) {
+                    setFieldError('init', errors[0]);
+                  } else {
+                    clearFieldError('init');
+                  }
+                }}
+              />
+              <ValidationError
+                error={getFieldError('init')}
+                show={shouldShowFieldError('init')}
+              />
+            </Box>
+
+            <Box>
+              <ExpressionInput
+                label={t('forLoopNodeForm.condition')}
+                value={tempCondition}
+                onChange={handleConditionChange}
+                showDataTypeDropdown={true}
+                dataType={formData.conditionDataType || 'String'}
+                onDataTypeChange={(dataType) => {
+                  handleInputChange('conditionDataType', dataType);
+                  // Only re-validate if user has interacted with this field
+                  if (validationState.touched.condition) {
+                    setTimeout(() => {
+                      validateForLoopNodeForm({
+                        ...formData,
+                        init: tempInit,
+                        condition: tempCondition,
+                        update: tempUpdate,
+                        conditionDataType: dataType,
+                      });
+                    }, 100);
+                  }
+                }}
+                onValidationChange={(isValid, errors) => {
+                  // Handle validation from ExpressionInput
+                  if (!isValid && errors.length > 0) {
+                    setFieldError('condition', errors[0]);
+                  } else {
+                    clearFieldError('condition');
+                  }
+                }}
+              />
+              <ValidationError
+                error={getFieldError('condition')}
+                show={shouldShowFieldError('condition')}
+              />
+            </Box>
+
+            <Box>
+              <ExpressionInput
+                label={t('forLoopNodeForm.update')}
+                value={tempUpdate}
+                onChange={handleUpdateChange}
+                showDataTypeDropdown={true}
+                dataType={formData.updateDataType || 'String'}
+                onDataTypeChange={(dataType) => {
+                  handleInputChange('updateDataType', dataType);
+                  // Only re-validate if user has interacted with this field
+                  if (validationState.touched.update) {
+                    setTimeout(() => {
+                      validateForLoopNodeForm({
+                        ...formData,
+                        init: tempInit,
+                        condition: tempCondition,
+                        update: tempUpdate,
+                        updateDataType: dataType,
+                      });
+                    }, 100);
+                  }
+                }}
+                onValidationChange={(isValid, errors) => {
+                  // Handle validation from ExpressionInput
+                  if (!isValid && errors.length > 0) {
+                    setFieldError('update', errors[0]);
+                  } else {
+                    clearFieldError('update');
+                  }
+                }}
+              />
+              <ValidationError
+                error={getFieldError('update')}
+                show={shouldShowFieldError('update')}
+              />
+            </Box>
+          </Stack>
+        </Collapse>
+
+        {/* Collapsible Child Nodes Section Header */}
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          onClick={toggleChildNodesExpansion}
+          sx={{
+            cursor: 'pointer',
+            '&:hover': { bgcolor: 'action.hover' },
+            borderRadius: 2,
+            border: '1px solid #3a3a3a',
+            bgcolor: '#3a3a3a'
+          }}
+        >
+          <Typography variant="subtitle1" fontWeight="medium">
+            {t('forLoopNodeForm.childNodes')}
+          </Typography>
+          <IconButton size="small" onClick={(e) => {
+            e.stopPropagation();
+            toggleChildNodesExpansion();
+          }}>
+            {childNodesExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+          </IconButton>
+        </Box>
+
+        {/* Collapsible Child Nodes Content */}
+        <Collapse in={childNodesExpanded}>
+          <Stack spacing={2} sx={{ pl: 2 }}>
+            <Typography variant="body2" color="text.secondary">
+              {t('forLoopNodeForm.childNodesDescription')}
+            </Typography>
+          </Stack>
+        </Collapse>
+      </Stack>
+    </div>
+  );
+};