feat: boards dnd editor for mobile

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

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import React, { CSSProperties, 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";
@@ -7,9 +7,10 @@ import { BoardSchema } from "@/lib/client";
 
 type Props = {
     board: BoardSchema;
+    containerStyle?: CSSProperties;
 };
 
-const Board: FC<Props> = ({ board }) => {
+const Board: FC<Props> = ({ board, containerStyle }) => {
     const [isHovered, setIsHovered] = useState(false);
     const { onUpdateBoard } = useBoardsContext();
 
@@ -20,7 +21,7 @@ const Board: FC<Props> = ({ board }) => {
             py={"xs"}
             justify={"space-between"}
             wrap={"nowrap"}
-            style={{ borderWidth: 1 }}
+            style={{ ...containerStyle, borderWidth: 1 }}
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}>
             <InPlaceInput

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

@@ -6,12 +6,13 @@ import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { BoardSchema } from "@/lib/client";
 
 type Props = {
-    isHovered: boolean;
     board: BoardSchema;
     startEditing: () => void;
+    isHovered?: boolean;
+    menuIconSize?: number;
 };
 
-const BoardMenu: FC<Props> = ({ isHovered, board, startEditing }) => {
+const BoardMenu: FC<Props> = ({ board, startEditing, isHovered = true, menuIconSize = 16 }) => {
     const { selectedBoard, onDeleteBoard } = useBoardsContext();
 
     return (
@@ -28,7 +29,7 @@ const BoardMenu: FC<Props> = ({ isHovered, board, startEditing }) => {
                         cursor: "pointer",
                     }}
                     onClick={e => e.stopPropagation()}>
-                    <IconDotsVertical size={16} />
+                    <IconDotsVertical size={menuIconSize} />
                 </Box>
             </Menu.Target>
             <Menu.Dropdown>

src/app/deals/components/DealContainer/DealContainer.tsx

@@ -17,9 +17,9 @@ const DealContainer: FC<Props> = ({ deal, disabled = false }) => {
             <SortableItem
                 disabled={disabled}
                 dragHandleStyle={{ cursor: "pointer" }}
-                id={deal.id}>
+                id={deal.id}
-                {dealBody}
+                renderItem={() => dealBody}
-            </SortableItem>
+            />
         </Box>
     );
 };

src/app/deals/drawers/ProjectBoardsEditorDrawer/ProjectBoardsEditorDrawer.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import React, { FC } from "react";
+import React, { FC, ReactNode } from "react";
-import { IconChevronLeft } from "@tabler/icons-react";
+import { IconChevronLeft, IconGripVertical } from "@tabler/icons-react";
-import { Box, Center, Drawer, Group, rem, Text } from "@mantine/core";
+import { Box, Center, Divider, Drawer, Group, rem, Text } from "@mantine/core";
-import Board from "@/app/deals/components/Board/Board";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
-import CreateBoardButtonMobile from "@/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButtonMobile";
+import BoardMobile from "@/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardMobile";
+import CreateBoardButton from "@/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButton";
 import SortableDnd from "@/components/dnd/SortableDnd";
 import { BoardSchema } from "@/lib/client";
 
@@ -20,8 +20,22 @@ const ProjectBoardsEditorDrawer: FC = () => {
     const { selectedProject } = useProjectsContext();
     const onClose = () => setIsEditorDrawerOpened(false);
 
-    const renderBoard = (board: BoardSchema) => {
+    const renderDraggable = () => (
-        return <Board board={board} />;
+        <Box p={"xs"}>
+            <IconGripVertical size={22} />
+        </Box>
+    );
+
+    const renderBoard = (
+        board: BoardSchema,
+        renderDraggable?: (item: BoardSchema) => ReactNode
+    ) => {
+        return (
+            <Group wrap={"nowrap"}>
+                {renderDraggable && renderDraggable(board)}
+                <BoardMobile board={board} />
+            </Group>
+        );
     };
 
     const onDragEnd = (itemId: number, newLexorank: string) => {
@@ -55,13 +69,16 @@ const ProjectBoardsEditorDrawer: FC = () => {
                 </Center>
                 <Box p={"lg"} />
             </Group>
+            <Divider />
             <SortableDnd
                 initialItems={boards}
-                renderItem={renderBoard}
                 onDragEnd={onDragEnd}
+                renderItem={renderBoard}
+                renderDraggable={renderDraggable}
+                dragHandleStyle={{ width: "auto" }}
                 vertical
             />
-            <CreateBoardButtonMobile />
+            <CreateBoardButton />
         </Drawer>
     );
 };

src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardMobile.tsx

@@ -0,0 +1,46 @@
+import React, { FC } from "react";
+import { Box, Group, Text } from "@mantine/core";
+import { modals } from "@mantine/modals";
+import BoardMenu from "@/app/deals/components/Board/BoardMenu";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import { BoardSchema } from "@/lib/client";
+
+type Props = {
+    board: BoardSchema;
+};
+
+const BoardMobile: FC<Props> = ({ board }) => {
+    const { onUpdateBoard } = useBoardsContext();
+
+    const startEditing = () => {
+        modals.openContextModal({
+            modal: "enterNameModal",
+            title: "Редактирование доски",
+            withCloseButton: true,
+            innerProps: {
+                onComplete: name => onUpdateBoard(board.id, { name }),
+                defaultValue: board.name,
+            },
+        });
+    };
+
+    return (
+        <Group
+            w={"100%"}
+            pr={"md"}
+            py={"xs"}
+            justify={"space-between"}
+            wrap={"nowrap"}>
+            <Box>
+                <Text>{board.name}</Text>
+            </Box>
+            <BoardMenu
+                board={board}
+                startEditing={startEditing}
+                menuIconSize={22}
+            />
+        </Group>
+    );
+};
+
+export default BoardMobile;

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

@@ -3,7 +3,7 @@ import { Box, Group, Text } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 
-const CreateBoardButtonMobile = () => {
+const CreateBoardButton = () => {
     const { onCreateBoard } = useBoardsContext();
 
     const onStartCreating = () => {
@@ -18,7 +18,7 @@ const CreateBoardButtonMobile = () => {
     };
 
     return (
-        <Group onClick={onStartCreating}>
+        <Group ml={"xs"} onClick={onStartCreating}>
             <IconPlus />
             <Box mt={5}>
                 <Text>Создать доску</Text>
@@ -27,4 +27,4 @@ const CreateBoardButtonMobile = () => {
     );
 };
 
-export default CreateBoardButtonMobile;
+export default CreateBoardButton;

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -84,16 +84,18 @@ const FunnelDnd = <
                             <SortableItem
                                 key={containerId}
                                 id={containerId}
-                                disabled={disabled}>
+                                disabled={disabled}
-                                {renderContainer(
+                                renderItem={() =>
+                                    renderContainer(
                                         container,
                                         <FunnelColumn
                                             id={containerId}
                                             items={containerItems}
                                             renderItem={renderItem}
                                         />
-                                )}
+                                    )
-                            </SortableItem>
+                                }
+                            />
                         );
                     })}
                     <FunnelOverlay

src/components/dnd/SortableDnd/SortableDnd.tsx

@@ -23,11 +23,15 @@ type BaseItem = {
 
 type Props<T extends BaseItem> = {
     initialItems: T[];
-    renderItem: (item: T) => ReactNode;
+    renderItem: (
+        item: T,
+        renderDraggable?: (item: T) => ReactNode
+    ) => ReactNode;
+    renderDraggable?: (item: T) => ReactNode; // if not passed - the whole item renders as draggable
+    dragHandleStyle?: CSSProperties;
     onDragEnd: (itemId: number, newLexorank: string) => void;
     onItemClick?: (item: T) => void;
     containerStyle?: CSSProperties;
-    itemStyle?: CSSProperties;
     vertical?: boolean;
     disabled?: boolean;
 };
@@ -35,10 +39,11 @@ type Props<T extends BaseItem> = {
 const SortableDnd = <T extends BaseItem>({
     initialItems,
     renderItem,
+    renderDraggable,
+    dragHandleStyle,
     onDragEnd,
     onItemClick,
     containerStyle,
-    itemStyle,
     vertical,
     disabled = false,
 }: Props<T>) => {
@@ -120,18 +125,24 @@ const SortableDnd = <T extends BaseItem>({
                                 onItemClick(item);
                             }}>
                             <SortableItem
-                                dragHandleStyle={{ cursor: "pointer" }}
-                                itemStyle={itemStyle}
                                 id={item.id}
-                                disabled={disabled}>
+                                disabled={disabled}
-                                {renderItem(item)}
+                                renderItem={renderDraggable =>
-                            </SortableItem>
+                                    renderItem(item, renderDraggable)
+                                }
+                                renderDraggable={
+                                    renderDraggable
+                                        ? () => renderDraggable(item)
+                                        : undefined
+                                }
+                                dragHandleStyle={dragHandleStyle}
+                            />
                         </Box>
                     ))}
                 </Flex>
             </SortableContext>
             <SortableOverlay>
-                {activeItem ? renderItem(activeItem) : null}
+                {activeItem ? renderItem(activeItem, renderDraggable) : null}
             </SortableOverlay>
         </DndContext>
     );

src/components/dnd/SortableItem/SortableItem.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, PropsWithChildren, useMemo } from "react";
+import React, { CSSProperties, ReactNode, useMemo } from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import DragHandle from "./DragHandle";
@@ -6,18 +6,19 @@ import SortableItemContext from "./SortableItemContext";
 
 type Props = {
     id: number | string;
-    itemStyle?: CSSProperties;
+    renderItem: (renderDraggable?: () => ReactNode) => ReactNode;
-    dragHandleStyle?: CSSProperties;
+    renderDraggable?: () => ReactNode; // if not passed - the whole item renders as draggable
     disabled?: boolean;
+    dragHandleStyle?: CSSProperties;
 };
 
 const SortableItem = ({
-    children,
+    renderItem,
-    itemStyle,
-    id,
     dragHandleStyle,
+    renderDraggable,
+    id,
     disabled,
-}: PropsWithChildren<Props>) => {
+}: Props) => {
     const {
         attributes,
         isDragging,
@@ -41,15 +42,26 @@ const SortableItem = ({
         opacity: isDragging ? 0.4 : undefined,
         transform: CSS.Translate.toString(transform),
         transition,
-        ...itemStyle,
     };
 
+    const renderDragHandle = () => (
+        <DragHandle style={dragHandleStyle}>
+            {renderDraggable && renderDraggable()}
+        </DragHandle>
+    );
+
     return (
         <SortableItemContext.Provider value={context}>
             <div
                 ref={setNodeRef}
                 style={style}>
-                <DragHandle style={dragHandleStyle}>{children}</DragHandle>
+                {renderDraggable ? (
+                    renderItem(renderDragHandle)
+                ) : (
+                    <DragHandle style={dragHandleStyle}>
+                        {renderItem()}
+                    </DragHandle>
+                )}
             </div>
         </SortableItemContext.Provider>
     );