Skip to content

[core] Remove direct references to window/document objects#10328

Merged
oliviertassinari merged 6 commits intomui:v1-betafrom
ianschmitz:document-refs
Feb 17, 2018
Merged

[core] Remove direct references to window/document objects#10328
oliviertassinari merged 6 commits intomui:v1-betafrom
ianschmitz:document-refs

Conversation

@ianschmitz
Copy link
Contributor

Continuing my crusade to remove all references to global window/document objects! 🎉

Only remaining pieces I've found are the EventListener components, which pass a target="window" prop. I tried looking to see if i could improve this from within the react-event-listener source code, but didn't come up with a solution there.

@oliviertassinari
Copy link
Member

oliviertassinari commented Feb 17, 2018

Only remaining pieces I've found are the EventListener components, which pass a target="window" prop.

react-event-listener supports the target={window} API too.

function getOwnerDocument(element) {
return ownerDocument(ReactDOM.findDOMNode(element));
function getOwnerDocument(container, modalInstance) {
const node = container || ReactDOM.findDOMNode(modalInstance);
Copy link
Member

Choose a reason for hiding this comment

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

Why do we need || ReactDOM.findDOMNode(modalInstance)? I would have expected this.mountNode to be enough.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think you are correct. I was originally using the this.props.container which ended up being troublesome. I'll update this.

Copy link
Member

Choose a reason for hiding this comment

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

I'm on it.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Damn you're fast! Was just in the middle of fixing :P

@oliviertassinari oliviertassinari changed the title Remove remaining direct references to window/document objects [core] Remove remaining direct references to window/document objects Feb 17, 2018
@oliviertassinari oliviertassinari added type: new feature Expand the scope of the product to solve a new problem. core labels Feb 17, 2018
target="window"
onResize={this.handleResize}
ref={node => {
this.mountNode = node;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm second guessing this. Maybe i'm just tired. Let me double check that this works as expected.

Copy link
Member

Choose a reason for hiding this comment

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

What do you mean?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

this.mountNode will be a reference to the EventListener instance. I am then doing ownerDocument(this.mountNode) which is wrong since EventListener will never have an ownerDocument property on it.

@@ -1,4 +1,5 @@
import React from 'react';
import { findDOMNode } from 'react-dom';
Copy link
Member

Choose a reason for hiding this comment

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

For consistency: import ReactDOM from 'react-dom';


handleResize = debounce(() => {
this.updateWidth(window.innerWidth);
const win = ownerWindow(ReactDOM.findDOMNode(this.mountNode));
Copy link
Contributor Author

@ianschmitz ianschmitz Feb 17, 2018

Choose a reason for hiding this comment

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

This appears to work better. I'm still not 100% confident in its function.

findDOMNode(this.mountNode) always returns null from componentDidMount when a width or initialWidth prop isn't provided (such as in the docs), since we render null when width isn't defined yet in props or state.

Copy link
Member

Choose a reason for hiding this comment

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

You are right. The logic is broken. I'm surprised the CI is green.

Copy link
Member

Choose a reason for hiding this comment

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

Maybe you can leave the withWidth file unchanged so we can merge the other changes right away?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Can do. When findDOMNode returns null the ownerWindow function just defaults to returning the global window object.

@oliviertassinari oliviertassinari merged commit f0dbed1 into mui:v1-beta Feb 17, 2018
@oliviertassinari oliviertassinari changed the title [core] Remove remaining direct references to window/document objects [core] Remove direct references to window/document objects Feb 17, 2018
@oliviertassinari
Copy link
Member

Thanks. The withWidth is going to be challenging to get right. What about using findDOMNode(this) over the ref in the did update?

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

Labels

type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants