-
Notifications
You must be signed in to change notification settings - Fork 516
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(autoHideContainer): dont prevent render with
shouldComponentUpdate
If you click on a DOM element which has a state (ex radio button), React wont see this state change because children component of `autoHideContainer` wont be updated because of the implementation of `shouldComponentUpdate`. It's a weird bug where UI and state aren't in sync because the navigator saves on it's own the state of the DOM element. fixes #2066
- Loading branch information
Showing
2 changed files
with
26 additions
and
45 deletions.
There are no files selected for viewing
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,45 +1,17 @@ | ||
/* eslint-disable react/no-find-dom-node */ | ||
import React, {Component, PropTypes} from 'react'; | ||
|
||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
|
||
function autoHideContainer(ComposedComponent) { | ||
class AutoHide extends React.Component { | ||
componentDidMount() { | ||
this._hideOrShowContainer(this.props); | ||
} | ||
|
||
componentWillReceiveProps(nextProps) { | ||
if (this.props.shouldAutoHideContainer === nextProps.shouldAutoHideContainer) { | ||
return; | ||
} | ||
|
||
this._hideOrShowContainer(nextProps); | ||
} | ||
|
||
shouldComponentUpdate(nextProps) { | ||
return nextProps.shouldAutoHideContainer === false; | ||
} | ||
|
||
_hideOrShowContainer(props) { | ||
const container = ReactDOM.findDOMNode(this).parentNode; | ||
container.style.display = props.shouldAutoHideContainer === true ? 'none' : ''; | ||
} | ||
export default function(ComposedComponent) { | ||
return class AutoHide extends Component { | ||
static displayName = `${ComposedComponent.name}-AutoHide` | ||
static propTypes = {shouldAutoHideContainer: PropTypes.bool.isRequired} | ||
|
||
render() { | ||
return <ComposedComponent {...this.props} />; | ||
const {shouldAutoHideContainer} = this.props; | ||
return ( | ||
<div style={{display: shouldAutoHideContainer ? 'none' : ''}}> | ||
<ComposedComponent {...this.props} /> | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
AutoHide.propTypes = { | ||
shouldAutoHideContainer: React.PropTypes.bool.isRequired, | ||
...ComposedComponent.propTypes, | ||
}; | ||
|
||
// precise displayName for ease of debugging (react dev tool, react warnings) | ||
AutoHide.displayName = `${ComposedComponent.name}-AutoHide`; | ||
|
||
return AutoHide; | ||
} | ||
|
||
export default autoHideContainer; |