modal.js

var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');

var React = require('react');
var ModalPortal = React.createFactory(require('./ModalPortal'));
var ariaAppHider = require('../helpers/ariaAppHider');
var injectCSS = require('../helpers/injectCSS');

var Modal = module.exports = React.createClass({

  displayName: 'Modal',

  statics: {
    setAppElement: ExecutionEnvironment.canUseDOM ? ariaAppHider.setElement : function() {},
    injectCSS: ExecutionEnvironment.canUseDOM ? injectCSS : function() {}
  },

  propTypes: {
    isOpen: React.PropTypes.bool.isRequired,
    onRequestClose: React.PropTypes.func,
    appElement: React.PropTypes.instanceOf(HTMLElement),
    closeTimeoutMS: React.PropTypes.number,
    ariaHideApp: React.PropTypes.bool
  },

  getDefaultProps: function () {
    return {
      isOpen: false,
      ariaHideApp: true,
      closeTimeoutMS: 0
    };
  },

  componentDidMount: function() {
    if (ExecutionEnvironment.canUseDOM) {
      this.node = document.createElement('div');
      this.node.className = 'ReactModalPortal';
      document.body.appendChild(this.node);
      this.renderPortal(this.props);
    }
  },

  componentWillReceiveProps: function(newProps) {
    if (ExecutionEnvironment.canUseDOM) this.renderPortal(newProps);
  },

  componentWillUnmount: function() {
    if (this.node) {
      React.unmountComponentAtNode(this.node);
      document.body.removeChild(this.node);
    }
  },

  renderPortal: function(props) {
    if (props.ariaHideApp) {
      ariaAppHider.toggle(props.isOpen, props.appElement);
    }
    sanitizeProps(props);
    if (this.portal)
      this.portal.setProps(props);
    else
      this.portal = React.render(ModalPortal(props), this.node);
  },

  render: function () {
    return null;
  }
});

function sanitizeProps(props) {
  delete props.ref;
}