@jenkins-cd/js-extensions/dist/SandboxedComponent.js

'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

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

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(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) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/**
 * Created by cmeyers on 10/21/16.
 */
var React = require('react');
var ReactDOM = require('react-dom');
var PropTypes = React.PropTypes;

var ContextBridge = require('./ContextBridge').ContextBridge;
var ErrorUtils = require('./ErrorUtils').default;

/**
 * Component that renders any passed-in children via a separate ReactDOM.render call.
 * Useful for rendering untrusted React elements: errors will be trapped and displayed so the main UI isn't broken.
 */

var SandboxedComponent = exports.SandboxedComponent = function (_React$Component) {
    _inherits(SandboxedComponent, _React$Component);

    function SandboxedComponent(props) {
        _classCallCheck(this, SandboxedComponent);

        var _this = _possibleConstructorReturn(this, (SandboxedComponent.__proto__ || Object.getPrototypeOf(SandboxedComponent)).call(this, props));

        _this.domNode = null;
        return _this;
    }

    _createClass(SandboxedComponent, [{
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextProps) {
            if (nextProps.children !== this.props.children) {
                this._cleanupChild();
                this._renderChild(nextProps);
            }
        }
    }, {
        key: 'componentDidMount',
        value: function componentDidMount() {
            this._renderChild(this.props);
        }
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {
            this._cleanupChild();
            this.domNode = null;
        }
    }, {
        key: '_renderChild',
        value: function _renderChild(props) {
            if (!this.domNode) {
                return null;
            }

            try {
                var contextValuesAsProps = {
                    config: this.context.config,
                    router: this.context.router
                };
                var bridgedComponent = React.createElement(ContextBridge, contextValuesAsProps, props.children);
                ReactDOM.render(bridgedComponent, this.domNode);
            } catch (e) {
                console.warn('error rendering: ', e);
                ReactDOM.render(ErrorUtils.errorToElement(e), this.domNode);
            }
        }
    }, {
        key: '_cleanupChild',
        value: function _cleanupChild() {
            if (this.domNode) {
                try {
                    ReactDOM.unmountComponentAtNode(this.domNode);
                } catch (err) {
                    console.log("Error unmounting component", err);
                }
            }
        }
    }, {
        key: 'render',
        value: function render() {
            var _this2 = this;

            var extraClass = this.props.className || '';

            return React.createElement('div', { className: 'sandbox-component ' + extraClass, ref: function ref(node) {
                    _this2.domNode = node;
                } });
        }
    }]);

    return SandboxedComponent;
}(React.Component);

SandboxedComponent.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string
};

SandboxedComponent.contextTypes = {
    router: PropTypes.object,
    config: PropTypes.object
};