feat: status creating

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

@@ -1,7 +1,8 @@
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useState } from "react";
-import { Group, Text, TextInput } from "@mantine/core";
+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 ? (
+            <InPlaceInput
-                <TextInput
+                defaultValue={board.name}
-                    ref={inputRef}
+                onComplete={value => onUpdateBoard(board.id, { name: value })}
-                    value={editValue}
+                inputStyles={{
-                    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,
                     },
                 }}
-                />
+                getChildren={startEditing => (
-            ) : (
+                    <>
+                        <Box>
                             <Text>{board.name}</Text>
-            )}
+                        </Box>
                         <BoardMenu
                             isHovered={isHovered}
                             board={board}
-                handleEdit={handleEdit}
+                            startEditing={startEditing}
+                        />
+                    </>
+                )}
             />
         </Group>
     );

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

@@ -7,10 +7,10 @@ import { BoardSchema } from "@/lib/client";
 type Props = {
     isHovered: boolean;
     board: BoardSchema;
-    handleEdit: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    startEditing: () => void;
 };
 
-const BoardMenu: FC<Props> = ({ isHovered, board, handleEdit }) => {
+const BoardMenu: FC<Props> = ({ isHovered, board, startEditing }) => {
     const { selectedBoard, onDeleteBoard } = useBoardsContext();
 
     return (
@@ -30,7 +30,12 @@ const BoardMenu: FC<Props> = ({ isHovered, board, handleEdit }) => {
                 </Box>
             </Menu.Target>
             <Menu.Dropdown>
-                <Menu.Item onClick={handleEdit}>
+                <Menu.Item
+                    onClick={e => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        startEditing();
+                    }}>
                     <Group wrap={"nowrap"}>
                         <IconEdit />
                         <Text>Переименовать</Text>

src/app/deals/components/CreateBoardButton/CreateBoardButton.tsx

@@ -1,52 +1,22 @@
-import { useState } from "react";
+import { IconPlus } from "@tabler/icons-react";
-import { IconCheck, IconPlus, IconX } from "@tabler/icons-react";
+import { Box } from "@mantine/core";
-import { Box, Group, TextInput } from "@mantine/core";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
 
 const CreateBoardButton = () => {
     const { onCreateBoard } = useBoardsContext();
-    const [isWriting, setIsWriting] = useState<boolean>(false);
-    const [name, setName] = useState<string>("");
-
-    const onStartCreating = () => {
-        setName("");
-        setIsWriting(true);
-    };
-
-    const onCancelCreating = () => setIsWriting(false);
-
-    const onCompleteCreating = () => {
-        if (name) {
-            onCreateBoard(name);
-        }
-        setIsWriting(false);
-    };
 
     return (
         <Box style={{ cursor: "pointer" }}>
-            {isWriting ? (
+            <InPlaceInput
-                <Group>
-                    <TextInput
                 placeholder={"Название доски"}
-                        variant={"unstyled"}
+                onComplete={onCreateBoard}
-                        value={name}
+                getChildren={startEditing => (
-                        onChange={e => setName(e.target.value)}
+                    <Box onClick={startEditing}>
-                        onKeyDown={e =>
-                            e.key === "Enter" && onCompleteCreating()
-                        }
-                    />
-                    <Box onClick={onCompleteCreating}>
-                        <IconCheck />
-                    </Box>
-                    <Box onClick={onCancelCreating}>
-                        <IconX />
-                    </Box>
-                </Group>
-            ) : (
-                <Box onClick={onStartCreating}>
                         <IconPlus />
                     </Box>
                 )}
+            />
         </Box>
     );
 };

src/app/deals/components/CreateStatusButton/CreateStatusButton.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Box, Text } from "@mantine/core";
+import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
+import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
+
+const CreateStatusButton = () => {
+    const { onCreateStatus } = useStatusesContext();
+
+    return (
+        <Box
+            style={{
+                borderWidth: 1,
+                borderStyle: "dashed",
+                borderColor: "gray",
+                width: "15vw",
+                minWidth: 150,
+                cursor: "pointer",
+            }}>
+            <InPlaceInput
+                placeholder={"Название доски"}
+                onComplete={onCreateStatus}
+                getChildren={startEditing => (
+                    <Box
+                        p={9}
+                        onClick={() => startEditing()}>
+                        <Text>Создать колонку</Text>
+                    </Box>
+                )}
+            />
+        </Box>
+    );
+};
+
+export default CreateStatusButton;

src/app/deals/components/Funnel/Funnel.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import React, { FC, ReactNode } from "react";
+import { Group, ScrollArea } from "@mantine/core";
+import CreateStatusButton from "@/app/deals/components/CreateStatusButton/CreateStatusButton";
 import DealCard from "@/app/deals/components/DealCard/DealCard";
 import DealContainer from "@/app/deals/components/DealContainer/DealContainer";
 import StatusColumnWrapper from "@/app/deals/components/StatusColumnWrapper/StatusColumnWrapper";
@@ -23,14 +25,23 @@ const Funnel: FC = () => {
     } = useDealsAndStatusesDnd();
 
     return (
+        <ScrollArea
+            offsetScrollbars={"x"}
+            scrollbarSize={"0.5rem"}>
+            <Group align={"start"}>
                 <FunnelDnd
                     containers={sortedStatuses}
                     items={deals}
                     onDragStart={handleDragStart}
                     onDragOver={handleDragOver}
                     onDragEnd={handleDragEnd}
-            getContainerId={(status: StatusSchema) => `${status.id}-status`}
+                    getContainerId={(status: StatusSchema) =>
-            getItemsByContainer={(status: StatusSchema, items: DealSchema[]) =>
+                        `${status.id}-status`
+                    }
+                    getItemsByContainer={(
+                        status: StatusSchema,
+                        items: DealSchema[]
+                    ) =>
                         sortByLexorank(
                             items.filter(deal => deal.statusId === status.id)
                         )
@@ -53,8 +64,13 @@ const Funnel: FC = () => {
                     )}
                     activeContainer={activeStatus}
                     activeItem={activeDeal}
-            renderItemOverlay={(deal: DealSchema) => <DealCard deal={deal} />}
+                    renderItemOverlay={(deal: DealSchema) => (
-            renderContainerOverlay={(status: StatusSchema, children) => (
+                        <DealCard deal={deal} />
+                    )}
+                    renderContainerOverlay={(
+                        status: StatusSchema,
+                        children
+                    ) => (
                         <StatusColumnWrapper
                             status={status}
                             isDragging>
@@ -62,6 +78,9 @@ const Funnel: FC = () => {
                         </StatusColumnWrapper>
                     )}
                 />
+                <CreateStatusButton />
+            </Group>
+        </ScrollArea>
     );
 };
 

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

@@ -1,7 +1,8 @@
-import React, { ReactNode, useEffect, useRef, useState } from "react";
+import React, { ReactNode } from "react";
-import { Box, Group, Text, TextInput } from "@mantine/core";
+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(() => {
+    const handleSave = (value: string) => {
-        if (isEditing && inputRef.current) {
+        const newValue = value.trim();
-            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();
         if (newValue && newValue !== status.name) {
             onUpdateStatus(status.id, { name: newValue });
         }
-        setIsEditing(false);
     };
 
     return (
@@ -72,27 +39,17 @@ const StatusColumnWrapper = ({
                 justify={"space-between"}
                 ml={"xs"}
                 mb={"xs"}>
-                {isEditing ? (
+                <InPlaceInput
-                    <TextInput
+                    defaultValue={status.name}
-                        ref={inputRef}
+                    onComplete={value => handleSave(value)}
-                        value={editValue}
+                    inputStyles={{
-                        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,
                         },
                     }}
-                    />
+                    getChildren={startEditing => (
-                ) : (
+                        <>
                             <Text
                                 style={{
                                     cursor: "grab",
@@ -101,10 +58,12 @@ const StatusColumnWrapper = ({
                                 }}>
                                 {status.name}
                             </Text>
-                )}
                             <StatusMenu
                                 status={status}
-                    handleEdit={handleEdit}
+                                handleEdit={startEditing}
+                            />
+                        </>
+                    )}
                 />
             </Group>
             {children}

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

@@ -6,7 +6,7 @@ import { StatusSchema } from "@/lib/client";
 
 type Props = {
     status: StatusSchema;
-    handleEdit: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    handleEdit: () => void;
 };
 
 const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
@@ -28,7 +28,12 @@ const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
                 </Box>
             </Menu.Target>
             <Menu.Dropdown>
-                <Menu.Item onClick={handleEdit}>
+                <Menu.Item
+                    onClick={e => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleEdit();
+                    }}>
                     <Group wrap={"nowrap"}>
                         <IconEdit />
                         <Text>Переименовать</Text>

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -12,7 +12,7 @@ import {
     horizontalListSortingStrategy,
     SortableContext,
 } from "@dnd-kit/sortable";
-import { Group, ScrollArea } from "@mantine/core";
+import { Group } from "@mantine/core";
 import useDndSensors from "@/app/deals/hooks/useSensors";
 import SortableItem from "@/components/dnd/SortableItem";
 import { BaseDraggable } from "@/components/dnd/types/types";
@@ -59,9 +59,6 @@ const FunnelDnd = <
     const sensors = useDndSensors();
 
     return (
-        <ScrollArea
-            offsetScrollbars="x"
-            scrollbarSize="0.5rem">
         <DndContext
             sensors={sensors}
             collisionDetection={closestCorners}
@@ -119,7 +116,6 @@ const FunnelDnd = <
                 </Group>
             </SortableContext>
         </DndContext>
-        </ScrollArea>
     );
 };
 

src/components/ui/InPlaceInput/InPlaceInput.tsx

@@ -0,0 +1,85 @@
+import React, { FC, ReactNode, useEffect, useRef, useState } from "react";
+import { TextInput } from "@mantine/core";
+import { Styles } from "@mantine/core/lib/core/styles-api/styles-api.types";
+
+type Props = {
+    defaultValue?: string;
+    onComplete: (value: string) => void;
+    placeholder?: string;
+    getChildren: (startEditing: () => void) => ReactNode;
+    inputStyles?: Styles<any>;
+};
+
+const InPlaceInput: FC<Props> = ({
+    onComplete,
+    placeholder,
+    inputStyles,
+    getChildren,
+    defaultValue = "",
+}) => {
+    const [isWriting, setIsWriting] = useState<boolean>(false);
+    const [value, setValue] = useState<string>(defaultValue);
+    console.log(value);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (isWriting && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isWriting]);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                isWriting &&
+                inputRef.current &&
+                !inputRef.current.contains(event.target as Node)
+            ) {
+                onCompleteCreating();
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () =>
+            document.removeEventListener("mousedown", handleClickOutside);
+    }, [isWriting, value]);
+
+    const onStartCreating = () => {
+        setValue(defaultValue);
+        setIsWriting(true);
+    };
+
+    const onCancelCreating = () => {
+        setValue(defaultValue);
+        setIsWriting(false);
+    };
+
+    const onCompleteCreating = () => {
+        const localValue = value.trim();
+        if (localValue) {
+            onComplete(localValue);
+        }
+        setIsWriting(false);
+    };
+
+    if (isWriting) {
+        return (
+            <TextInput
+                ref={inputRef}
+                placeholder={placeholder}
+                variant={"unstyled"}
+                value={value}
+                onChange={e => setValue(e.target.value)}
+                onKeyDown={e => {
+                    if (e.key === "Enter") onCompleteCreating();
+                    if (e.key === "Escape") onCancelCreating();
+                }}
+                styles={inputStyles}
+            />
+        );
+    }
+
+    return getChildren(onStartCreating);
+};
+
+export default InPlaceInput;