[Portal] SSR support, one fewer element in Overlay #2205
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 4 commits
March 6, 2018 11:33
- created DOM element receives className - remove containerRef prop and associated element
- use TransitionGroup as the wrapper element!!
giladgray
commented
Mar 6, 2018
| @@ -144,7 +145,7 @@ export class Overlay extends React.PureComponent<IOverlayProps, IOverlayState> { | |||
| // an HTMLElement that contains the backdrop and any children, to query for focus target | |||
| public containerElement: HTMLElement; | |||
| private refHandlers = { | |||
| container: (ref: HTMLDivElement) => (this.containerElement = ref), | |||
| container: (ref: React.ReactInstance) => (this.containerElement = findDOMNode(ref) as HTMLElement), | |||
There was a problem hiding this comment.
this now receives the Portal instance, so we unwrap it into underlying DOM node.
refactor TransitionGroup usagePreview: documentation | landing | table |
adidahiya
suggested changes
Mar 7, 2018
| // CSS position mode under the hood. also, make the container focusable so we can | ||
| // trap focus inside it (via `enforceFocus`). | ||
| const decoratedChild = | ||
| typeof child !== "object" ? ( |
There was a problem hiding this comment.
nit: prefer reversing these conditions. read as if (truthy looking thing) ... else
| @@ -31,7 +24,7 @@ export interface IPortalState { | |||
| } | |||
|
|
|||
| export interface IPortalContext { | |||
| /** Additional class to add to portal element */ | |||
| /** Additional CSS classes to add to all `Portal elements in this React context. */ | |||
There was a problem hiding this comment.
missing trailing backtick in docs
| // Only render `children` once this component has mounted in a browser environment, so they are | ||
| // immediately attached to the DOM tree and can do DOM things like measuring or `autoFocus`. | ||
| // See long comment on componentDidMount in https://reactjs.org/docs/portals.html#event-bubbling-through-portals | ||
| return typeof document !== "undefined" && this.state.hasMounted |
There was a problem hiding this comment.
this is a little too clever to read as a ternary, please make it more verbose w/ if () else. I think spelling out the 3 cases is quite useful:
if (typeof document === "undefined") {
return null;
} else if (!this.state.hasMounted) {
return null;
} else {
...
}| } | ||
| } | ||
|
|
||
| private createElement() { |
There was a problem hiding this comment.
nit: createContainerElement
| describe("Core isomorphic rendering", () => { | ||
| generateIsomorphicTests(Core, customProps, customChildren, skipList); | ||
| generateIsomorphicTests(Core, customProps, customChildren); |
ternary style refactorsPreview: documentation | landing | table |
Merge branch 'develop' of github.com:palantir/blueprint into gg/portal-ssrPreview: documentation | landing | table |
adidahiya
approved these changes
Mar 8, 2018
This was referenced Mar 13, 2018
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #2191
Changes proposed in this pull request:
(ok sorry there are some breaking changes here, but I promise they're worth it)
Portalto support SSR by checking for browser environment and creating element inDidMount()instead of constructorPortalis now treated as its root, soclassNameis applied to this element. this also means that no dummy element is created inside the portal, making it one level shallower.containerRefprop has been removed as it no longer makes sense. users can simply apply refs to the elements they render in the portal.Overlayto not usecontainerRefTransitionGroupas the wrapper element removes one empty element from the DOM tree:before:
after: