feeles-ide/lib/jsx/ReactPopout.js

The hackable and serializable IDE to make learning material

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _typestyle = require("typestyle");

// https://github.com/JakeGinnivan/react-popout
// Same as node_modules/react-popout/lib/ReactPopout.jsx
// (Move here to build with react@0.15.x bacause react includes twice)

/*
The MIT License (MIT)

Copyright (c) 2015 Jake Ginnivan
*/
var _CONTAINER_ID = Symbol('container_id');
/**
 * @class PopoutWindow
 */


var PopoutWindow =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(PopoutWindow, _React$Component);

  /**
   * @type {{title: *, url: *, onClosing: *, options: *, window: *, containerId: *}}
   */

  /**
   * @constructs PoppoutWindow
   * @param props
   */
  function PopoutWindow(props) {
    var _this;

    (0, _classCallCheck2.default)(this, PopoutWindow);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(PopoutWindow).call(this, props));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
      openedWindow: null
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "defaultOptions", {
      toolbar: 'no',
      location: 'no',
      directories: 'no',
      status: 'no',
      menubar: 'no',
      scrollbars: 'yes',
      resizable: 'yes',
      width: 500,
      height: 400,
      top: function top(o, w) {
        return (w.innerHeight - o.height) / 2 + w.screenY;
      },
      left: function left(o, w) {
        return (w.innerWidth - o.width) / 2 + w.screenX;
      }
    });
    _this[_CONTAINER_ID] = props.containerId || 'popout-content-container';
    _this.closeWindow = _this.closeWindow.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    return _this;
  }
  /**
   * Override default id if we get given one
   * @param props
   */


  (0, _createClass2.default)(PopoutWindow, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(props) {
      props.containerId && (this[_CONTAINER_ID] = props.containerId);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.closeWindow();
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var popoutWindow, container;
      var options = Object.assign({}, this.defaultOptions, this.props.options),
          ownerWindow = this.props.window || window,
          openedWindow = {
        update: function update(newComponent) {
          container && _reactDom.default.render(newComponent, container);
        },
        close: function close() {
          popoutWindow && popoutWindow.close();
        }
      };

      if (!ownerWindow) {
        // If we have no owner windows, bail. Likely server side render
        return;
      }

      var createOptions = function createOptions() {
        var ret = [];

        for (var key in options) {
          options.hasOwnProperty(key) && ret.push(key + '=' + (typeof options[key] === 'function' ? options[key].call(_this2, options, ownerWindow) : options[key]));
        }

        return ret.join(',');
      };

      popoutWindow = ownerWindow.open(this.props.url || 'about:blank', this.props.title, createOptions());

      popoutWindow.onbeforeunload = function () {
        container && _reactDom.default.unmountComponentAtNode(container);

        _this2.windowClosing();
      }; // Close any open popouts when page unloads/refeshes


      ownerWindow.addEventListener('unload', this.closeWindow);

      var onloadHandler = function onloadHandler() {
        if (container) {
          if (popoutWindow.document.getElementById(_this2[_CONTAINER_ID])) return;

          _reactDom.default.unmountComponentAtNode(container);

          container = null;
        }

        popoutWindow.document.title = _this2.props.title;
        container = popoutWindow.document.createElement('div');
        container.id = _this2[_CONTAINER_ID];
        popoutWindow.document.body.appendChild(container);

        _reactDom.default.render(_this2.props.children, container);
      };

      popoutWindow.onload = onloadHandler; // Just in case that onload doesn't fire / has fired already, we call it manually if it's ready.

      popoutWindow.document.readyState === 'complete' && onloadHandler();
      this.setState({
        openedWindow: openedWindow
      });
    }
  }, {
    key: "closeWindow",
    value: function closeWindow() {
      this.state.openedWindow && this.state.openedWindow.close();
      (this.props.window || window).removeEventListener('unload', this.closeWindow);
    }
  }, {
    key: "windowClosing",
    value: function windowClosing() {
      this.props.onClosing && this.props.onClosing();
    }
    /**
     * Bubble changes
     */

  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      // For SSR we might get updated but there will be no openedWindow. Make sure openedWIndow exists before calling
      this.state.openedWindow && this.state.openedWindow.update(this.props.children);
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement("div", null);
    }
  }]);
  return PopoutWindow;
}(_react.default.Component);

exports.default = PopoutWindow;
(0, _defineProperty2.default)(PopoutWindow, "propTypes", {
  title: _propTypes.default.string.isRequired,
  url: _propTypes.default.string,
  onClosing: _propTypes.default.func,
  options: _propTypes.default.object,
  window: _propTypes.default.object,
  containerId: _propTypes.default.string,
  children: _propTypes.default.element
});