@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/components/CreateFunctionModal.tsx

@@ -1,265 +1,265 @@
-import { useState, useMemo, useCallback, useEffect, Fragment, memo } from 'react';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-import Stack from '@mui/material/Stack';
-import { Box } from '@mui/material';
-import Tooltip from '@mui/material/Tooltip';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import MenuItem from '@mui/material/MenuItem';
-import { generateFunctionCode, ARITHMETIC_OPERATORS, FunctionArgument } from '../utils/functionGenerator';
-import { useTranslation } from 'react-i18next';
-import FunctionModalTooltip from './FunctionModalTooltip';
-
-interface CreateFunctionModalProps {
-    open: boolean;
-    onClose: () => void;
-    onCreate?: (func: { name: string; args: string[]; code: string }) => void;
-    initialValues?: { name: string; args: string[]; code: string };
-    theme?: {
-        backgroundColor?: string;
-        textColor?: string;
-        accentColor?: string;
-    };
-}
-
-const CreateFunctionModal = ({
-    open,
-    onClose,
-    onCreate,
-    initialValues,
-    theme = {
-        backgroundColor: '#232323',
-        textColor: '#fff',
-        accentColor: '#6c47ff'
-    }
-}: CreateFunctionModalProps) => {
-    const { t } = useTranslation();
-    const [name, setName] = useState(initialValues?.name || '');
-    const [argCount, setArgCount] = useState(initialValues?.args?.length || 2);
-    const [args, setArgs] = useState<FunctionArgument[]>(
-        initialValues?.args
-            ? initialValues.args.map((n, i) => ({ name: n, operator: '+' }))
-            : Array.from({ length: 2 }, (_, i) => ({ name: String.fromCharCode(97 + i), operator: '+' }))
-    );
-
-    useEffect(() => {
-        setName(initialValues?.name || '');
-        const count = initialValues?.args?.length || 2;
-        setArgCount(count);
-        setArgs(
-            initialValues?.args
-                ? initialValues.args.map((n, i) => ({ name: n, operator: '+' }))
-                : Array.from({ length: count }, (_, i) => ({ name: String.fromCharCode(97 + i), operator: '+' }))
-        );
-    }, [initialValues, open]);
-
-    useEffect(() => {
-        setArgs(prevArgs => {
-            const newArgs = [...prevArgs];
-            if (argCount > prevArgs.length) {
-                for (let i = prevArgs.length; i < argCount; i++) {
-                    newArgs.push({ name: String.fromCharCode(97 + i), operator: '+' });
-                }
-            } else if (argCount < prevArgs.length) {
-                newArgs.length = argCount;
-            }
-            return newArgs;
-        });
-    }, [argCount]);
-
-    const handleArgNameChange = useCallback((idx: number, value: string) => {
-        setArgs(args => args.map((arg, i) => i === idx ? { ...arg, name: value } : arg));
-    }, []);
-
-    const handleArgOperatorChange = useCallback((idx: number, value: string) => {
-        setArgs(args => args.map((arg, i) => i === idx ? { ...arg, operator: value } : arg));
-    }, []);
-
-    const handleSubmit = useCallback(() => {
-        if (name.trim()) {
-            const code = generateFunctionCode(args);
-            const argNames = args.map(arg => arg.name);
-            onCreate?.({ name: name.trim(), args: argNames, code });
-            setName('');
-            setArgCount(2);
-            setArgs(Array.from({ length: 2 }, (_, i) => ({ name: String.fromCharCode(97 + i), operator: '+' })));
-            onClose();
-        }
-    }, [name, args, onCreate, onClose]);
-
-    const handleClose = useCallback(() => {
-        setName('');
-        setArgCount(2);
-        setArgs(Array.from({ length: 2 }, (_, i) => ({ name: String.fromCharCode(97 + i), operator: '+' })));
-        onClose();
-    }, [onClose]);
-
-    // Memoize the initial args array creation
-    const initialArgsArray = useMemo(() => Array.from({ length: 2 }, (_, i) => ({ name: String.fromCharCode(97 + i), operator: '+' })), []);
-
-    // Memoize the argument count menu items
-    const argCountMenuItems = useMemo(() => (
-        [...Array(10)].map((_, i) => (
-            <MenuItem key={i + 1} value={i + 1} sx={{ backgroundColor: '#232323', color: '#fff' }}>{i + 1}</MenuItem>
-        ))
-    ), []);
-
-    // Memoize the operator menu items
-    const operatorMenuItems = useMemo(() => (
-        ARITHMETIC_OPERATORS.map(op => (
-            <MenuItem key={op} value={op} sx={{ backgroundColor: '#232323', color: '#fff' }}>{op}</MenuItem>
-        ))
-    ), []);
-
-    return (
-        <Dialog
-            open={open}
-            onClose={handleClose}
-            maxWidth="md"
-            fullWidth
-            PaperProps={{
-                style: {
-                    background: theme.backgroundColor,
-                    color: theme.textColor,
-                    minWidth: 700
-                }
-            }}
-        >
-            <DialogTitle sx={{
-                color: theme.textColor,
-                background: theme.backgroundColor,
-                display: 'flex',
-                alignItems: 'center',
-                gap: 1
-            }}>
-                {initialValues ? t('createFunctionModal.editTitle') : t('createFunctionModal.title')}
-                <Tooltip
-                    title={<FunctionModalTooltip backgroundColor={theme.backgroundColor || '#232323'} />}
-                    placement="right"
-                    arrow
-                >
-                    <InfoOutlinedIcon sx={{ color: '#aaa', cursor: 'pointer', fontSize: 20 }} />
-                </Tooltip>
-            </DialogTitle>
-            <DialogContent sx={{ background: theme.backgroundColor, mt: 2 }}>
-                <Stack spacing={2}>
-                    <TextField
-                        label={t('createFunctionModal.functionName')}
-                        style={{ marginTop: '10px' }}
-                        value={name}
-                        onChange={e => setName(e.target.value)}
-                        fullWidth
-                        InputLabelProps={{ style: { color: '#aaa' } }}
-                        InputProps={{ style: { color: theme.textColor, background: theme.backgroundColor } }}
-                        variant="outlined"
-                    />
-                    <TextField
-                        select
-                        label={t('createFunctionModal.numberOfArguments')}
-                        value={argCount}
-                        onChange={e => setArgCount(Number(e.target.value))}
-                        fullWidth
-                        InputLabelProps={{ style: { color: '#aaa' } }}
-                        InputProps={{ style: { color: theme.textColor, background: theme.backgroundColor } }}
-                        variant="outlined"
-                        size="small"
-                        sx={{ width: 180 }}
-                        SelectProps={{
-                            MenuProps: {
-                                PaperProps: {
-                                    sx: {
-                                        backgroundColor: theme.backgroundColor,
-                                        color: theme.textColor,
-                                    },
-                                },
-                            },
-                        }}
-                    >
-                        {argCountMenuItems}
-                    </TextField>
-                    <Box>
-                        <Stack direction="row" spacing={1} alignItems="center" sx={{ width: '100%', flexWrap: 'wrap' }}>
-                            {args.map((arg, idx) => (
-                                <Fragment key={idx}>
-                                    <TextField
-                                        value={arg.name}
-                                        onChange={e => handleArgNameChange(idx, e.target.value)}
-                                        InputLabelProps={{ style: { color: '#aaa', fontSize: 12 } }}
-                                        InputProps={{
-                                            style: {
-                                                color: theme.textColor,
-                                                background: theme.backgroundColor,
-                                                fontSize: 13,
-                                                padding: 2
-                                            }
-                                        }}
-                                        variant="outlined"
-                                        size="small"
-                                        sx={{ width: 60, minWidth: 40 }}
-                                    />
-                                    {idx < args.length - 1 && (
-                                        <TextField
-                                            select
-                                            value={args[idx + 1].operator}
-                                            onChange={e => handleArgOperatorChange(idx + 1, e.target.value)}
-                                            InputLabelProps={{ style: { color: '#aaa', fontSize: 12 } }}
-                                            InputProps={{
-                                                style: {
-                                                    color: theme.textColor,
-                                                    background: theme.backgroundColor,
-                                                    fontSize: 13,
-                                                    padding: 2
-                                                }
-                                            }}
-                                            variant="outlined"
-                                            size="small"
-                                            sx={{ width: 60, minWidth: 50 }}
-                                            SelectProps={{
-                                                MenuProps: {
-                                                    PaperProps: {
-                                                        sx: {
-                                                            backgroundColor: theme.backgroundColor,
-                                                            color: theme.textColor,
-                                                        },
-                                                    },
-                                                },
-                                            }}
-                                        >
-                                            {operatorMenuItems}
-                                        </TextField>
-                                    )}
-                                </Fragment>
-                            ))}
-                        </Stack>
-                    </Box>
-                    <Box sx={{ mt: 2, color: '#aaa', fontFamily: 'monospace', fontSize: 14 }}>
-                        <b>{t('createFunctionModal.generatedCode')}</b> {generateFunctionCode(args)}
-                    </Box>
-                </Stack>
-            </DialogContent>
-            <DialogActions sx={{ background: theme.backgroundColor }}>
-                <Button
-                    onClick={handleClose}
-                    color="secondary"
-                    sx={{ color: theme.textColor }}
-                >
-                    {t('createFunctionModal.buttons.cancel')}
-                </Button>
-                <Button
-                    onClick={handleSubmit}
-                    color="primary"
-                    variant="contained"
-                    sx={{ background: theme.accentColor, color: theme.textColor }}
-                >
-                    {initialValues ? t('createFunctionModal.buttons.save') : t('createFunctionModal.buttons.create')}
-                </Button>
-            </DialogActions>
-        </Dialog>
-    );
-};
-
+import { useState, useMemo, useCallback, useEffect, Fragment, memo } from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import { Box } from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import MenuItem from '@mui/material/MenuItem';
+import { generateFunctionCode, ARITHMETIC_OPERATORS, FunctionArgument } from '../utils/functionGenerator';
+import { useTranslation } from 'react-i18next';
+import FunctionModalTooltip from './FunctionModalTooltip';
+
+interface CreateFunctionModalProps {
+    open: boolean;
+    onClose: () => void;
+    onCreate?: (func: { name: string; args: string[]; code: string }) => void;
+    initialValues?: { name: string; args: string[]; code: string };
+    theme?: {
+        backgroundColor?: string;
+        textColor?: string;
+        accentColor?: string;
+    };
+}
+
+const CreateFunctionModal = ({
+    open,
+    onClose,
+    onCreate,
+    initialValues,
+    theme = {
+        backgroundColor: '#232323',
+        textColor: '#fff',
+        accentColor: '#6c47ff'
+    }
+}: CreateFunctionModalProps) => {
+    const { t } = useTranslation();
+    const [name, setName] = useState(initialValues?.name || '');
+    const [argCount, setArgCount] = useState(initialValues?.args?.length || 2);
+    const [args, setArgs] = useState<FunctionArgument[]>(
+        initialValues?.args
+            ? initialValues.args.map((n, i) => ({ name: n, operator: '+' }))
+            : Array.from({ length: 2 }, (_, i) => ({ name: String.fromCharCode(97 + i), operator: '+' }))
+    );
+
+    useEffect(() => {
+        setName(initialValues?.name || '');
+        const count = initialValues?.args?.length || 2;
+        setArgCount(count);
+        setArgs(
+            initialValues?.args
+                ? initialValues.args.map((n, i) => ({ name: n, operator: '+' }))
+                : Array.from({ length: count }, (_, i) => ({ name: String.fromCharCode(97 + i), operator: '+' }))
+        );
+    }, [initialValues, open]);
+
+    useEffect(() => {
+        setArgs(prevArgs => {
+            const newArgs = [...prevArgs];
+            if (argCount > prevArgs.length) {
+                for (let i = prevArgs.length; i < argCount; i++) {
+                    newArgs.push({ name: String.fromCharCode(97 + i), operator: '+' });
+                }
+            } else if (argCount < prevArgs.length) {
+                newArgs.length = argCount;
+            }
+            return newArgs;
+        });
+    }, [argCount]);
+
+    const handleArgNameChange = useCallback((idx: number, value: string) => {
+        setArgs(args => args.map((arg, i) => i === idx ? { ...arg, name: value } : arg));
+    }, []);
+
+    const handleArgOperatorChange = useCallback((idx: number, value: string) => {
+        setArgs(args => args.map((arg, i) => i === idx ? { ...arg, operator: value } : arg));
+    }, []);
+
+    const handleSubmit = useCallback(() => {
+        if (name.trim()) {
+            const code = generateFunctionCode(args);
+            const argNames = args.map(arg => arg.name);
+            onCreate?.({ name: name.trim(), args: argNames, code });
+            setName('');
+            setArgCount(2);
+            setArgs(Array.from({ length: 2 }, (_, i) => ({ name: String.fromCharCode(97 + i), operator: '+' })));
+            onClose();
+        }
+    }, [name, args, onCreate, onClose]);
+
+    const handleClose = useCallback(() => {
+        setName('');
+        setArgCount(2);
+        setArgs(Array.from({ length: 2 }, (_, i) => ({ name: String.fromCharCode(97 + i), operator: '+' })));
+        onClose();
+    }, [onClose]);
+
+    // Memoize the initial args array creation
+    const initialArgsArray = useMemo(() => Array.from({ length: 2 }, (_, i) => ({ name: String.fromCharCode(97 + i), operator: '+' })), []);
+
+    // Memoize the argument count menu items
+    const argCountMenuItems = useMemo(() => (
+        [...Array(10)].map((_, i) => (
+            <MenuItem key={i + 1} value={i + 1} sx={{ backgroundColor: '#232323', color: '#fff' }}>{i + 1}</MenuItem>
+        ))
+    ), []);
+
+    // Memoize the operator menu items
+    const operatorMenuItems = useMemo(() => (
+        ARITHMETIC_OPERATORS.map(op => (
+            <MenuItem key={op} value={op} sx={{ backgroundColor: '#232323', color: '#fff' }}>{op}</MenuItem>
+        ))
+    ), []);
+
+    return (
+        <Dialog
+            open={open}
+            onClose={handleClose}
+            maxWidth="md"
+            fullWidth
+            PaperProps={{
+                style: {
+                    background: theme.backgroundColor,
+                    color: theme.textColor,
+                    minWidth: 700
+                }
+            }}
+        >
+            <DialogTitle sx={{
+                color: theme.textColor,
+                background: theme.backgroundColor,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1
+            }}>
+                {initialValues ? t('createFunctionModal.editTitle') : t('createFunctionModal.title')}
+                <Tooltip
+                    title={<FunctionModalTooltip backgroundColor={theme.backgroundColor || '#232323'} />}
+                    placement="right"
+                    arrow
+                >
+                    <InfoOutlinedIcon sx={{ color: '#aaa', cursor: 'pointer', fontSize: 20 }} />
+                </Tooltip>
+            </DialogTitle>
+            <DialogContent sx={{ background: theme.backgroundColor, mt: 2 }}>
+                <Stack spacing={2}>
+                    <TextField
+                        label={t('createFunctionModal.functionName')}
+                        style={{ marginTop: '10px' }}
+                        value={name}
+                        onChange={e => setName(e.target.value)}
+                        fullWidth
+                        InputLabelProps={{ style: { color: '#aaa' } }}
+                        InputProps={{ style: { color: theme.textColor, background: theme.backgroundColor } }}
+                        variant="outlined"
+                    />
+                    <TextField
+                        select
+                        label={t('createFunctionModal.numberOfArguments')}
+                        value={argCount}
+                        onChange={e => setArgCount(Number(e.target.value))}
+                        fullWidth
+                        InputLabelProps={{ style: { color: '#aaa' } }}
+                        InputProps={{ style: { color: theme.textColor, background: theme.backgroundColor } }}
+                        variant="outlined"
+                        size="small"
+                        sx={{ width: 180 }}
+                        SelectProps={{
+                            MenuProps: {
+                                PaperProps: {
+                                    sx: {
+                                        backgroundColor: theme.backgroundColor,
+                                        color: theme.textColor,
+                                    },
+                                },
+                            },
+                        }}
+                    >
+                        {argCountMenuItems}
+                    </TextField>
+                    <Box>
+                        <Stack direction="row" spacing={1} alignItems="center" sx={{ width: '100%', flexWrap: 'wrap' }}>
+                            {args.map((arg, idx) => (
+                                <Fragment key={idx}>
+                                    <TextField
+                                        value={arg.name}
+                                        onChange={e => handleArgNameChange(idx, e.target.value)}
+                                        InputLabelProps={{ style: { color: '#aaa', fontSize: 12 } }}
+                                        InputProps={{
+                                            style: {
+                                                color: theme.textColor,
+                                                background: theme.backgroundColor,
+                                                fontSize: 13,
+                                                padding: 2
+                                            }
+                                        }}
+                                        variant="outlined"
+                                        size="small"
+                                        sx={{ width: 60, minWidth: 40 }}
+                                    />
+                                    {idx < args.length - 1 && (
+                                        <TextField
+                                            select
+                                            value={args[idx + 1].operator}
+                                            onChange={e => handleArgOperatorChange(idx + 1, e.target.value)}
+                                            InputLabelProps={{ style: { color: '#aaa', fontSize: 12 } }}
+                                            InputProps={{
+                                                style: {
+                                                    color: theme.textColor,
+                                                    background: theme.backgroundColor,
+                                                    fontSize: 13,
+                                                    padding: 2
+                                                }
+                                            }}
+                                            variant="outlined"
+                                            size="small"
+                                            sx={{ width: 60, minWidth: 50 }}
+                                            SelectProps={{
+                                                MenuProps: {
+                                                    PaperProps: {
+                                                        sx: {
+                                                            backgroundColor: theme.backgroundColor,
+                                                            color: theme.textColor,
+                                                        },
+                                                    },
+                                                },
+                                            }}
+                                        >
+                                            {operatorMenuItems}
+                                        </TextField>
+                                    )}
+                                </Fragment>
+                            ))}
+                        </Stack>
+                    </Box>
+                    <Box sx={{ mt: 2, color: '#aaa', fontFamily: 'monospace', fontSize: 14 }}>
+                        <b>{t('createFunctionModal.generatedCode')}</b> {generateFunctionCode(args)}
+                    </Box>
+                </Stack>
+            </DialogContent>
+            <DialogActions sx={{ background: theme.backgroundColor }}>
+                <Button
+                    onClick={handleClose}
+                    color="secondary"
+                    sx={{ color: theme.textColor }}
+                >
+                    {t('createFunctionModal.buttons.cancel')}
+                </Button>
+                <Button
+                    onClick={handleSubmit}
+                    color="primary"
+                    variant="contained"
+                    sx={{ background: theme.accentColor, color: theme.textColor }}
+                >
+                    {initialValues ? t('createFunctionModal.buttons.save') : t('createFunctionModal.buttons.create')}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
 export default memo(CreateFunctionModal);