feat: boards dnd editor for mobile

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -84,16 +84,18 @@ const FunnelDnd = <
                             <SortableItem
                                 key={containerId}
                                 id={containerId}
-                                disabled={disabled}>
-                                {renderContainer(
-                                    container,
-                                    <FunnelColumn
-                                        id={containerId}
-                                        items={containerItems}
-                                        renderItem={renderItem}
-                                    />
-                                )}
-                            </SortableItem>
+                                disabled={disabled}
+                                renderItem={() =>
+                                    renderContainer(
+                                        container,
+                                        <FunnelColumn
+                                            id={containerId}
+                                            items={containerItems}
+                                            renderItem={renderItem}
+                                        />
+                                    )
+                                }
+                            />
                         );
                     })}
                     <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}>
-                                {renderItem(item)}
-                            </SortableItem>
+                                disabled={disabled}
+                                renderItem={renderDraggable =>
+                                    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;
-    dragHandleStyle?: CSSProperties;
+    renderItem: (renderDraggable?: () => ReactNode) => ReactNode;
+    renderDraggable?: () => ReactNode; // if not passed - the whole item renders as draggable
     disabled?: boolean;
+    dragHandleStyle?: CSSProperties;
 };
 
 const SortableItem = ({
-    children,
-    itemStyle,
-    id,
+    renderItem,
     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>
     );