react-tray/lib/components/Tray.js

An accessible tray component useful for navigation menus

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true
});

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _TrayPortal = require('./TrayPortal');

var _TrayPortal2 = _interopRequireDefault(_TrayPortal);

var _helpersCustomPropTypes = require('../helpers/customPropTypes');

var renderSubtreeIntoContainer = _reactDom2['default'].unstable_renderSubtreeIntoContainer;

exports['default'] = _react2['default'].createClass({
  displayName: 'Tray',

  propTypes: {
    isOpen: _react2['default'].PropTypes.bool,
    onBlur: _react2['default'].PropTypes.func,
    onOpen: _react2['default'].PropTypes.func,
    closeTimeoutMS: _react2['default'].PropTypes.number,
    closeOnBlur: _react2['default'].PropTypes.bool,
    maintainFocus: _react2['default'].PropTypes.bool,
    getElementToFocus: _helpersCustomPropTypes.a11yFunction,
    getAriaHideElement: _helpersCustomPropTypes.a11yFunction
  },

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

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

  componentWillReceiveProps: function componentWillReceiveProps(props) {
    this.renderPortal(props);
  },

  componentWillUnmount: function componentWillUnmount() {
    _reactDom2['default'].unmountComponentAtNode(this.node);
    document.body.removeChild(this.node);
  },

  renderPortal: function renderPortal(props) {
    delete props.ref;

    renderSubtreeIntoContainer(this, _react2['default'].createElement(_TrayPortal2['default'], props), this.node);
  },

  render: function render() {
    return null;
  }
});
module.exports = exports['default'];