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

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

Merged
merged 6 commits into from
Feb 17, 2018

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 new feature New feature or request 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
new feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants