@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,383 +1,383 @@
-import {
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  Stack,
-  TextField,
-  Box,
-  Collapse,
-  Typography,
-  IconButton,
-} from '@mui/material';
-import React, { useState, useEffect } from 'react';
-import { produce } from 'immer';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import FunctionForm from './FunctionForm';
-import { IfNodeForm } from './IfNodeForm';
-import { LetNodeForm } from './LetNodeForm';
-import { SetNodeForm } from './SetNodeForm';
-import { ReturnNodeForm } from './ReturnNodeForm';
-import { LoopNodeForm } from './LoopNode';
-import { CallForm } from './CallForm';
-import { SwitchNodeForm } from './SwitchNodeForm';
-import { useTranslation } from 'react-i18next';
-import { ForLoopNodeForm } from './ForLoopNode';
-import ApiForm from './ApiForm';
-import GraphQLForm from './GraphQLForm';
-
-interface NodeFormProps {
-  data: any;
-  setNodeData: (data: any) => void;
-}
-
-export const NodeForm: React.FC<NodeFormProps> = ({
-  data,
-  setNodeData,
-}) => {
-  const { t } = useTranslation();
-  const formData = data.formData || {}; // Default to an empty object if formData is undefined
-  const [childNodesExpanded, setChildNodesExpanded] = useState(formData.childNodesExpanded ?? true);
-
-  // Keep local state in sync with formData if formData changes
-  useEffect(() => {
-    setChildNodesExpanded(formData.childNodesExpanded ?? true);
-  }, [formData.childNodesExpanded]);
-
-  // Handle input changes, storing them in `formData`
-  const handleInputChange = (key: string, value: any) => {
-    setNodeData(
-      produce(data, (draft: any) => {
-        draft.formData = draft.formData || {};
-        draft.formData[key] = value;
-      }),
-    );
-  };
-
-  // Toggle child nodes section expansion
-  const toggleChildNodesExpansion = () => {
-    const newExpandedState = !childNodesExpanded;
-    setChildNodesExpanded(newExpandedState);
-    handleInputChange('childNodesExpanded', newExpandedState);
-  };
-  const handleMultipleInputChanges = (changes: { [key: string]: any }) => {
-    setNodeData(
-      produce(data, (draft: any) => {
-        draft.formData = draft.formData || {};
-        Object.keys(changes).forEach((key) => {
-          draft.formData[key] = changes[key];
-        });
-      }),
-    );
-  };
-  const renderStack = (children: React.ReactNode) => (
-    <Stack spacing={2} sx={{ py: 2 }}>
-      {children}
-    </Stack>
-  );
-
-  switch (data.type) {
-    case 'call':
-      return renderStack(
-        <CallForm
-          formData={formData}
-          handleMultipleInputChanges={handleMultipleInputChanges}
-        />,
-      );
-    case 'function':
-      return renderStack(
-        <FunctionForm
-          formData={formData}
-          handleInputChange={handleInputChange}
-          handleMultipleInputChanges={handleMultipleInputChanges}
-        />,
-      );
-    case 'branch':
-      return renderStack(
-        <IfNodeForm
-          formData={formData}
-          handleInputChange={handleInputChange}
-        />,
-      );
-
-    case 'let':
-      return renderStack(
-        <LetNodeForm
-          formData={formData}
-          handleInputChange={handleInputChange}
-        />,
-      );
-    case 'try':
-      return renderStack(
-        <>
-          {/* 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('nodeForm.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('nodeForm.childNodesDescription')}
-              </Typography>
-            </Stack>
-          </Collapse>
-        </>,
-      );
-    case 'catch':
-      return renderStack(
-        <>
-          {/* 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('nodeForm.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('nodeForm.childNodesDescription')}
-              </Typography>
-            </Stack>
-          </Collapse>
-        </>,
-      );
-    case 'loop':
-      return renderStack(
-        <LoopNodeForm
-          formData={formData}
-          handleInputChange={handleInputChange}
-        />,
-      );
-    case 'forLoop':
-      return renderStack(
-        <ForLoopNodeForm
-          formData={formData}
-          handleInputChange={handleInputChange}
-        />,
-      );
-    case 'set':
-      return renderStack(
-        <SetNodeForm
-          formData={formData}
-          handleInputChange={handleInputChange}
-        />,
-      );
-    case 'return':
-      return renderStack(
-        <ReturnNodeForm
-          formData={formData}
-          handleInputChange={handleInputChange}
-        />,
-      );
-
-    case 'parallel':
-      return renderStack(
-        <>
-          <TextField
-            label={t('nodeForm.executionCount')}
-            type="number"
-            value={formData.executionCount ?? ''}
-            onChange={(e) =>
-              handleInputChange('executionCount', Number(e.target.value))
-            }
-            size="small"
-          />
-          <TextField
-            label={t('nodeForm.maxThreads')}
-            type="number"
-            value={formData.maxThreads ?? ''}
-            onChange={(e) =>
-              handleInputChange('maxThreads', Number(e.target.value))
-            }
-            size="small"
-          />
-          <TextField
-            label={t('nodeForm.timeout')}
-            type="number"
-            value={formData.timeout ?? ''}
-            onChange={(e) =>
-              handleInputChange('timeout', Number(e.target.value))
-            }
-            size="small"
-          />
-
-          {/* 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('nodeForm.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('nodeForm.childNodesDescription')}
-              </Typography>
-            </Stack>
-          </Collapse>
-        </>,
-      );
-    case 'switch':
-      return renderStack(
-        <SwitchNodeForm
-          formData={formData}
-          handleInputChange={handleInputChange}
-        />,
-      );
-
-    case 'group':
-      return renderStack(
-        <>
-          <TextField
-            label={t('nodeForm.groupName')}
-            value={formData.groupName || ''}
-            onChange={(e) => handleInputChange('groupName', e.target.value)}
-            size="small"
-          />
-          <TextField
-            label={t('nodeForm.groupSize')}
-            type="number"
-            value={formData.groupSize ?? ''}
-            onChange={(e) =>
-              handleInputChange('groupSize', Number(e.target.value))
-            }
-            size="small"
-          />
-          <TextField
-            label={t('nodeForm.description')}
-            value={formData.description || ''}
-            onChange={(e) => handleInputChange('description', e.target.value)}
-            size="small"
-          />
-
-          {/* 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('nodeForm.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('nodeForm.childNodesDescription')}
-              </Typography>
-            </Stack>
-          </Collapse>
-        </>,
-      );
-    case 'emptyNode':
-      return (
-        <div>
-          {t('nodeForm.noData')}
-        </div>
-      );
-    case 'api':
-      return renderStack(
-        <ApiForm
-          formData={formData}
-          handleInputChange={handleInputChange}
-          handleMultipleInputChanges={handleMultipleInputChanges}
-        />,
-      );
-    case 'graphql':
-      return renderStack(
-        <GraphQLForm
-          formData={formData}
-          handleInputChange={handleInputChange}
-          handleMultipleInputChanges={handleMultipleInputChanges}
-        />,
-      );
-    case 'rest':
-      return <div>{t('nodeForm.restApi')}</div>;
-    default:
-      return (
-        <div>
-          {t('nodeForm.unsupportedType', { type: data.type })}
-        </div>
-      );
-  }
-};
-
-export default NodeForm;
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  Stack,
+  TextField,
+  Box,
+  Collapse,
+  Typography,
+  IconButton,
+} from '@mui/material';
+import React, { useState, useEffect } from 'react';
+import { produce } from 'immer';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import FunctionForm from './FunctionForm';
+import { IfNodeForm } from './IfNodeForm';
+import { LetNodeForm } from './LetNodeForm';
+import { SetNodeForm } from './SetNodeForm';
+import { ReturnNodeForm } from './ReturnNodeForm';
+import { LoopNodeForm } from './LoopNode';
+import { CallForm } from './CallForm';
+import { SwitchNodeForm } from './SwitchNodeForm';
+import { useTranslation } from 'react-i18next';
+import { ForLoopNodeForm } from './ForLoopNode';
+import ApiForm from './ApiForm';
+import GraphQLForm from './GraphQLForm';
+
+interface NodeFormProps {
+  data: any;
+  setNodeData: (data: any) => void;
+}
+
+export const NodeForm: React.FC<NodeFormProps> = ({
+  data,
+  setNodeData,
+}) => {
+  const { t } = useTranslation();
+  const formData = data.formData || {}; // Default to an empty object if formData is undefined
+  const [childNodesExpanded, setChildNodesExpanded] = useState(formData.childNodesExpanded ?? true);
+
+  // Keep local state in sync with formData if formData changes
+  useEffect(() => {
+    setChildNodesExpanded(formData.childNodesExpanded ?? true);
+  }, [formData.childNodesExpanded]);
+
+  // Handle input changes, storing them in `formData`
+  const handleInputChange = (key: string, value: any) => {
+    setNodeData(
+      produce(data, (draft: any) => {
+        draft.formData = draft.formData || {};
+        draft.formData[key] = value;
+      }),
+    );
+  };
+
+  // Toggle child nodes section expansion
+  const toggleChildNodesExpansion = () => {
+    const newExpandedState = !childNodesExpanded;
+    setChildNodesExpanded(newExpandedState);
+    handleInputChange('childNodesExpanded', newExpandedState);
+  };
+  const handleMultipleInputChanges = (changes: { [key: string]: any }) => {
+    setNodeData(
+      produce(data, (draft: any) => {
+        draft.formData = draft.formData || {};
+        Object.keys(changes).forEach((key) => {
+          draft.formData[key] = changes[key];
+        });
+      }),
+    );
+  };
+  const renderStack = (children: React.ReactNode) => (
+    <Stack spacing={2} sx={{ py: 2 }}>
+      {children}
+    </Stack>
+  );
+
+  switch (data.type) {
+    case 'call':
+      return renderStack(
+        <CallForm
+          formData={formData}
+          handleMultipleInputChanges={handleMultipleInputChanges}
+        />,
+      );
+    case 'function':
+      return renderStack(
+        <FunctionForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+          handleMultipleInputChanges={handleMultipleInputChanges}
+        />,
+      );
+    case 'branch':
+      return renderStack(
+        <IfNodeForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+        />,
+      );
+
+    case 'let':
+      return renderStack(
+        <LetNodeForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+        />,
+      );
+    case 'try':
+      return renderStack(
+        <>
+          {/* 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('nodeForm.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('nodeForm.childNodesDescription')}
+              </Typography>
+            </Stack>
+          </Collapse>
+        </>,
+      );
+    case 'catch':
+      return renderStack(
+        <>
+          {/* 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('nodeForm.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('nodeForm.childNodesDescription')}
+              </Typography>
+            </Stack>
+          </Collapse>
+        </>,
+      );
+    case 'loop':
+      return renderStack(
+        <LoopNodeForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+        />,
+      );
+    case 'forLoop':
+      return renderStack(
+        <ForLoopNodeForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+        />,
+      );
+    case 'set':
+      return renderStack(
+        <SetNodeForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+        />,
+      );
+    case 'return':
+      return renderStack(
+        <ReturnNodeForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+        />,
+      );
+
+    case 'parallel':
+      return renderStack(
+        <>
+          <TextField
+            label={t('nodeForm.executionCount')}
+            type="number"
+            value={formData.executionCount ?? ''}
+            onChange={(e) =>
+              handleInputChange('executionCount', Number(e.target.value))
+            }
+            size="small"
+          />
+          <TextField
+            label={t('nodeForm.maxThreads')}
+            type="number"
+            value={formData.maxThreads ?? ''}
+            onChange={(e) =>
+              handleInputChange('maxThreads', Number(e.target.value))
+            }
+            size="small"
+          />
+          <TextField
+            label={t('nodeForm.timeout')}
+            type="number"
+            value={formData.timeout ?? ''}
+            onChange={(e) =>
+              handleInputChange('timeout', Number(e.target.value))
+            }
+            size="small"
+          />
+
+          {/* 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('nodeForm.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('nodeForm.childNodesDescription')}
+              </Typography>
+            </Stack>
+          </Collapse>
+        </>,
+      );
+    case 'switch':
+      return renderStack(
+        <SwitchNodeForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+        />,
+      );
+
+    case 'group':
+      return renderStack(
+        <>
+          <TextField
+            label={t('nodeForm.groupName')}
+            value={formData.groupName || ''}
+            onChange={(e) => handleInputChange('groupName', e.target.value)}
+            size="small"
+          />
+          <TextField
+            label={t('nodeForm.groupSize')}
+            type="number"
+            value={formData.groupSize ?? ''}
+            onChange={(e) =>
+              handleInputChange('groupSize', Number(e.target.value))
+            }
+            size="small"
+          />
+          <TextField
+            label={t('nodeForm.description')}
+            value={formData.description || ''}
+            onChange={(e) => handleInputChange('description', e.target.value)}
+            size="small"
+          />
+
+          {/* 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('nodeForm.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('nodeForm.childNodesDescription')}
+              </Typography>
+            </Stack>
+          </Collapse>
+        </>,
+      );
+    case 'emptyNode':
+      return (
+        <div>
+          {t('nodeForm.noData')}
+        </div>
+      );
+    case 'api':
+      return renderStack(
+        <ApiForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+          handleMultipleInputChanges={handleMultipleInputChanges}
+        />,
+      );
+    case 'graphql':
+      return renderStack(
+        <GraphQLForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+          handleMultipleInputChanges={handleMultipleInputChanges}
+        />,
+      );
+    case 'rest':
+      return <div>{t('nodeForm.restApi')}</div>;
+    default:
+      return (
+        <div>
+          {t('nodeForm.unsupportedType', { type: data.type })}
+        </div>
+      );
+  }
+};
+
+export default NodeForm;