feeles-ide/lib/Cards/MonitorCard/ErrorMessage.js

The hackable and serializable IDE to make learning material

import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { fullWhite, red500 } from 'material-ui/styles/colors';

import SvgButton from './SvgButton';

var ErrorMessage = function (_PureComponent) {
  _inherits(ErrorMessage, _PureComponent);

  function ErrorMessage() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, ErrorMessage);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ErrorMessage.__proto__ || _Object$getPrototypeOf(ErrorMessage)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      open: false
    }, _this.handleClose = function () {
      _this.setState({
        open: false
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(ErrorMessage, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.error !== nextProps.error) {
        this.setState({
          open: nextProps.error !== null
        });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var styles = {
        root: {
          position: 'absolute',
          width: '100%',
          top: 0,
          display: 'flex',
          flexDirection: 'column',
          backgroundColor: red500,
          zIndex: 3000
        },
        button: {
          alignSelf: 'flex-end'
        },
        pre: {
          width: '100%',
          maxHeight: '8rem',
          color: fullWhite,
          overflow: 'scroll',
          fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace'
        }
      };

      return this.state.open ? React.createElement(
        'div',
        { style: styles.root },
        React.createElement(
          SvgButton,
          { style: styles.button, onClick: this.handleClose },
          'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'
        ),
        React.createElement(
          'pre',
          { style: styles.pre },
          this.message
        )
      ) : null;
    }
  }, {
    key: 'message',
    get: function get() {
      return this.props.error ? this.props.error.message : '';
    }
  }]);

  return ErrorMessage;
}(PureComponent);

ErrorMessage.propTypes = {
  error: PropTypes.object
};
ErrorMessage.defaultProps = {
  error: null
};
export default ErrorMessage;