feat: disable dnds for mobile

src/components/dnd/FunnelDnd/FunnelColumn.tsx

@@ -12,6 +12,7 @@ type Props<TItem> = {
     items: TItem[];
     renderItem: (item: TItem) => ReactNode;
     children?: ReactNode;
+    disabled?: boolean;
 };
 
 const FunnelColumn = <TItem extends BaseDraggable>({
@@ -19,6 +20,7 @@ const FunnelColumn = <TItem extends BaseDraggable>({
     items,
     renderItem,
     children,
+    disabled = false,
 }: Props<TItem>) => {
     const { setNodeRef } = useDroppable({ id });
 
@@ -26,6 +28,7 @@ const FunnelColumn = <TItem extends BaseDraggable>({
         <>
             {children}
             <SortableContext
+                disabled={disabled}
                 id={id}
                 items={items}
                 strategy={verticalListSortingStrategy}>

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -36,6 +36,7 @@ type Props<TContainer, TItem> = {
     getItemsByContainer: (container: TContainer, items: TItem[]) => TItem[];
     activeContainer: TContainer | null;
     activeItem: TItem | null;
+    disabled?: boolean;
 };
 
 const FunnelDnd = <
@@ -55,6 +56,7 @@ const FunnelDnd = <
     getItemsByContainer,
     activeContainer,
     activeItem,
+    disabled = false,
 }: Props<TContainer, TItem>) => {
     const sensors = useDndSensors();
 
@@ -81,7 +83,8 @@ const FunnelDnd = <
                         return (
                             <SortableItem
                                 key={containerId}
-                                id={containerId}>
+                                id={containerId}
+                                disabled={disabled}>
                                 {renderContainer(
                                     container,
                                     <FunnelColumn
@@ -108,6 +111,7 @@ const FunnelDnd = <
                                     id={containerId}
                                     items={containerItems}
                                     renderItem={renderItem}
+                                    disabled={disabled}
                                 />
                             );
                         }}

src/components/dnd/SortableDnd/SortableDnd.tsx

@@ -28,6 +28,7 @@ type Props<T extends BaseItem> = {
     onItemClick: (item: T) => void;
     rowStyle?: CSSProperties;
     itemStyle?: CSSProperties;
+    disabled?: boolean;
 };
 
 const SortableDnd = <T extends BaseItem>({
@@ -37,6 +38,7 @@ const SortableDnd = <T extends BaseItem>({
     onItemClick,
     rowStyle,
     itemStyle,
+    disabled = false,
 }: Props<T>) => {
     const [active, setActive] = useState<Active | null>(null);
     const [items, setItems] = useState<T[]>([]);
@@ -95,7 +97,9 @@ const SortableDnd = <T extends BaseItem>({
             onDragStart={({ active }) => setActive(active)}
             onDragEnd={onDragEndLocal}
             onDragCancel={() => setActive(null)}>
-            <SortableContext items={items}>
+            <SortableContext
+                items={items}
+                disabled={disabled}>
                 <Group
                     gap={0}
                     style={rowStyle}
@@ -111,7 +115,8 @@ const SortableDnd = <T extends BaseItem>({
                             <SortableItem
                                 dragHandleStyle={{ cursor: "pointer" }}
                                 itemStyle={itemStyle}
-                                id={item.id}>
+                                id={item.id}
+                                disabled={disabled}>
                                 {renderItem(item)}
                             </SortableItem>
                         </Box>

src/components/dnd/SortableItem/SortableItem.tsx

@@ -8,6 +8,7 @@ type Props = {
     id: number | string;
     itemStyle?: CSSProperties;
     dragHandleStyle?: CSSProperties;
+    disabled?: boolean;
 };
 
 const SortableItem = ({
@@ -15,6 +16,7 @@ const SortableItem = ({
     itemStyle,
     id,
     dragHandleStyle,
+    disabled,
 }: PropsWithChildren<Props>) => {
     const {
         attributes,
@@ -24,7 +26,7 @@ const SortableItem = ({
         setActivatorNodeRef,
         transform,
         transition,
-    } = useSortable({ id });
+    } = useSortable({ id, disabled });
 
     const context = useMemo(
         () => ({