feat: status creating

src/app/deals/components/Board/Board.tsx

@@ -1,7 +1,8 @@
-import React, { FC, useEffect, useRef, useState } from "react";
-import { Group, Text, TextInput } from "@mantine/core";
+import React, { FC, useState } from "react";
+import { Box, Group, Text } from "@mantine/core";
 import BoardMenu from "@/app/deals/components/Board/BoardMenu";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
 import { BoardSchema } from "@/lib/client";
 
 type Props = {
@@ -10,48 +11,7 @@ type Props = {
 
 const Board: FC<Props> = ({ board }) => {
     const [isHovered, setIsHovered] = useState(false);
-    const [isEditing, setIsEditing] = useState(false);
-    const [editValue, setEditValue] = useState(board.name);
     const { onUpdateBoard } = useBoardsContext();
-    const inputRef = useRef<HTMLInputElement>(null);
-
-    useEffect(() => {
-        if (isEditing && inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, [isEditing]);
-
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (
-                isEditing &&
-                inputRef.current &&
-                !inputRef.current.contains(event.target as Node)
-            ) {
-                handleSave();
-            }
-        };
-
-        document.addEventListener("mousedown", handleClickOutside);
-        return () =>
-            document.removeEventListener("mousedown", handleClickOutside);
-    }, [isEditing, editValue]);
-
-    const handleSave = () => {
-        const newValue = editValue.trim();
-        if (newValue && newValue !== board.name) {
-            onUpdateBoard(board.id, { name: newValue });
-        }
-        setIsEditing(false);
-    };
-
-    const handleEdit = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-        e.preventDefault();
-        e.stopPropagation();
-        
-        setEditValue(board.name);
-        setIsEditing(true);
-    };
 
     return (
         <Group
@@ -63,33 +23,27 @@ const Board: FC<Props> = ({ board }) => {
             style={{ borderWidth: 1 }}
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}>
-            {isEditing ? (
-                <TextInput
-                    ref={inputRef}
-                    value={editValue}
-                    onChange={e => setEditValue(e.target.value)}
-                    onKeyDown={e => {
-                        if (e.key === "Enter") handleSave();
-                        if (e.key === "Escape") {
-                            setEditValue(board.name);
-                            setIsEditing(false);
-                        }
-                    }}
-                    variant="unstyled"
-                    styles={{
-                        input: {
-                            height: 25,
-                            minHeight: 25,
-                        },
-                    }}
-                />
-            ) : (
-                <Text>{board.name}</Text>
-            )}
-            <BoardMenu
-                isHovered={isHovered}
-                board={board}
-                handleEdit={handleEdit}
+            <InPlaceInput
+                defaultValue={board.name}
+                onComplete={value => onUpdateBoard(board.id, { name: value })}
+                inputStyles={{
+                    input: {
+                        height: 25,
+                        minHeight: 25,
+                    },
+                }}
+                getChildren={startEditing => (
+                    <>
+                        <Box>
+                            <Text>{board.name}</Text>
+                        </Box>
+                        <BoardMenu
+                            isHovered={isHovered}
+                            board={board}
+                            startEditing={startEditing}
+                        />
+                    </>
+                )}
             />
         </Group>
     );