@flowuent-org/diagramming-core 1.0.8 → 1.1.1

package/packages/diagrams/src/lib/atoms/CardEditableTitle.tsx

@@ -1,76 +1,76 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Box, TextField } from '@mui/material';
-import { ICardNode } from '../types/card-node';
-import { useCustomReactFlow } from '../hooks/customUseReactFlow';
-import { useNodeId, useNodeTitle } from '@flowuent-labs/diagrams';
-
-export const CardEditableTitle = React.memo(() => {
-  const title = useNodeTitle()
-  const nodeId = useNodeId()
-  const { getNodes, setNodes } = useCustomReactFlow();
-  const [text, setText] = useState(title);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (title !== text) setText(title);
-  }, [title]);
-
-  const changeTitle = useCallback(
-    (val: string) => {
-      const prevNodes = [...getNodes()] as ICardNode[];
-      const newNodes: ICardNode[] = prevNodes.map((node) => {
-        if (node.id === nodeId) {
-          return {
-            ...node,
-            data: { ...node.data, title: val },
-          };
-        } else return node;
-      });
-      setNodes(newNodes);
-    },
-    [getNodes, setNodes, nodeId],
-  );
-
-  const handleSave = useCallback(() => {
-    changeTitle(text ?? '');
-  }, [text, changeTitle]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter') {
-        handleSave();
-      } else if (e.key === 'Escape') {
-        setText(title);
-      }
-    },
-    [handleSave, title],
-  );
-
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: 'center',
-        width: '100%',
-        my: 1,
-        backgroundColor: '#6B04F1',
-        borderRadius: '3px',
-      }}
-    >
-      <TextField
-        size={'small'}
-        inputProps={{
-          style: { fontSize: '18px', fontWeight: 'bold', textAlign: 'center', color: '#fff' },
-        }}
-        variant="outlined"
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        onKeyDown={handleKeyDown}
-        inputRef={inputRef}
-        fullWidth
-      />
-    </Box>
-  );
-});
-
-export default CardEditableTitle;
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Box, TextField } from '@mui/material';
+import { ICardNode } from '../types/card-node';
+import { useCustomReactFlow } from '../hooks/customUseReactFlow';
+import { useNodeId, useNodeTitle } from '@flowuent-labs/diagrams';
+
+export const CardEditableTitle = React.memo(() => {
+  const title = useNodeTitle()
+  const nodeId = useNodeId()
+  const { getNodes, setNodes } = useCustomReactFlow();
+  const [text, setText] = useState(title);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (title !== text) setText(title);
+  }, [title]);
+
+  const changeTitle = useCallback(
+    (val: string) => {
+      const prevNodes = [...getNodes()] as ICardNode[];
+      const newNodes: ICardNode[] = prevNodes.map((node) => {
+        if (node.id === nodeId) {
+          return {
+            ...node,
+            data: { ...node.data, title: val },
+          };
+        } else return node;
+      });
+      setNodes(newNodes);
+    },
+    [getNodes, setNodes, nodeId],
+  );
+
+  const handleSave = useCallback(() => {
+    changeTitle(text ?? '');
+  }, [text, changeTitle]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        handleSave();
+      } else if (e.key === 'Escape') {
+        setText(title);
+      }
+    },
+    [handleSave, title],
+  );
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        width: '100%',
+        my: 1,
+        backgroundColor: '#6B04F1',
+        borderRadius: '3px',
+      }}
+    >
+      <TextField
+        size={'small'}
+        inputProps={{
+          style: { fontSize: '18px', fontWeight: 'bold', textAlign: 'center', color: '#fff' },
+        }}
+        variant="outlined"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        inputRef={inputRef}
+        fullWidth
+      />
+    </Box>
+  );
+});
+
+export default CardEditableTitle;