Trying to implement drag and drop for menu items in antd.
Individual menu items:
function SidebarItem({ item, overlay }: TChildProp) {
return (
<Menu.Item
onClick={(lala) => console.log(lala)}
style={{ margin: "0px" }}
key={item.key}
icon={item.icon}
>
{item.label}
</Menu.Item>
);
}
Adding draggable to the menu item:
function DraggableSidebarItem({ item, ...rest }: TChildProp) {
const { attributes, listeners, setNodeRef } = useDraggable({
id: uuidv4(),
data: {
item,
fromSidebar: true,
},
});
return (
<div key={item.key} ref={setNodeRef} {...listeners} {...attributes}>
<SidebarItem key={item.key} item={item} {...rest} />
</div>
);
}
Using the draggable menu item to render submenu items:
function TemplateCreationSideBar() {
const openMenuKeys: string[] = [
"Form_Organiser",
"Form_Components",
"Input_Types",
];
// Handling addition and removal of sections/components/input types
// const handleComponentMenuClick = (key: string) => {
// console.log(key);
// };
return (
<div>
<Menu
mode="inline"
style={{ height: "100%", width: "100%" }}
defaultOpenKeys={openMenuKeys}
// inlineCollapsed={false}
// onClick={(item) => {
// handleComponentMenuClick(item.key);
// }}
>
{Object.keys(fields).map((parentKey) => {
return (
<Menu.SubMenu
title={fields[parentKey].label}
key={fields[parentKey].key}
onTitleClick={(item) => console.log(item)}
icon={fields[parentKey].icon}
>
{fields[parentKey].children?.map((child) => {
return <DraggableSidebarItem key={child.key} item={child} />;
})}
</Menu.SubMenu>
);
})}
</Menu>
</div>
);
}
However, when i click on one item in the menu, all items will be focused/selected. When console.log onClick of each item, the keys are all undefined, hence duplicated.
Errors in console:
Warning: Duplicated key 'undefined' used in Menu by path [Input_Types]
Warning: Duplicated key 'undefined' used in Menu by path [Form_Components]