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;