feeles-ide/lib/Cards/EditorCard/ErrorPane.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 CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import Paper from 'material-ui/Paper';
import { red50, red500 } from 'material-ui/styles/colors';
import ActionRestore from 'material-ui/svg-icons/action/restore';

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

  function ErrorPane() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, ErrorPane);

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

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

  _createClass(ErrorPane, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.error !== nextProps.error) {
        this.setState({
          show: !!nextProps.error
        });
      }
    }
  }, {
    key: 'renderAsDialog',
    value: function renderAsDialog() {
      var _props = this.props,
          localization = _props.localization,
          canRestore = _props.canRestore;


      var styles = {
        error: {
          margin: 16,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          borderStyle: 'double',
          borderColor: red500,
          backgroundColor: red50,
          overflow: 'hidden'
        },
        heading: {
          color: 'rgba(255, 0, 0, .5)'
        },
        close: {
          alignSelf: 'flex-end'
        },
        blank: {
          flex: '0 0 1rem'
        }
      };

      return React.createElement(
        Paper,
        { key: 'error', zDepth: 2, style: styles.error },
        React.createElement(FlatButton, {
          primary: true,
          label: localization.common.close,
          style: styles.close,
          onClick: this.handleClose
        }),
        React.createElement(
          'h2',
          { style: styles.heading },
          localization.editorCard.error
        ),
        React.createElement('div', { style: styles.blank }),
        React.createElement(RaisedButton, {
          primary: true,
          icon: React.createElement(ActionRestore, null),
          label: localization.editorCard.restore,
          onClick: this.handleRestore,
          disabled: !canRestore
        }),
        React.createElement('div', { style: styles.blank })
      );
    }
  }, {
    key: 'renderAsDock',
    value: function renderAsDock() {
      var _this2 = this;

      var expanded = this.state.expanded;

      var styles = {
        message: {
          position: 'relative',
          maxHeight: this.props.error ? expanded ? 1000 : 48 : 0,
          width: '100%',
          boxSizing: 'border-box',
          paddingLeft: 8,
          overflow: 'scroll',
          cursor: 'pointer'
        },
        messageText: {
          margin: 8,
          color: red500,
          fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace'
        }
      };
      return React.createElement(
        'div',
        {
          style: styles.message,
          onClick: function onClick() {
            return _this2.setState({ expanded: !expanded });
          }
        },
        React.createElement(
          'pre',
          { style: styles.messageText },
          this.props.error && this.props.error.message
        )
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var show = this.state.show;
      var palette = this.context.muiTheme.palette;

      var styles = {
        root: {
          borderTopStyle: show ? 'double' : 'none',
          borderTopWidth: 3,
          borderTopColor: palette.primary1Color
        },
        dialogRoot: {
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          zIndex: 100
        }
      };

      return React.createElement(
        'div',
        { style: styles.root },
        this.renderAsDock(),
        React.createElement(
          CSSTransitionGroup,
          {
            transitionName: {
              enter: 'zoomInUp',
              enterActive: 'animated',
              leave: 'fadeOut',
              leaveActive: 'animated'
            },
            transitionEnterTimeout: 1000,
            transitionLeaveTimeout: 500,
            style: styles.dialogRoot
          },
          show ? this.renderAsDialog() : null
        )
      );
    }
  }]);

  return ErrorPane;
}(PureComponent);

ErrorPane.propTypes = {
  error: PropTypes.object,
  localization: PropTypes.object.isRequired,
  onRestore: PropTypes.func.isRequired,
  canRestore: PropTypes.bool.isRequired
};
ErrorPane.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};
export default ErrorPane;