diff --git a/src/decorators/__tests__/autoHideContainer-test.js b/src/decorators/__tests__/autoHideContainer-test.js index ef15ee442c..7dc1fe6e54 100644 --- a/src/decorators/__tests__/autoHideContainer-test.js +++ b/src/decorators/__tests__/autoHideContainer-test.js @@ -27,13 +27,21 @@ describe('autoHideContainer', () => { const AutoHide = autoHideContainer(TestComponent); renderer.render(); const out = renderer.getRenderOutput(); - expect(out).toEqualJSX(); + + expect(out).toEqualJSX( +
+ +
+ ); }); describe('props.shouldAutoHideContainer', () => { let AutoHide; let component; let container; + let innerContainer; beforeEach(() => { AutoHide = autoHideContainer(TestComponent); @@ -55,14 +63,15 @@ describe('autoHideContainer', () => { sinon.spy(component, 'render'); props.shouldAutoHideContainer = true; ReactDOM.render(, container); + innerContainer = container.firstElementChild; }); it('hides the container', () => { - expect(container.style.display).toEqual('none'); + expect(innerContainer.style.display).toEqual('none'); }); - it('does not call component.render()', () => { - expect(component.render.called).toBe(false); + it('call component.render()', () => { + expect(component.render.called).toBe(true); }); describe('when set back to false', () => { @@ -72,11 +81,11 @@ describe('autoHideContainer', () => { }); it('shows the container', () => { - expect(container.style.display).toNotEqual('none'); + expect(innerContainer.style.display).toNotEqual('none'); }); it('calls component.render()', () => { - expect(component.render.calledOnce).toBe(true); + expect(component.render.calledTwice).toBe(true); }); }); }); diff --git a/src/decorators/autoHideContainer.js b/src/decorators/autoHideContainer.js index 23485e7fd6..a0b35e4981 100644 --- a/src/decorators/autoHideContainer.js +++ b/src/decorators/autoHideContainer.js @@ -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 ; + const {shouldAutoHideContainer} = this.props; + return ( +
+ +
+ ); } - } - - 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;