I've been using a Material UI v4 Treeview with react-dnd and everything works smoothly. However, when I recently upgraded to MUI v5 Treeview, the drag functionality stopped working - the item is no longer draggable. After comparing the two TreeItem implementations, it seems like there have been significant changes and I'm feeling a bit lost.
If you're interested, here are the links to the respective TreeItem files: v4.x TreeItem and MUI TreeItem.
I would greatly appreciate any insights or suggestions on what might be causing this issue. Thank you in advance for your help :)
//recursive function to generate TreeItem tree with Drag embedded
function Box({ treeItem }) {
const [{ isDragging }, drag, preview] = useDrag(() => ({
type: "TREEVIEW",
item: !treeItem.children.length //if the resource has no child
? treeItem.data // we provide only the resource data
: [
treeItem.data,
...flatten(extractChildren(treeItem), extractChildren).map(
//other wise we provide resource + child resources
(x) => delete x.children && x
),
],
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
}));
return (
<>
<DragPreviewImage connect={preview} src={knightImage} />
<TreeItem
nodeId={treeItem.data.TreeID}
label={treeItem.data.TreeName}
ref={drag}
style={{ isDragging }}
>
{treeItem.children &&
treeItem.children.map((treeItem) => <Box treeItem={treeItem} />)}
</TreeItem>
</>
);
}
const renderedListItems = tree.map((treeItem) => (
<Box treeItem={treeItem} />
));