feeles-ide/lib/FileDialog/AddDialog.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, { Component } from 'react';
import PropTypes from 'prop-types';
import Dialog from 'material-ui/Dialog';
import TextField from 'material-ui/TextField';
import CodeMirror from 'codemirror';
import 'codemirror/mode/meta';

import { SourceFile } from '../File/';
import { Confirm, Abort } from './Buttons';

var getSeed = function getSeed(type) {
  if (type === 'application/json') {
    return '{}';
  }
  return '\n'.repeat(30);
};

var AddDialog = function (_Component) {
  _inherits(AddDialog, _Component);

  function AddDialog() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, AddDialog);

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

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

      var _ref2 = CodeMirror.findModeByFileName(name) || {
        mime: 'text/plain'
      },
          mime = _ref2.mime;

      _this.props.resolve(new SourceFile({
        name: name,
        type: mime,
        text: getSeed(mime)
      }));

      _this.props.onRequestClose();
    }, _this.handleUpdateName = function (event, name) {
      _this.setState({ name: name });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(AddDialog, [{
    key: 'render',
    value: function render() {
      var localization = this.props.localization;


      var actions = [React.createElement(Abort, {
        key: 'cancel',
        label: localization.addDialog.cancel,
        onClick: this.props.onRequestClose
      }), React.createElement(Confirm, {
        key: 'add',
        label: localization.addDialog.add,
        onClick: this.handleAdd
      })];

      return React.createElement(
        Dialog,
        {
          title: localization.addDialog.title,
          actions: actions,
          modal: false,
          open: true,
          onRequestClose: this.props.onRequestClose
        },
        React.createElement(TextField, {
          fullWidth: true,
          value: this.state.name,
          floatingLabelText: localization.addDialog.fileName,
          hintText: 'main.js',
          onChange: this.handleUpdateName
        })
      );
    }
  }]);

  return AddDialog;
}(Component);

AddDialog.propTypes = {
  resolve: PropTypes.func.isRequired,
  reject: PropTypes.func.isRequired,
  localization: PropTypes.object.isRequired,
  onRequestClose: PropTypes.func.isRequired
};
export default AddDialog;