feat: boards dnd editor for mobile

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>
     );