feat: status creating

src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.tsx

@@ -1,7 +1,8 @@
-import React, { ReactNode, useEffect, useRef, useState } from "react";
-import { Box, Group, Text, TextInput } from "@mantine/core";
+import React, { ReactNode } from "react";
+import { Box, Group, Text } from "@mantine/core";
 import StatusMenu from "@/app/deals/components/StatusColumnWrapper/StatusMenu";
 import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
+import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
 import { StatusSchema } from "@/lib/client";
 
 type Props = {
@@ -16,46 +17,12 @@ const StatusColumnWrapper = ({
     isDragging = false,
 }: Props) => {
     const { onUpdateStatus } = useStatusesContext();
-    const [isEditing, setIsEditing] = useState(false);
-    const [editValue, setEditValue] = useState(status.name);
-    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 handleEdit = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        setEditValue(status.name);
-        setIsEditing(true);
-    };
-
-    const handleSave = () => {
-        const newValue = editValue.trim();
+    const handleSave = (value: string) => {
+        const newValue = value.trim();
         if (newValue && newValue !== status.name) {
             onUpdateStatus(status.id, { name: newValue });
         }
-        setIsEditing(false);
     };
 
     return (
@@ -72,39 +39,31 @@ const StatusColumnWrapper = ({
                 justify={"space-between"}
                 ml={"xs"}
                 mb={"xs"}>
-                {isEditing ? (
-                    <TextInput
-                        ref={inputRef}
-                        value={editValue}
-                        onChange={e => setEditValue(e.target.value)}
-                        onKeyDown={e => {
-                            if (e.key === "Enter") handleSave();
-                            if (e.key === "Escape") {
-                                setEditValue(status.name);
-                                setIsEditing(false);
-                            }
-                        }}
-                        variant="unstyled"
-                        styles={{
-                            input: {
-                                height: 25,
-                                minHeight: 25,
-                            },
-                        }}
-                    />
-                ) : (
-                    <Text
-                        style={{
-                            cursor: "grab",
-                            userSelect: "none",
-                            opacity: isDragging ? 0.5 : 1,
-                        }}>
-                        {status.name}
-                    </Text>
-                )}
-                <StatusMenu
-                    status={status}
-                    handleEdit={handleEdit}
+                <InPlaceInput
+                    defaultValue={status.name}
+                    onComplete={value => handleSave(value)}
+                    inputStyles={{
+                        input: {
+                            height: 25,
+                            minHeight: 25,
+                        },
+                    }}
+                    getChildren={startEditing => (
+                        <>
+                            <Text
+                                style={{
+                                    cursor: "grab",
+                                    userSelect: "none",
+                                    opacity: isDragging ? 0.5 : 1,
+                                }}>
+                                {status.name}
+                            </Text>
+                            <StatusMenu
+                                status={status}
+                                handleEdit={startEditing}
+                            />
+                        </>
+                    )}
                 />
             </Group>
             {children}