-
-
Notifications
You must be signed in to change notification settings - Fork 94
Controlled Environment - Expand/Collapse All, Drag and Drop #254
Unanswered
natetewelde
asked this question in
Q&A
-
I was previously using an uncontrolled environment to accomplish about 90% of what I needed until I ran across loading data from a DB. I then decided to make the switch over to a controlled environment and found that the data updated the tree correctly with the fetched items. Now I'm struggling to find any documentation surrounding how to utilize drag and drop as well as DOM manipulation with a controlled environment. Everything I've seen so far has just been around uncontrolled environments.
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 1 comment
-
here's a simple implementation that mimics the UncontrolledTreeEnvironment:
const onDrop = (items: TreeItem<TreeItemData>[], target: DraggingPosition) => {
if (target.targetType === "between-items") {
setData((prevData) => {
if (!prevData) return prevData;
const parentNode = prevData[target.parentItem];
const insertIndex = target.childIndex;
const itemIds = items.map((item) => item.index);
// Remove the items from their previous parent
Object.values(prevData).forEach((item) => {
if (item.children) {
item.children = item.children.filter((child) => !itemIds.includes(child));
}
});
// Add the items to the new parent at the new position
const newData = {
...prevData,
[parentNode.index]: {
...parentNode,
children: [
...(parentNode.children ?? []).slice(0, insertIndex),
...itemIds,
...(parentNode.children ?? []).slice(insertIndex),
],
},
};
return newData;
});
}
if (target.targetType === "item") {
setData((prevData) => {
if (!prevData) return prevData;
const parentNode = prevData[target.targetItem];
const itemIds = items.map((item) => item.index);
// Remove the items from their previous parent
Object.values(prevData).forEach((item) => {
if (item.children) {
item.children = item.children.filter((child) => !itemIds.includes(child));
}
});
// Add the items to the new parent
const newData = {
...prevData,
[parentNode.index]: {
...parentNode,
children: [...(parentNode.children ?? []), ...itemIds],
},
};
return newData;
});
}
};
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment