feat: swiper

src/app/deals/hooks/useDealsAndStatusesDnd.ts

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { RefObject, useMemo, useRef, useState } from "react";
 import { DragOverEvent, DragStartEvent, Over } from "@dnd-kit/core";
 import { useDebouncedCallback } from "@mantine/hooks";
 import { useDealsContext } from "@/app/deals/contexts/DealsContext";
@@ -7,6 +7,7 @@ import useGetNewRank from "@/app/deals/hooks/useGetNewRank";
 import { getStatusId, isStatusId } from "@/app/deals/utils/statusId";
 import { DealSchema, StatusSchema } from "@/lib/client";
 import { sortByLexorank } from "@/utils/lexorank";
+import { SwiperRef } from "swiper/swiper-react";
 
 type ReturnType = {
     sortedStatuses: StatusSchema[];
@@ -15,9 +16,11 @@ type ReturnType = {
     handleDragEnd: ({ active, over }: DragOverEvent) => void;
     activeStatus: StatusSchema | null;
     activeDeal: DealSchema | null;
+    swiperRef: RefObject<SwiperRef | null>;
 };
 
 const useDealsAndStatusesDnd = (): ReturnType => {
+    const swiperRef = useRef<SwiperRef>(null);
     const [activeDeal, setActiveDeal] = useState<DealSchema | null>(null);
     const [activeStatus, setActiveStatus] = useState<StatusSchema | null>(null);
     const { statuses, setStatuses, updateStatus } = useStatusesContext();
@@ -43,6 +46,30 @@ const useDealsAndStatusesDnd = (): ReturnType => {
         if (!over) return;
         const activeId = active.id as string | number;
 
+        // Only perform swiper navigation for deal drag (not status column drag)
+        if (typeof activeId !== "string") {
+            const activeStatusLexorank = getStatusByDealId(Number(activeId))?.lexorank;
+            let overStatusLexorank: string | undefined;
+
+            if (typeof over.id === "string" && isStatusId(over.id)) {
+                const overStatusId = getStatusId(over.id);
+                overStatusLexorank = statuses.find(s => s.id === overStatusId)?.lexorank;
+            } else {
+                overStatusLexorank = getStatusByDealId(Number(over.id))?.lexorank;
+            }
+
+            if (activeStatusLexorank && overStatusLexorank && swiperRef.current?.swiper) {
+                const activeIndex = sortedStatuses.findIndex(s => s.lexorank === activeStatusLexorank);
+                const overIndex = sortedStatuses.findIndex(s => s.lexorank === overStatusLexorank);
+                
+                if (activeIndex > overIndex) {
+                    swiperRef.current.swiper.slidePrev();
+                } else if (activeIndex < overIndex) {
+                    swiperRef.current.swiper.slideNext();
+                }
+            }
+        }
+
         if (typeof activeId === "string" && isStatusId(activeId)) {
             handleColumnDragOver(activeId, over);
             return;
@@ -242,6 +269,7 @@ const useDealsAndStatusesDnd = (): ReturnType => {
     };
 
     return {
+        swiperRef,
         sortedStatuses,
         handleDragStart,
         handleDragOver,