Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Give PersistedElement a key #2036

Merged
merged 3 commits into from
Jul 4, 2018
Merged

Conversation

dbkr
Copy link
Member

@dbkr dbkr commented Jul 3, 2018

So there can be more than one on a page

So there can be more than one on a page
@dbkr dbkr requested a review from a team July 3, 2018 13:44

return <div ref={this.collectChildContainer}></div>;
}
}

PersistedElement.propTypes = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not the inline

static propTypes = {
...
};

syntax which it seems most of our ES6 classes use?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(more readable to have it at the top of a class rather than not in it and completely below it IMO)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, I thought we were mostly doing it this way. This probably is more legible though.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

static propTypes: 26 instances
.propTypes = {: 40 instances

so yes you're right, but I believe most of them are from before people realised babel lets us use define inline static variables and is more readable. Feel free to ignore though as you're right with mostly the old way


return <div ref={this.collectChildContainer}></div>;
}
}

PersistedElement.propTypes = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(more readable to have it at the top of a class rather than not in it and completely below it IMO)

Copy link
Member

@t3chguy t3chguy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM.
Thanks!

Copy link
Contributor

@lukebarnard1 lukebarnard1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So there can be more than one on a page

But they have the same Z_INDEX. Maybe the Z-index should be put into CSS on the class that needs it and then other persisted elements don't inherit the same z-index?

@dbkr
Copy link
Member Author

dbkr commented Jul 3, 2018

Wouldn't this only be a problem if there are two in the same place though? In which case the browser will revert to document tree order which is how they'd behave normally?

@dbkr
Copy link
Member Author

dbkr commented Jul 3, 2018

Actually I guess the document tree order wouldn't match since it would depend on the order they were instantiated. Is the z-index here actually necessary for persistedelements or is it a stickerpicker thing?

@lukebarnard1
Copy link
Contributor

Is the z-index here actually necessary for persistedelements or is it a stickerpicker thing?

Persisted elements by nature exist in their own DOM tree, so if they're positioned over a DOM tree that contains elements with the z-index specified, i.e. the context menu in the sticker-picker's case, it will need to have it's z-index set accordingly.

This is going to get messy quite quickly if the z-index isn't added to the css of the elements that need it. Managing it in the CSS is hard enough as it is.

@dbkr
Copy link
Member Author

dbkr commented Jul 3, 2018

I'm not sure I follow. Isn't the desired effect to have the regular document, then any PersistedElements just above that, then any other things which float above, eg. ContextMenus? In which case all PersistedElements will have the same z-index. (All of this assumes they share a stacking context of course).

@dbkr
Copy link
Member Author

dbkr commented Jul 3, 2018

IRL summary: the thing I was missing was that StickerPicker appears within a context menu which itself floats above the document, so it needs a z-index higher than that of the context menu.

As it's not a thing that's necessary for other PersistedElements,
only the sticker picker because it has to sit above the ContextMenu
it sits in.
@dbkr
Copy link
Member Author

dbkr commented Jul 3, 2018

@lukebarnard1 ptal

@lukebarnard1 lukebarnard1 merged commit bfbd499 into develop Jul 4, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants