refactor: moved dnd part from Funnel into FunnelDnd

src/components/dnd/SortableDnd/DragHandle.tsx

@@ -1,27 +0,0 @@
-import React, { CSSProperties, ReactNode, useContext } from "react";
-import SortableItemContext from "@/components/dnd/SortableDnd/SortableItemContext";
-
-type Props = {
-    children: ReactNode;
-    style?: CSSProperties;
-};
-
-const DragHandle = ({ children, style }: Props) => {
-    const { attributes, listeners, ref } = useContext(SortableItemContext);
-
-    return (
-        <div
-            {...attributes}
-            {...listeners}
-            style={{
-                width: "100%",
-                cursor: "grab",
-                ...style,
-            }}
-            ref={ref}>
-            {children}
-        </div>
-    );
-};
-
-export default DragHandle;

src/components/dnd/SortableDnd/SortableDnd.tsx

@@ -12,8 +12,8 @@ import { SortableContext } from "@dnd-kit/sortable";
 import { LexoRank } from "lexorank";
 import { Box, Group } from "@mantine/core";
 import useDndSensors from "@/app/deals/hooks/useSensors";
-import { SortableItem } from "@/components/dnd/SortableDnd/SortableItem";
 import { SortableOverlay } from "@/components/dnd/SortableDnd/SortableOverlay";
+import SortableItem from "@/components/dnd/SortableItem";
 import { getNewLexorank, sortByLexorank } from "@/utils/lexorank";
 
 type BaseItem = {
@@ -119,9 +119,7 @@ const SortableDnd = <T extends BaseItem>({
                 </Group>
             </SortableContext>
             <SortableOverlay>
-                <div style={{ cursor: "grabbing" }}>
-                    {activeItem ? renderItem(activeItem) : null}
-                </div>
+                {activeItem ? renderItem(activeItem) : null}
             </SortableOverlay>
         </DndContext>
     );

src/components/dnd/SortableDnd/SortableItem.tsx

@@ -1,54 +0,0 @@
-import React, { CSSProperties, PropsWithChildren, useMemo } from "react";
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import DragHandle from "@/components/dnd/SortableDnd/DragHandle";
-import SortableItemContext from "./SortableItemContext";
-
-type Props = {
-    id: number | string;
-    itemStyle?: CSSProperties;
-    dragHandleStyle?: CSSProperties;
-};
-
-export const SortableItem = ({
-    children,
-    itemStyle,
-    id,
-    dragHandleStyle,
-}: PropsWithChildren<Props>) => {
-    const {
-        attributes,
-        isDragging,
-        listeners,
-        setNodeRef,
-        setActivatorNodeRef,
-        transform,
-        transition,
-    } = useSortable({ id });
-
-    const context = useMemo(
-        () => ({
-            attributes,
-            listeners,
-            ref: setActivatorNodeRef,
-        }),
-        [attributes, listeners, setActivatorNodeRef]
-    );
-
-    const style: CSSProperties = {
-        opacity: isDragging ? 0.4 : undefined,
-        transform: CSS.Translate.toString(transform),
-        transition,
-        ...itemStyle,
-    };
-
-    return (
-        <SortableItemContext.Provider value={context}>
-            <div
-                ref={setNodeRef}
-                style={style}>
-                <DragHandle style={dragHandleStyle}>{children}</DragHandle>
-            </div>
-        </SortableItemContext.Provider>
-    );
-};

src/components/dnd/SortableDnd/SortableItemContext.tsx

@@ -1,16 +0,0 @@
-import type { DraggableSyntheticListeners } from "@dnd-kit/core";
-import { createContext } from "react";
-
-interface Context {
-    attributes: Record<string, any>;
-    listeners: DraggableSyntheticListeners;
-    ref: (node: HTMLElement | null) => void;
-}
-
-const SortableItemContext = createContext<Context>({
-    attributes: {},
-    listeners: undefined,
-    ref() {},
-});
-
-export default SortableItemContext;

src/components/dnd/SortableDnd/SortableOverlay.tsx

@@ -18,7 +18,7 @@ const dropAnimationConfig: DropAnimation = {
 export function SortableOverlay({ children }: PropsWithChildren) {
     return (
         <DragOverlay dropAnimation={dropAnimationConfig}>
-            {children}
+            <div style={{ cursor: "grabbing" }}>{children}</div>
         </DragOverlay>
     );
 }