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.

Sign up for GitHub

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

Jump to bottom

[Core] Remove isMounted() #3437

Merged
merged 7 commits into from
Feb 24, 2016
Merged

[Core] Remove isMounted() #3437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
768ceef
Remove isMounted from TextField
newoga Feb 23, 2016
38d5d3e
Remove isMounted from dialog (+1 squashed commit)
newoga Feb 24, 2016
2b1e548
Remove isMounted from popover (+1 squashed commit)
newoga Feb 24, 2016
3c50065
Remove isMounted from ripple components
newoga Feb 24, 2016
5820720
Remove isMounted from transition-group components
newoga Feb 24, 2016
db35e80
Enable eslint rule react/no-is-mounted
newoga Feb 24, 2016
17cb940
Remove underscores from focus-ripple
newoga Feb 24, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ rules:
react/no-direct-mutation-state: 2
react/no-multi-comp: 0 # Wishlist, one day
react/no-unknown-property: 2
react/no-is-mounted: 0 # Wishlist, one day
react/no-is-mounted: 2
react/prefer-arrow-callback: 0 # Wishlist, one day
react/prefer-es6-class: 0 # Wishlist, one day
react/prop-types: 2
Expand Down
10 changes: 5 additions & 5 deletions src/TextField/TextField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,20 +332,20 @@ const TextField = React.createClass({
},

blur() {
if (this.isMounted()) this._getInputNode().blur();
if (this.input) this._getInputNode().blur();
},

focus() {
if (this.isMounted()) this._getInputNode().focus();
if (this.input) this._getInputNode().focus();
},

getValue() {
return this.isMounted() ? this._getInputNode().value : undefined;
return this.input ? this._getInputNode().value : undefined;
},

_getInputNode() {
return (this.props.children || this.props.multiLine) ?
this.refs.input.getInputNode() : ReactDOM.findDOMNode(this.refs.input);
this.input.getInputNode() : ReactDOM.findDOMNode(this.input);
},

_handleInputBlur(event) {
Expand Down Expand Up @@ -436,7 +436,7 @@ const TextField = React.createClass({

const inputProps = {
id: inputId,
ref: 'input',
ref: (elem) => this.input = elem,
onBlur: this._handleInputBlur,
onFocus: this._handleInputFocus,
disabled: this.props.disabled,
Expand Down
11 changes: 7 additions & 4 deletions src/dialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,11 @@ const TransitionItem = React.createClass({
});
},

componentWillUnmount() {
clearTimeout(this.enterTimeout);
clearTimeout(this.leaveTimeout);
},

componentWillEnter(callback) {
this.componentWillAppear(callback);
},
Expand All @@ -58,7 +63,7 @@ const TransitionItem = React.createClass({
},
});

setTimeout(callback, 450); // matches transition duration
this.enterTimeout = setTimeout(callback, 450); // matches transition duration
},

componentWillLeave(callback) {
Expand All @@ -69,9 +74,7 @@ const TransitionItem = React.createClass({
},
});

setTimeout(() => {
if (this.isMounted()) callback();
}, 450); // matches transition duration
this.leaveTimeout = setTimeout(callback, 450); // matches transition duration
},

render() {
Expand Down
16 changes: 9 additions & 7 deletions src/popover/popover.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,13 +161,11 @@ const Popover = React.createClass({
} else {
if (nextProps.animated) {
this.setState({closing: true});
this._timeout = setTimeout(() => {
if (this.isMounted()) {
this.setState({
open: false,
muiTheme: newMuiTheme,
});
}
this.timeout = setTimeout(() => {
this.setState({
open: false,
muiTheme: newMuiTheme,
});
}, 500);
} else {
this.setState({
Expand All @@ -183,6 +181,10 @@ const Popover = React.createClass({
this.setPlacement();
},

componentWillUnmount() {
clearTimeout(this.timeout);
},

renderLayer() {
const {
animated,
Expand Down
13 changes: 7 additions & 6 deletions src/ripples/circle-ripple.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,11 @@ const CircleRipple = React.createClass({
};
},

componentWillUnmount() {
clearTimeout(this.enterTimer);
clearTimeout(this.leaveTimer);
},

componentWillAppear(callback) {
this._initializeAnimation(callback);
},
Expand All @@ -56,9 +61,7 @@ const CircleRipple = React.createClass({
style.opacity = 0;
//If the animation is aborted, remove from the DOM immediately
const removeAfter = this.props.aborted ? 0 : 2000;
setTimeout(() => {
if (this.isMounted()) callback();
}, removeAfter);
this.enterTimer = setTimeout(callback, removeAfter);
},

_animate() {
Expand All @@ -73,9 +76,7 @@ const CircleRipple = React.createClass({
const style = ReactDOM.findDOMNode(this).style;
style.opacity = this.props.opacity;
autoPrefix.set(style, 'transform', 'scale(0)', this.props.muiTheme);
setTimeout(() => {
if (this.isMounted()) callback();
}, 0);
this.leaveTimer = setTimeout(callback, 0);
},

render() {
Expand Down
26 changes: 14 additions & 12 deletions src/ripples/focus-ripple.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,21 +34,25 @@ const FocusRipple = React.createClass({

componentDidMount() {
if (this.props.show) {
this._setRippleSize();
this._pulsate();
this.setRippleSize();
this.pulsate();
}
},

componentDidUpdate() {
if (this.props.show) {
this._setRippleSize();
this._pulsate();
this.setRippleSize();
this.pulsate();
} else {
if (this._timeout) clearTimeout(this._timeout);
if (this.timeout) clearTimeout(this.timeout);
}
},

_getRippleElement(props) {
componentWillUnmount() {
clearTimeout(this.timeout);
},

getRippleElement(props) {
const {
color,
innerStyle,
Expand All @@ -72,9 +76,7 @@ const FocusRipple = React.createClass({
return <div ref="innerCircle" style={prepareStyles(Object.assign({}, innerStyles))} />;
},

_pulsate() {
if (!this.isMounted()) return;

pulsate() {
const innerCircle = ReactDOM.findDOMNode(this.refs.innerCircle);
if (!innerCircle) return;

Expand All @@ -84,10 +86,10 @@ const FocusRipple = React.createClass({
const nextScale = currentScale === startScale ? endScale : startScale;

autoPrefix.set(innerCircle.style, 'transform', nextScale, this.props.muiTheme);
this._timeout = setTimeout(this._pulsate, pulsateDuration);
this.timeout = setTimeout(this.pulsate, pulsateDuration);
},

_setRippleSize() {
setRippleSize() {
const el = ReactDOM.findDOMNode(this.refs.innerCircle);
const height = el.offsetHeight;
const width = el.offsetWidth;
Expand Down Expand Up @@ -116,7 +118,7 @@ const FocusRipple = React.createClass({
left: 0,
}, style);

const ripple = show ? this._getRippleElement(this.props) : null;
const ripple = show ? this.getRippleElement(this.props) : null;

return (
<ScaleInTransitionGroup
Expand Down
13 changes: 7 additions & 6 deletions src/transition-groups/scale-in-child.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,11 @@ const ScaleInChild = React.createClass({
this.setState({muiTheme: newMuiTheme});
},

componentWillUnmount() {
clearTimeout(this.enterTimer);
clearTimeout(this.leaveTimer);
},

componentWillAppear(callback) {
this._initializeAnimation(callback);
},
Expand All @@ -78,9 +83,7 @@ const ScaleInChild = React.createClass({
style.opacity = '0';
autoPrefix.set(style, 'transform', `scale(${this.props.minScale})`, this.state.muiTheme);

setTimeout(() => {
if (this.isMounted()) callback();
}, 450);
this.leaveTimer = setTimeout(callback, 450);
},

_animate() {
Expand All @@ -96,9 +99,7 @@ const ScaleInChild = React.createClass({
style.opacity = '0';
autoPrefix.set(style, 'transform', 'scale(0)', this.state.muiTheme);

setTimeout(() => {
if (this.isMounted()) callback();
}, this.props.enterDelay);
this.enterTimer = setTimeout(callback, this.props.enterDelay);
},

render() {
Expand Down
13 changes: 7 additions & 6 deletions src/transition-groups/slide-in-child.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,11 @@ const SlideInChild = React.createClass({
this.setState({muiTheme: newMuiTheme});
},

componentWillUnmount() {
clearTimeout(this.enterTimer);
clearTimeout(this.leaveTimer);
},

componentWillEnter(callback) {
const style = ReactDOM.findDOMNode(this).style;
const x = this.props.direction === 'left' ? '100%' :
Expand All @@ -61,9 +66,7 @@ const SlideInChild = React.createClass({
style.opacity = '0';
autoPrefix.set(style, 'transform', `translate3d(${x}, ${y}, 0)`, this.state.muiTheme);

setTimeout(() => {
if (this.isMounted()) callback();
}, this.props.enterDelay);
this.enterTimer = setTimeout(callback, this.props.enterDelay);
},

componentDidEnter() {
Expand All @@ -83,9 +86,7 @@ const SlideInChild = React.createClass({
style.opacity = '0';
autoPrefix.set(style, 'transform', `translate3d(${x}, ${y}, 0)`, this.state.muiTheme);

setTimeout(() => {
if (this.isMounted()) callback();
}, 450);
this.leaveTimer = setTimeout(callback, 450);
},

render() {
Expand Down