fix(RAC): Tree DnD followup + docs #8302
Conversation
…er last child' or 'after parent'
|
Build successful! 🎉 |
reidbarber
changed the title
|
Build successful! 🎉 |
|
Build successful! 🎉 |
…be "before" its first actual child item.
|
Build successful! 🎉 |
There was a problem hiding this comment.
One issue I found, if I try to move an item by mouse from its current position, to be the last item in the previous sibilings's children, I can't do that.
Steps:
with mouse, open Projects
try to move Reports to be after Project 5
Overall looks pretty good though, will give approval in case any of this would be followup
…ey is selected (#8337) * Fix tree docs example by accounting for child keys that are included in a selected parent * update getKeys to automatically filter out child keys if parent key is also selected * fix infinite loop and add test
|
Build successful! 🎉 |
| if (potentialTargets.length === 0) { | ||
| return {type: 'root'}; | ||
| } |
There was a problem hiding this comment.
After some experimenting, I decided returning root here makes the most sense. You can test this via http://localhost:9003/?path=/story/react-aria-components--tree-with-drag-and-drop&args=dropFunction:onReorder;shouldAcceptItemDrop:folders;shouldAllowInsert:!false&providerSwitcher-express=false&strict=true (replace localhost with whatever build link you are using) and then:
- Drag Projects into the right tree
- Expand the newly dropped folder
- Attempt to drop more items from the left tree onto the right tree and notice the root being returned as the target when hovering the whitespace or a non-folder item
Returning the root when hovering an invalid drop target seems to make the most sense here and is inline with the behavior see if you ONLY have onRootDrop available (see https://reactspectrum.blob.core.windows.net/reactspectrum/2aa18518f267f6fafd9225d8bc867db2d2c9a747/storybook/index.html?path=/story/tableview-drag-and-drop--drag-between-tables-root-only&providerSwitcher-express=false).
Perhaps it is weird that the end user doesn't have a way to distinguish between an invalid drop target and if the collection only takes root drops, but it seems better than potentially blocking someone from a root drop completely if there wasn't any white space to drop on.
There was a problem hiding this comment.
also, note that the above table story will exhibit the same behavior as the tree even if it had other allowed drop operations (e.g. onItemDrop), the root is targeted if hovering over a invalid drop target
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
Co-authored-by: Devon Govett <[email protected]>
|
Build successful! 🎉 |
|
Build successful! 🎉 |
| let node = collection.getItem(key); | ||
| let isChild = false; | ||
| if (node && node?.parentKey) { | ||
| for (let potentialParentKey of selectionManager.selectedKeys) { |
There was a problem hiding this comment.
Could be faster to just walk up the parent keys and check if any of them are also in selectedKeys. Currently this is an n^2 algorithm since you have a nested loop over all keys, but it could be done in linear time since selectedKeys is a set. You just need to check if any of the parent keys of a node are also in selectedKeys.
outer: for (let key of selectionManager.selectedKeys) {
let node = collection.getItem(key);
while (node && node.parentKey != null) {
node = collection.getItem(node.parentKey);
if (node && selectionManager.isSelected(node.key) {
continue outer;
}
}
keys.add(key);
}
|
Build successful! 🎉 |
## API Changes
react-aria-components/react-aria-components:TreeRenderProps TreeRenderProps {
+ allowsDragging: boolean
isEmpty: boolean
isFocusVisible: boolean
isFocused: boolean
+ selectionMode: SelectionMode
state: TreeState<unknown>
} |
Story fixes:
DnD fixes:
Docs:
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: