Refactor drawer menu visibility logic and improve drag and drop behavior

Jun-Murakami · Feb 25, 2024 · 5e5f2ef · 5e5f2ef
1 parent 74e9727
commit 5e5f2ef
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 17 deletions.
diff --git a/src/components/ResponsiveDrawer.tsx b/src/components/ResponsiveDrawer.tsx
@@ -74,12 +74,19 @@ export function ResponsiveDrawer({
     if (isSwipe && drawerState) {
       setIsMenuVisible(false);
     } else if (!isSwipe && drawerState) {
-      setIsMenuVisible(true);
+      const setTimer = setTimeout(() => {
+        // drawerStateがfalseになっているかチェック
+        if (!drawerState) {
+          return;
+        }
+        setIsMenuVisible(true);
+      }, 170);
+      return () => clearTimeout(setTimer);
     } else {
       setIsMenuVisible(false);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSwipe]);
+    // drawerStateを依存配列に追加
+  }, [isSwipe, drawerState]);
 
   const theme = useTheme();
 

diff --git a/src/components/SortableList/SortableList.tsx b/src/components/SortableList/SortableList.tsx
@@ -1,5 +1,5 @@
 import { FC, useState } from 'react';
-import { DndContext, DragOverlay, UniqueIdentifier, closestCenter, defaultDropAnimationSideEffects } from '@dnd-kit/core';
+import { DndContext, DragOverlay, UniqueIdentifier, closestCenter } from '@dnd-kit/core';
 import { arrayMove, SortableContext } from '@dnd-kit/sortable';
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 
@@ -31,8 +31,8 @@ export const SortableList: FC<SortableListProps> = ({
   return (
     <>
       <DndContext
-        collisionDetection={closestCenter}
-        modifiers={[restrictToVerticalAxis]}
+        collisionDetection={closestCenter} // ドラッグ中の要素の中心を検出
+        modifiers={[restrictToVerticalAxis]} // 縦方向のみの移動に制限
         onDragStart={(event) => {
           setActiveId(event.active.id as number);
         }}
@@ -60,17 +60,7 @@ export const SortableList: FC<SortableListProps> = ({
             />
           ))}
         </SortableContext>
-        <DragOverlay
-          dropAnimation={
-            isPreviewMode
-              ? {
-                  sideEffects: defaultDropAnimationSideEffects({
-                    styles: {},
-                  }),
-                }
-              : undefined
-          }
-        >
+        <DragOverlay>
           {activeItem && (
             <SortableSource
               item={activeItem}

diff --git a/src/components/SortableList/SortableSource.tsx b/src/components/SortableList/SortableSource.tsx
@@ -36,6 +36,8 @@ export const SortableSource: FC<SortableSourceProps> = ({ item, handlerProps, cu
           minWidth: '20px',
           height: '20px',
           mr: '10px',
+          touchAction: 'none',
+          zIndex: 1500,
         }}
         {...handlerProps?.attributes}
         {...handlerProps?.listeners}