feat: raw slider for deals on mobile

src/components/dnd/SortableItem/DragHandle.tsx

@@ -1,24 +1,32 @@
-import React, { CSSProperties, ReactNode, useContext } from "react";
-import SortableItemContext from "@/components/dnd/SortableItem/SortableItemContext";
+import React, { CSSProperties, ReactNode } from "react";
+import { useDraggable } from "@dnd-kit/core";
 
 type Props = {
+    id: number | string;
     children: ReactNode;
     style?: CSSProperties;
+    disabled?: boolean;
 };
 
-const DragHandle = ({ children, style }: Props) => {
-    const { attributes, listeners, ref } = useContext(SortableItemContext);
+const DragHandle = ({ id, children, style, disabled }: Props) => {
+    const { attributes, listeners, setNodeRef } = useDraggable({
+        id,
+        disabled,
+    });
 
     return (
         <div
             {...attributes}
             {...listeners}
+            onTouchStart={e => !disabled && e.stopPropagation()}
+            onTouchMove={e => !disabled && e.stopPropagation()}
             style={{
-                width: "100%",
-                cursor: "grab",
+                width: "100wv",
+                cursor: disabled ? "default" : "grab",
+                touchAction: "none",
                 ...style,
             }}
-            ref={ref}>
+            ref={setNodeRef}>
             {children}
         </div>
     );

src/components/dnd/SortableItem/SortableItem.tsx

@@ -1,8 +1,7 @@
-import React, { CSSProperties, ReactNode, useMemo } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import DragHandle from "./DragHandle";
-import SortableItemContext from "./SortableItemContext";
 
 type Props = {
     id: number | string;
@@ -17,26 +16,12 @@ const SortableItem = ({
     dragHandleStyle,
     renderDraggable,
     id,
-    disabled,
+    disabled = false,
 }: Props) => {
-    const {
-        attributes,
-        isDragging,
-        listeners,
-        setNodeRef,
-        setActivatorNodeRef,
-        transform,
-        transition,
-    } = useSortable({ id, disabled, animateLayoutChanges: () => false });
-
-    const context = useMemo(
-        () => ({
-            attributes,
-            listeners,
-            ref: setActivatorNodeRef,
-        }),
-        [attributes, listeners, setActivatorNodeRef]
-    );
+    const { isDragging, setNodeRef, transform, transition } = useSortable({
+        id,
+        animateLayoutChanges: () => false,
+    });
 
     const style: CSSProperties = {
         opacity: isDragging ? 0.4 : undefined,
@@ -45,25 +30,29 @@ const SortableItem = ({
     };
 
     const renderDragHandle = () => (
-        <DragHandle style={dragHandleStyle}>
+        <DragHandle
+            id={id}
+            style={dragHandleStyle}
+            disabled={disabled}>
             {renderDraggable && renderDraggable()}
         </DragHandle>
     );
 
     return (
-        <SortableItemContext.Provider value={context}>
-            <div
-                ref={setNodeRef}
-                style={style}>
-                {renderDraggable ? (
-                    renderItem(renderDragHandle)
-                ) : (
-                    <DragHandle style={dragHandleStyle}>
-                        {renderItem()}
-                    </DragHandle>
-                )}
-            </div>
-        </SortableItemContext.Provider>
+        <div
+            ref={setNodeRef}
+            style={style}>
+            {renderDraggable ? (
+                renderItem(renderDragHandle)
+            ) : (
+                <DragHandle
+                    id={id}
+                    style={dragHandleStyle}
+                    disabled={disabled}>
+                    {renderItem()}
+                </DragHandle>
+            )}
+        </div>
     );
 };
 

src/components/dnd/SortableItem/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;