v2.0

package.json

@@ -41,6 +41,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.12.0",
+    "sass": "^1.83.0",
     "vite": "^6.0.1"
   }
-}
+}

src/App.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
-import "./App.css";
-import { MenuBuilder } from "./Component/MenuBuilder";
+import "./app.scss";
+import MenuWrapper from "./Component/MenuWrapper";
 
 const initMenus = [
   {
@@ -59,18 +59,18 @@ const initMenus = [
   },
 ];
 
-function App() {
+const App = () => {
   const [menus, setMenus] = useState(initMenus);
 
   return (
-    <div>
+    <div className={`${classPrefix}-app`}>
       <h1>Wordpress like menu structure</h1>
       <br />
       <hr />
       <br />
-      <MenuBuilder items={menus} setItems={setMenus} />
+      <MenuWrapper menus={menus} setMenus={setMenus} />
     </div>
   );
-}
+};
 
 export default App;

src/Component/CustomDragLayer.jsx

@@ -51,8 +51,6 @@ const CustomDragLayer = ({ menuitems }) => {
           depth={item.depth}
           clone
           childCount={getChildCount(menuitems, item.id) + 1}
-          value={item.id.toString()}
-          otherfields={item}
           menu={item}
           childs={getChildrens(menuitems, item.id)}
         />

src/Component/Menu/MenuItem.jsx

@@ -27,12 +27,11 @@ export const MenuItem = ({
   const [{ handlerId }, setDroppableNodeRef] = useDrop({
     accept: [ITEM_TYPE],
     collect(monitor) {
-      return { handlerId: monitor.getHandlerId() };
+      return { handlerId: monitor.getHandlerId()};
     },
     drop: (item) => {
       onDragEnd({ id: item.id }, { id: menu.id });
     },
-
     hover: (item, monitor) => {
       if (!dndRef.current) {
         return;
@@ -55,7 +54,7 @@ export const MenuItem = ({
     collect: (monitor) => {
       const isDragging = monitor.isDragging();
       if (isDragging) {
-        onDragStart({ active: { id: menu.id } });
+        onDragStart(menu.id);
       }
 
       return { isDragging };
@@ -74,34 +73,32 @@ export const MenuItem = ({
       data-handler-id={handlerId}
       data-depth={depth}
       className={classNames({
-        Wrapper: true,
-        dragging: isDragging,
+        [`${classPrefix}-item-wrapper`]: true,
+        [`${classPrefix}-item-dragging`]: isDragging,
+        // dragging: isDragging,
       })}
       style={{
         ...(!clone
           ? {
               paddingLeft: `${INDENTATION_WIDTH * depth}px`,
             }
           : {}),
-      }}
-      {...props}
-    >
+      }}>
       <div
         className="TreeItem"
         style={{
           height:
             isDragging && childCount
               ? `${childCount * 42 + (childCount - 1) * 9}px`
               : "42px",
-        }}
-      >
+        }}>
         <span
           className="navigation-item-path"
           style={{
             height: branchPathHeight,
-            display: activeId || clone ? "none" : menu?.parentId ? "block" : "none",
-          }}
-        ></span>
+            display:
+              activeId || clone ? "none" : menu?.parentId ? "block" : "none",
+          }}></span>
         <span className={"Text"}>
           {menu?.name}{" "}
           <span
@@ -111,8 +108,7 @@ export const MenuItem = ({
               fontStyle: "italic",
               color: "#50575e",
               marginLeft: "4px",
-            }}
-          >
+            }}>
             {depth > 0 ? "sub item" : ""}
           </span>
         </span>
@@ -150,8 +146,7 @@ const RecursiveItem = (props) => {
           paddingLeft: "0.5rem",
           fontWeight: "600",
           fontSize: "13px",
-        }}
-      >
+        }}>
         {props.child.name}{" "}
         <span
           style={{
@@ -160,8 +155,7 @@ const RecursiveItem = (props) => {
             fontStyle: "italic",
             color: "#50575e",
             marginLeft: "4px",
-          }}
-        >
+          }}>
           sub item
         </span>
       </div>

src/Component/MenuBuilder.jsx → src/Component/MenuWrapper.jsx

@@ -13,8 +13,17 @@ import {
 import CustomDragLayer from "./CustomDragLayer";
 import { MenuItem } from "./Menu/MenuItem";
 
-export function MenuBuilder({ items: itemsProps, setItems }) {
-  const menuList = generateItemChildren(itemsProps);
+const generateItemChildren = (menuList) => {
+  return menuList.map((menu) => {
+    return {
+      ...menu,
+      children: menu?.children ? generateItemChildren(menu.children) : [],
+    };
+  });
+};
+
+const MenuWrapper = ({ menus: menuData, setMenus }) => {
+  const menuList = generateItemChildren(menuData);
   const [activeId, setActiveId] = useState(null);
   const [overId, setOverId] = useState(null);
   const [offsetLeft, setOffsetLeft] = useState(0);
@@ -33,10 +42,8 @@ export function MenuBuilder({ items: itemsProps, setItems }) {
     );
   }, [activeId, menuList]);
 
-  let projected =
-    activeId && overId
-      ? getProjection(flattenedMenus, activeId, overId, offsetLeft)
-      : null;
+  // This is the projected position of the dragged item over the hovered item. Initially set to null
+  let projected = null;
 
   const handleOnHover = (dragId, hoverId, deltaX) => {
     const { depth, parentId } = getProjection(
@@ -59,7 +66,7 @@ export function MenuBuilder({ items: itemsProps, setItems }) {
     const sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
     const newItems = buildTree(sortedItems);
 
-    setItems(newItems);
+    setMenus(newItems);
   };
 
   const getBranchPathHeight = (menu) => {
@@ -75,85 +82,78 @@ export function MenuBuilder({ items: itemsProps, setItems }) {
     return "0px";
   };
 
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
-      {flattenedMenus.map((menu, index) => (
-        <MenuItem
-          key={menu.id}
-          id={menu.id}
-          menu={menu}
-          activeId={activeId}
-          index={index}
-          depth={
-            menu.id === activeId && projected ? projected.depth : menu.depth
-          }
-          childCount={getChildCount(menuList, activeId) + 1}
-          branchPathHeight={getBranchPathHeight(menu)}
-          // Drag and Drop
-          onDragStart={handleDragStart}
-          onDragOver={handleDragOver}
-          onDragEnd={handleDragEnd}
-          onDragHover={handleOnHover}
-        />
-      ))}
-
-      <CustomDragLayer menuitems={menuList} />
-    </div>
-  );
-
-  function handleDragStart({ active: { id: aId } }) {
-    if (activeId === aId || overId === aId) return;
-    setActiveId(aId);
-    setOverId(aId);
-  }
+  const handleDragStart = (menuId) => {
+    if (activeId === menuId || overId === menuId) return;
+    setActiveId(menuId);
+    setOverId(menuId);
+  };
 
-  function handleDragOver(deltaX, id) {
+  const handleDragOver = (deltaX, id) => {
     setOffsetLeft(deltaX);
 
     if (overId === id) return;
     setOverId(id ?? null);
-  }
+  };
 
-  function handleDragEnd() {
-    const active = { id: activeId };
+  const handleDragEnd = () => {
     const over = { id: overId };
+
     if (projected && over) {
       const { depth, parentId } = projected;
 
       const clonedItems = JSON.parse(JSON.stringify(flattenTree(menuList)));
 
       const overIndex = clonedItems.findIndex(({ id }) => id === over.id);
-      const activeIndex = clonedItems.findIndex(({ id }) => id === active.id);
+      const activeIndex = clonedItems.findIndex(({ id }) => id === activeId);
 
       const activeTreeItem = clonedItems[activeIndex];
       clonedItems[activeIndex] = { ...activeTreeItem, depth, parentId };
 
       const sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
       const newItems = buildTree(sortedItems);
 
-      setItems(newItems);
+      setMenus(newItems);
     }
 
     resetState();
-  }
+  };
 
-  function resetState() {
+  const resetState = () => {
     setOverId(null);
     setActiveId(null);
     setOffsetLeft(0);
+  };
+
+  // Get the projection of the dragged item over the hovered item
+  if (activeId && overId) {
+    projected = getProjection(flattenedMenus, activeId, overId, offsetLeft);
   }
-}
 
-const generateItemChildren = (menuList) => {
-  return menuList.map((menu) => {
-    return {
-      ...menu,
-      children: menu?.children ? generateItemChildren(menu.children) : [],
-    };
-  });
+  return (
+    <div className={`${classPrefix}-menu-wrapper`}>
+      {flattenedMenus.map((menu, index) => (
+        <MenuItem
+          key={menu.id}
+          id={menu.id}
+          menu={menu}
+          activeId={activeId}
+          index={index}
+          depth={
+            menu.id === activeId && projected ? projected.depth : menu.depth
+          }
+          childCount={getChildCount(menuList, activeId) + 1}
+          branchPathHeight={getBranchPathHeight(menu)}
+          // Drag and Drop handlers
+          onDragStart={handleDragStart}
+          onDragOver={handleDragOver}
+          onDragEnd={handleDragEnd}
+          onDragHover={handleOnHover}
+        />
+      ))}
+
+      <CustomDragLayer menuitems={menuList} />
+    </div>
+  );
 };
+
+export default MenuWrapper;