Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: fixes bug where cannot expand when dropping on empty children #70

Closed
wants to merge 1 commit into from

Conversation

AssisrMatheus
Copy link

@AssisrMatheus AssisrMatheus commented May 17, 2022

Usually items starts without children, so the collapse arrow is not displayed as expected. But when dragging into one of those items, adding children to them, the hasChildren flag is not updated, so the arrow still doesn't show up, even thought the item now have children. And then you cannot expand to see its children

@lukasbach
Copy link
Owner

Hi @AssisrMatheus, thanks for your contribution! Can you please explain which issue you are facing?

The prop hasChildren denotes whether an item should behave like a container that has children, i.e. can expand/collapse and take items. So if this is false for an item, it should never be able to expand, even if the user attempts to drop items onto it. So if you have an item that should be able to accept children and that should be able to expand or collapse, it should have hasChildren set to true beforehand. Yes, this is not a super intuitively named variable, I might change it in the future, but don't want to for now since it would change the public interface.

@madhums
Copy link

madhums commented Jul 27, 2022

So if you have an item that should be able to accept children and that should be able to expand or collapse, it should have hasChildren set to true beforehand

Ah this is not very clear!

💡 Perhaps you can introduce another variable canHaveChildren - which is more representative of changes the tree would go through over time. hasChildren is only representative of current state (not of future).

@madhums
Copy link

madhums commented Jul 27, 2022

Also, it seems like when you provide hasChildren, the items get an icon - as if they can be expanded. For this it's better to check for children.length > 0 and keep hasChildren (or canHaveChildren) for whether they can have children (on drop functionality)

@madhums
Copy link

madhums commented Jul 27, 2022

It can be fixed if you implement your own data provider, for exmaple:

const dataProvider = new StaticTreeDataProvider(dataUsageTree, (item, data) => ({ ...item, data }));
dataProvider.onChangeItemChildren = function (itemId, newChildren) {
  this.data.items[itemId].hasChildren = newChildren.length > 0;
  this.data.items[itemId].children = newChildren;
  this.onDidChangeTreeDataEmitter.emit([itemId]);
};

return (
  <div>
    <UncontrolledTreeEnvironment
      dataProvider={dataProvider}
      canDragAndDrop={true}
      canReorderItems={true}
      canDropOnItemWithChildren={true}
      canDropOnItemWithoutChildren={true}
      viewState={{}}>
      ...
    </UncontrolledTreeEnvironment>
  </div>
)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants