feeles-ide/lib/Cards/CustomizeCard/index.js

The hackable and serializable IDE to make learning material

import _extends from 'babel-runtime/helpers/extends';
import _regeneratorRuntime from 'babel-runtime/regenerator';
import _asyncToGenerator from 'babel-runtime/helpers/asyncToGenerator';
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 Card from '../CardWindow';
import { CardHeader } from 'material-ui/Card';
import ActionSettingsApplications from 'material-ui/svg-icons/action/settings-applications';

import { SourceFile } from '../../File/';
import EditFile from '../EditFile';
import resolveOrigin from '../../utils/resolveOrigin';

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

  function CustomizeCard() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, CustomizeCard);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CustomizeCard.__proto__ || _Object$getPrototypeOf(CustomizeCard)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      cssFileKey: ''
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(CustomizeCard, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      var _this2 = this;

      _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        var cssFileKey;
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                _context.next = 2;
                return _this2.addFileIfNotExist('feeles/codemirror.css', function () {
                  return new SourceFile({
                    type: 'text/css',
                    name: 'feeles/codemirror.css',
                    text: ''
                  });
                });

              case 2:
                cssFileKey = _context.sent;


                _this2.setState({ cssFileKey: cssFileKey });

              case 4:
              case 'end':
                return _context.stop();
            }
          }
        }, _callee, _this2);
      }))();
    }
  }, {
    key: 'addFileIfNotExist',
    value: function () {
      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(name, getFile) {
        var file, nextFile;
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                file = this.props.findFile(name);

                if (file) {
                  _context2.next = 6;
                  break;
                }

                _context2.next = 4;
                return this.props.addFile(getFile());

              case 4:
                nextFile = _context2.sent;
                return _context2.abrupt('return', nextFile.key);

              case 6:
                return _context2.abrupt('return', file.key);

              case 7:
              case 'end':
                return _context2.stop();
            }
          }
        }, _callee2, this);
      }));

      function addFileIfNotExist(_x, _x2) {
        return _ref3.apply(this, arguments);
      }

      return addFileIfNotExist;
    }()
  }, {
    key: 'renderBlock',
    value: function renderBlock(title, href, fileKey) {
      var localization = this.props.localization;


      var subtitle = [React.createElement(
        'span',
        { key: 1 },
        title + ' - '
      ), React.createElement(
        'a',
        { key: 2, href: href, target: 'blank' },
        resolveOrigin(href)
      )];

      var styles = {
        block: {
          whiteSpace: 'inherit'
        }
      };

      return React.createElement(
        CardHeader,
        { style: styles.block, title: title, subtitle: subtitle },
        React.createElement(EditFile, {
          fileKey: fileKey,
          findFile: this.props.findFile,
          selectTab: this.props.selectTab,
          localization: localization
        })
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var localization = this.props.localization;


      return React.createElement(
        Card,
        _extends({ icon: CustomizeCard.icon() }, this.props.cardPropsBag),
        this.renderBlock(localization.customizeCard.style, 'http://codemirror.net/doc/manual.html#styling', this.state.cssFileKey)
      );
    }
  }], [{
    key: 'icon',
    value: function icon() {
      return React.createElement(ActionSettingsApplications, null);
    }
  }]);

  return CustomizeCard;
}(PureComponent);

CustomizeCard.propTypes = {
  cardPropsBag: PropTypes.object.isRequired,
  files: PropTypes.array.isRequired,
  getConfig: PropTypes.func.isRequired,
  localization: PropTypes.object.isRequired,
  findFile: PropTypes.func.isRequired,
  selectTab: PropTypes.func.isRequired,
  addFile: PropTypes.func.isRequired
};
export default CustomizeCard;