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

prevent readding boxes at the end of its parent #59

Closed
wants to merge 3 commits into from

Conversation

bbohlender
Copy link
Contributor

registerBox now updates the existing boxesRef entry, instead of removing it and re-adding it. Also, the entry is not removed when the props change but only removed when the node or its parents change.

Fixes #16

@bbohlender
Copy link
Contributor Author

I maybe was a bit hasty here because the problem is much harder as a component has no way of knowing its index. Also, every asynchronous rearrangement of the children will not notify them in any way, resulting in the same problem.

The current implementation only fixes the problem when a box was already registered and then has changed its properties later on.

I will have to take a deeper look at how this could be achieved.

@saitonakamura
Copy link
Collaborator

Maybe we can traverse a tree from yoga?

@bbohlender
Copy link
Contributor Author

bbohlender commented Aug 23, 2021

Maybe we can traverse a tree from yoga?

not sure how that would fix the problem with not knowing the index regarding react

However, I found a solution, which requires placing an

<IndexChildren>{children}</IndexChildren>

around the children (e.g. the Boxes) to forward them their index in a context.

The working version can be seen on
https://twitter.com/BelaBohlender/status/1429788132145340420

This involves many changes, so I need some time to make it PR ready.

@saitonakamura
Copy link
Collaborator

Ah, I think I didn't understood the problem in the first place. One other idea is to traverse the react tree using children/parent fields.

@giulioz
Copy link
Member

giulioz commented Aug 25, 2021

Is this still a WIP?

@bbohlender
Copy link
Contributor Author

Is this still a WIP?

So my current solution works as follows:
If no index is specified, then boxes are added in timely order, which would be consistent with the current version.
Additionally, an index property can be set at any time, which will be enforced as the index the item appears inside its parent (if possible). If two items have the same index, the timely order will still apply. Indices can be changed at any time and will result in removing and reading the respective yoga-nodes at their new position.
This can be seen at this post: https://twitter.com/BelaBohlender/status/1430465649629933568

However, my current solution has some more changes, which also incorporate using "react-spring" and adding "aspectRatio" and "measureFunc" as flex props.

Especially adding "react-spring" has introduced potentially breaking changes. I can move all the changes in this PR and discuss them, or I can make them into several PR's which would be more work for me, thus taking more time 😄

@bbohlender
Copy link
Contributor Author

see #65

@bbohlender bbohlender closed this Sep 12, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Correct node ordering on mount/unmount
3 participants