Implement DragAndDropWrapper

https://youtrack.weseek.co.jp/issue/GW-7927

packages/app/src/components/Bookmarks/BookmarkFolderTree.module.scss

@@ -14,4 +14,9 @@
       padding: 0.7rem;
     }
   }
+  .grw-drag-drop-container > .grw-drop-item-area {
+    margin: 1rem;
+    border-style: dashed !important;
+    border-width: 0.15rem !important;
+  }
 }

packages/app/src/components/Bookmarks/BookmarkFolderTree.tsx

@@ -2,7 +2,6 @@
 import { useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import { useDrop } from 'react-dnd';
 
 import { addBookmarkToFolder, updateBookmarkFolder } from '~/client/util/bookmark-utils';
 import { toastError, toastSuccess } from '~/client/util/toastr';
@@ -16,6 +15,7 @@ import { useSWRxCurrentPage } from '~/stores/page';
 
 import { BookmarkFolderItem } from './BookmarkFolderItem';
 import { BookmarkItem } from './BookmarkItem';
+import { DragAndDropWrapper } from './DragAndDropWrapper';
 
 import styles from './BookmarkFolderTree.module.scss';
 
@@ -99,23 +99,6 @@ export const BookmarkFolderTree = (props: BookmarkFolderTreeProps): JSX.Element
 
   };
 
-  const [, dropRef] = useDrop(() => ({
-    accept: acceptedTypes,
-    drop: (item: DragItemDataType, monitor) => {
-      const dragType = monitor.getItemType();
-      itemDropHandler(item, dragType);
-    },
-    canDrop: (item: DragItemDataType, monitor) => {
-      const dragType = monitor.getItemType();
-      return isDroppable(item, dragType);
-    },
-    collect: monitor => ({
-      isOver: monitor.isOver({ shallow: true }) && monitor.canDrop(),
-      canDrop: monitor.canDrop(),
-    }),
-  }));
-
-
   return (
     <div className={`grw-folder-tree-container ${styles['grw-folder-tree-container']}` } >
       <ul className={`grw-foldertree ${styles['grw-foldertree']} list-group px-2 py-2`}>
@@ -145,13 +128,18 @@ export const BookmarkFolderTree = (props: BookmarkFolderTreeProps): JSX.Element
         ))}
       </ul>
       {bookmarkFolderData != null && bookmarkFolderData.length > 0 && (
-        <div ref={(c) => { dropRef(c) }} className="grw-drop-item-area">
-          <div className="grw-accept-drop-item">
+        <DragAndDropWrapper
+          useDropMode={true}
+          type={acceptedTypes}
+          onDropItem={itemDropHandler}
+          isDropable={isDroppable}
+        >
+          <div className="grw-drop-item-area">
             <div className="d-flex flex-column align-items-center">
               {t('bookmark_folder.drop_item_here')}
             </div>
           </div>
-        </div>
+        </DragAndDropWrapper>
       )}
     </div>
   );

packages/app/src/components/Bookmarks/DragAndDropWrapper.tsx

@@ -5,7 +5,7 @@ import { useDrag, useDrop } from 'react-dnd';
 import { DragItemDataType } from '~/interfaces/bookmark-info';
 
 type DragAndDropWrapperProps = {
-  item: Partial<DragItemDataType>
+  item?: Partial<DragItemDataType>
   type: string[]
   children: ReactNode
   useDragMode?: boolean

packages/app/src/styles/molecules/_bookmark-folder-tree.scss

@@ -1,6 +1,6 @@
 @use '~/styles/variables' as var;
-$grw-foldertree-item-padding-left: 10px;
-$grw-bookmark-item-padding-left: 45px;
+$grw-foldertree-item-padding-left: 15px;
+$grw-bookmark-item-padding-left: 35px;
 
 .grw-foldertree {
   :global {
@@ -69,98 +69,121 @@ $grw-bookmark-item-padding-left: 45px;
   }
   &:global{
     // To realize a hierarchical structure, set multiplied padding-left to each foldertree-item
-    > .grw-foldertree-item-container {
-      > .grw-drag-drop-container > .list-group-item {
-        padding-left: 0;
-      } &.grw-root-bookmarks {
-        .grw-drag-drop-container > .list-group-item.bookmark-item-list {
-          padding-left: $grw-foldertree-item-padding-left + 45;
+    >.grw-foldertree-item-container.grw-root-bookmarks{
+      > .grw-drag-drop-container {
+        > .list-group-item.bookmark-item-list {
+          padding-left: $grw-bookmark-item-padding-left ;
         }
       }
-      .grw-drag-drop-container {
+    }
+    > .grw-foldertree-item-container {
+      > .grw-drag-drop-container {
+        > .list-group-item {
+          padding-left: 0
+        }
         > .list-group-item.bookmark-item-list {
-          padding-left: $grw-bookmark-item-padding-left;
+          padding-left: $grw-bookmark-item-padding-left + $grw-foldertree-item-padding-left;
         }
       }
       > .grw-foldertree-item-children {
         > .grw-foldertree-item-container {
           > .grw-drag-drop-container {
-            padding-left: $grw-foldertree-item-padding-left;
-          }
-          > .list-group-item.bookmark-item-list {
-            padding-left: $grw-foldertree-item-padding-left + $grw-bookmark-item-padding-left;
+            > .list-group-item {
+              padding: $grw-foldertree-item-padding-left
+            }
+            > .list-group-item.bookmark-item-list {
+              padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 2);
+            }
           }
           > .grw-foldertree-item-children {
             > .grw-foldertree-item-container {
               > .grw-drag-drop-container {
-                padding-left: $grw-foldertree-item-padding-left * 2;
-              }
-              > .list-group-item.bookmark-item-list {
-                padding-left: ($grw-foldertree-item-padding-left * 2) + $grw-bookmark-item-padding-left;
+                > .list-group-item {
+                  padding: $grw-foldertree-item-padding-left * 2
+                }
+                > .list-group-item.bookmark-item-list {
+                  padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 3);
+                }
               }
               > .grw-foldertree-item-children {
                 > .grw-foldertree-item-container {
                   > .grw-drag-drop-container {
-                    padding-left: $grw-foldertree-item-padding-left * 3;
-                  }
-                  > .list-group-item.bookmark-item-list {
-                    padding-left: ($grw-foldertree-item-padding-left * 3) +  $grw-bookmark-item-padding-left;
+                    > .list-group-item {
+                      padding: $grw-foldertree-item-padding-left * 3
+                    }
+                    > .list-group-item.bookmark-item-list {
+                      padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 4);
+                    }
                   }
                   > .grw-foldertree-item-children {
                     > .grw-foldertree-item-container {
                       > .grw-drag-drop-container {
-                        padding-left: $grw-foldertree-item-padding-left * 4;
-                      }
-                      > .list-group-item.bookmark-item-list {
-                        padding-left: ($grw-foldertree-item-padding-left * 4) +  $grw-bookmark-item-padding-left;
+                        > .list-group-item {
+                          padding: $grw-foldertree-item-padding-left * 4
+                        }
+                        > .list-group-item.bookmark-item-list {
+                          padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 5);
+                        }
                       }
                       > .grw-foldertree-item-children {
                         > .grw-foldertree-item-container {
                           > .grw-drag-drop-container {
-                            padding-left: $grw-foldertree-item-padding-left * 5;
-                          }
-                          > .list-group-item.bookmark-item-list {
-                            padding-left: ($grw-foldertree-item-padding-left * 5) +  $grw-bookmark-item-padding-left;
+                            > .list-group-item {
+                              padding: $grw-foldertree-item-padding-left * 5
+                            }
+                            > .list-group-item.bookmark-item-list {
+                              padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 6);
+                            }
                           }
                           > .grw-foldertree-item-children {
                             > .grw-foldertree-item-container {
                               > .grw-drag-drop-container {
-                                padding-left: $grw-foldertree-item-padding-left * 6;
-                              }
-                              > .list-group-item.bookmark-item-list {
-                                padding-left:  ($grw-foldertree-item-padding-left * 6) +  $grw-bookmark-item-padding-left;
+                                > .list-group-item {
+                                  padding: $grw-foldertree-item-padding-left * 6
+                                }
+                                > .list-group-item.bookmark-item-list {
+                                  padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 7);
+                                }
                               }
                               > .grw-foldertree-item-children {
                                 > .grw-foldertree-item-container {
                                   > .grw-drag-drop-container {
-                                    padding-left: $grw-foldertree-item-padding-left * 7;
-                                  }
-                                  > .list-group-item.bookmark-item-list {
-                                    padding-left: ($grw-foldertree-item-padding-left * 7) +  $grw-bookmark-item-padding-left;
+                                    > .list-group-item {
+                                      padding: $grw-foldertree-item-padding-left * 7
+                                    }
+                                    > .list-group-item.bookmark-item-list {
+                                      padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 8);
+                                    }
                                   }
                                   > .grw-foldertree-item-children {
                                     > .grw-foldertree-item-container {
                                       > .grw-drag-drop-container {
-                                        padding-left: $grw-foldertree-item-padding-left * 8;
-                                      }
-                                      > .list-group-item.bookmark-item-list {
-                                        padding-left: ($grw-foldertree-item-padding-left * 8) +  $grw-bookmark-item-padding-left;
+                                        > .list-group-item {
+                                          padding: $grw-foldertree-item-padding-left * 8
+                                        }
+                                        > .list-group-item.bookmark-item-list {
+                                          padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 9);
+                                        }
                                       }
                                       > .grw-foldertree-item-children {
                                         > .grw-foldertree-item-container {
                                           > .grw-drag-drop-container {
-                                            padding-left: $grw-foldertree-item-padding-left * 9;
-                                          }
-                                          > .list-group-item.bookmark-item-list {
-                                            padding-left: ($grw-foldertree-item-padding-left * 9) +  $grw-bookmark-item-padding-left;
+                                            > .list-group-item {
+                                              padding: $grw-foldertree-item-padding-left * 9
+                                            }
+                                            > .list-group-item.bookmark-item-list {
+                                              padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 10);
+                                            }
                                           }
-                                          .grw-foldertree-item-children {
+                                          > .grw-foldertree-item-children {
                                             > .grw-foldertree-item-container {
                                               > .grw-drag-drop-container {
-                                                padding-left: $grw-foldertree-item-padding-left * 10;
-                                              }
-                                              > .list-group-item.bookmark-item-list {
-                                                padding-left: ($grw-foldertree-item-padding-left * 10) +  $grw-bookmark-item-padding-left;
+                                                > .list-group-item {
+                                                  padding: $grw-foldertree-item-padding-left * 10
+                                                }
+                                                > .list-group-item.bookmark-item-list {
+                                                  padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 11);
+                                                }
                                               }
                                             }
                                           }