@lyra/default-layout/lib/components/RenderTool.js

The default layout components for Lyra

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _tool = require('all:part:@lyra/base/tool');

var _tool2 = _interopRequireDefault(_tool);

var _default = require('part:@lyra/components/buttons/default');

var _default2 = _interopRequireDefault(_default);

var _RenderTool = require('./styles/RenderTool.css');

var _RenderTool2 = _interopRequireDefault(_RenderTool);

var _ErrorBorkImage = require('./ErrorBorkImage');

var _ErrorBorkImage2 = _interopRequireDefault(_ErrorBorkImage);

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

function getErrorWithStack(err) {
  const stack = err.stack.toString();
  const message = err.message;
  return stack.indexOf(message) === -1 ? `${message}\n\n${stack}` : stack;
}

class RenderTool extends _react.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = { error: null, showErrorDetails: __DEV__ }, this.handleShowDetails = () => {
      this.setState({ showErrorDetails: true });
    }, this.handleRetry = () => {
      this.setState({ error: null });
    }, _temp;
  }

  componentDidCatch(error, info) {
    this.setState({ error: { error, info } });
  }

  renderError() {
    const tool = this.getActiveTool() || {};
    var _state$error = this.state.error;
    const error = _state$error.error,
          info = _state$error.info;
    const showErrorDetails = this.state.showErrorDetails;


    return _react2.default.createElement(
      'div',
      { className: _RenderTool2.default.error },
      _react2.default.createElement(
        'div',
        { className: _RenderTool2.default.errorSplash },
        _react2.default.createElement(_ErrorBorkImage2.default, null),
        _react2.default.createElement(
          'h2',
          { className: _RenderTool2.default.errorHeading },
          'Rats! The ',
          tool.title || tool.name || 'active',
          ' tool crashed!'
        ),
        _react2.default.createElement(
          'div',
          { className: _RenderTool2.default.errorActionButton },
          _react2.default.createElement(
            _default2.default,
            { onClick: this.handleRetry },
            'Retry'
          ),
          _react2.default.createElement(
            _default2.default,
            {
              onClick: this.handleShowDetails,
              disabled: showErrorDetails
            },
            'Details'
          )
        )
      ),
      showErrorDetails && _react2.default.createElement(
        'div',
        { className: _RenderTool2.default.errorDetails },
        _react2.default.createElement(
          'div',
          { className: _RenderTool2.default.errorStackTrace },
          _react2.default.createElement(
            'h3',
            null,
            'Stack trace:'
          ),
          _react2.default.createElement(
            'pre',
            null,
            getErrorWithStack(error)
          )
        ),
        _react2.default.createElement(
          'div',
          { className: _RenderTool2.default.errorComponentStack },
          _react2.default.createElement(
            'h3',
            null,
            'Component stack:'
          ),
          _react2.default.createElement(
            'pre',
            null,
            info.componentStack.replace(/^\s*\n+/, '')
          )
        )
      )
    );
  }

  getActiveTool() {
    const activeToolName = this.props.tool;
    const activeTool = _tool2.default.find(tool => tool.name === activeToolName);
    return activeTool;
  }

  render() {
    if (this.state.error) {
      return this.renderError();
    }

    if (!_tool2.default.length) {
      return _react2.default.createElement(
        'div',
        null,
        'No tools fulfills the part ',
        _react2.default.createElement(
          'code',
          null,
          '`part:@lyra/base/tool`'
        )
      );
    }

    const activeTool = this.getActiveTool();
    if (!activeTool) {
      return _react2.default.createElement(
        'div',
        null,
        'Tool not found: ',
        this.props.tool
      );
    }

    const ActiveTool = activeTool.component;
    return _react2.default.createElement(ActiveTool, this.props);
  }
}
exports.default = RenderTool;
RenderTool.propTypes = {
  tool: _propTypes2.default.string
};
RenderTool.defaultProps = {
  tool: null
};