@compositor/kit/dist/Frame.js

Components for development environments, style guides, and demos

'use strict';

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

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

var _server = require('react-dom/server');

var _nanoStyle = require('nano-style');

var _nanoStyle2 = _interopRequireDefault(_nanoStyle);

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

var Frame = function (_React$Component) {
  (0, _inherits3.default)(Frame, _React$Component);

  function Frame() {
    (0, _classCallCheck3.default)(this, Frame);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Frame.__proto__ || (0, _getPrototypeOf2.default)(Frame)).call(this));

    _this.doc = null;
    _this.win = null;
    _this.div = null;

    _this.getSrc = function () {
      var _this$props = _this.props,
          _this$props$zoom = _this$props.zoom,
          zoom = _this$props$zoom === undefined ? 1 : _this$props$zoom,
          _this$props$css = _this$props.css,
          css = _this$props$css === undefined ? '' : _this$props$css,
          head = _this$props.head;

      var headHTML = '';
      if (head) {
        headHTML = (0, _server.renderToStaticMarkup)(head);
      }
      return '<style>*{box-sizing:border-box}body{margin:0;min-height:100vh;zoom:' + zoom + '} ' + css + '</style>' + headHTML + '\n<div id=\'app\'></div>';
    };

    _this.onLoad = function (e) {
      _this.doc = _this.root.contentDocument;
      _this.win = _this.root.contentWindow;
      _this.update(_this.props);
    };

    _this.update = function (_ref) {
      var render = _ref.render,
          children = _ref.children;

      if (!_this.doc) return;
      var div = _this.doc.getElementById('app');
      if (typeof render === 'function') {
        _reactDom2.default.render(render({
          document: _this.doc,
          window: _this.win
        }), div);
      } else {
        _reactDom2.default.render(children, div);
      }
    };
    return _this;
  }

  (0, _createClass3.default)(Frame, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(next) {
      if (next.children !== this.props.children) {
        this.update(next);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          width = _props.width,
          height = _props.height,
          zoom = _props.zoom,
          children = _props.children;


      return _react2.default.createElement('iframe', {
        ref: function ref(_ref2) {
          return _this2.root = _ref2;
        },
        style: {
          width: width,
          height: height,
          zoom: zoom,
          pointerEvents: 'none',
          display: 'block',
          margin: 0,
          overflow: 'scroll',
          backgroundColor: '#fff',
          opacity: !!children ? 1 : 0.25,
          border: 0
        },
        srcDoc: this.getSrc(),
        scrolling: 'yes',
        onLoad: this.onLoad
      });
    }
  }]);
  return Frame;
}(_react2.default.Component);

Frame.propTypes = {
  head: _propTypes2.default.node,
  zoom: _propTypes2.default.number,
  width: _propTypes2.default.string,
  height: _propTypes2.default.string,
  css: _propTypes2.default.string
};
Frame.defaultProps = {
  zoom: 1,
  width: '100%',
  height: '100%',
  css: 'body{font-family:system-ui,sans-serif;line-height:1.5}'
};
exports.default = Frame;