skrim/overlay.js

Irken plugin for managing application overlays.

"use strict";

var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };

var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };

var React = require("react");
var noop = require("lodash/utility/noop");
var assign = require("lodash/object/assign");

var styles = require("./styles");

var Overlay = (function (_React$Component) {
  function Overlay() {
    _classCallCheck(this, Overlay);

    this.bodyListener = this.bodyListener.bind(this);
  }

  _inherits(Overlay, _React$Component);

  _createClass(Overlay, {
    bodyListener: {
      value: function bodyListener(evt) {
        var container = React.findDOMNode(this._container);

        if (!this.props.shown) {
          return;
        }

        if (!container) {
          this.props.hide();
          return;
        }

        if (container === evt.target || !container.contains(evt.target)) {
          this.props.hide();
        }
      }
    },
    componentDidMount: {
      value: function componentDidMount() {
        var container = React.findDOMNode(this._container);

        document.body.addEventListener("click", this.bodyListener, false);

        if (container) {
          this.props.renderer(container);
        }
      }
    },
    componentDidUpdate: {
      value: function componentDidUpdate() {
        var container = React.findDOMNode(this._container);

        if (container) {
          this.props.renderer(container);
        }
      }
    },
    componentWillUnmount: {
      value: function componentWillUnmount() {
        document.body.removeEventListener("click", this.bodyListener);
      }
    },
    render: {
      value: function render() {
        var _this = this;

        var style = {};

        if (this.props.shown) {
          style.display = "flex";
        } else {
          style.display = "none";
        }

        if (this.props.backdrop) {
          assign(style, styles.backdrop);
        }

        assign(style, styles.overlay);

        return React.createElement("div", { style: style, ref: function (ref) {
            return _this._container = ref;
          } });
      }
    }
  });

  return Overlay;
})(React.Component);

Overlay.defaultProps = {
  hide: noop,
  show: noop,
  renderer: noop
};

module.exports = Overlay;