import React from './react-es6';

export default = {
  propTypes: {
    container: React.PropTypes.object.isRequired
  },

  getDefaultProps: function () {
    return {
      container: document.body
    };
  },

  componentWillUnmount: function () {
    this._unrenderOverlay();
    this.getContainerDOMNode()
      .removeChild(this._overlayTarget);
    this._overlayTarget = null;
  },

  componentDidUpdate: function () {
    this._renderOverlay();
  },

  componentDidMount: function () {
    this._renderOverlay();
  },

  _mountOverlayTarget: function () {
    this._overlayTarget = document.createElement('div');
    this.getContainerDOMNode()
      .appendChild(this._overlayTarget);
  },

  _renderOverlay: function () {
    if (!this._overlayTarget) {
      this._mountOverlayTarget();
    }

    // Save reference to help testing
    this._overlayInstance = React.renderComponent(this.renderOverlay(), this._overlayTarget);
  },

  _unrenderOverlay: function () {
    React.unmountComponentAtNode(this._overlayTarget);
    this._overlayInstance = null;
  },

  getOverlayDOMNode: function() {
    if (!this.isMounted()) {
      throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
    }

    return this._overlayInstance.getDOMNode();
  },

  getContainerDOMNode: function() {
    return React.isValidComponent(this.props.container) ?
      this.props.container.getDOMNode() : this.props.container;
  }
};
import React from './react-es6';

export default = {
  propTypes: {
    container: React.PropTypes.object.isRequired
  },

  getDefaultProps: function () {
    return {
      container: typeof document !== 'undefined' ? document.body : null
    };
  },

  componentWillUnmount: function () {
    this._unrenderOverlay();
    this.getContainerDOMNode()
      .removeChild(this._overlayTarget);
    this._overlayTarget = null;
  },

  componentDidUpdate: function () {
    this._renderOverlay();
  },

  componentDidMount: function () {
    this._renderOverlay();
  },

  _mountOverlayTarget: function () {
    this._overlayTarget = document.createElement('div');
    this.getContainerDOMNode()
      .appendChild(this._overlayTarget);
  },

  _renderOverlay: function () {
    if (!this._overlayTarget) {
      this._mountOverlayTarget();
    }

    // Save reference to help testing
    this._overlayInstance = React.renderComponent(this.renderOverlay(), this._overlayTarget);
  },

  _unrenderOverlay: function () {
    React.unmountComponentAtNode(this._overlayTarget);
    this._overlayInstance = null;
  },

  getOverlayDOMNode: function() {
    if (!this.isMounted()) {
      throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
    }

    return this._overlayInstance.getDOMNode();
  },

  getContainerDOMNode: function() {
    return React.isValidComponent(this.props.container) ?
      this.props.container.getDOMNode() : this.props.container;
  }
};
Check for the existence of document before accessing it.
Check for the existence of document before accessing it.

Since document is referenced within getDefaultProps which unlike
componentDidMount is run in both browser and node environments we need
to make sure we check it exists before accessing it.
