feeles-ide/lib/FileDialog/FilenameInput.js

The hackable and serializable IDE to make learning material

import _Object$keys from 'babel-runtime/core-js/object/keys';
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 TextField from 'material-ui/TextField';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';

var MimeTypes = {
  'text/javascript': '.js',
  'text/x-markdown': '.md',
  'application/json': '.json',
  'text/html': '.html',
  'text/css': '.css',
  'text/plain': '',
  'text/x-glsl': '.sort'
};

var getUniqueId = function (i) {
  return function () {
    return ++i;
  };
}(0);

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

  function FilenameInput(props) {
    _classCallCheck(this, FilenameInput);

    var _this = _possibleConstructorReturn(this, (FilenameInput.__proto__ || _Object$getPrototypeOf(FilenameInput)).call(this, props));

    _this.state = {
      name: _this.props.defaultName || 'filename',
      type: _this.props.defaultType || 'text/javascript'
    };

    _this.handleNameChange = function (event) {
      _this.setState({ name: event.target.value });
    };

    _this.handleTypeChange = function (event, index, value) {
      _this.setState({ type: value });
    };

    _this.id = 'FILENAME_INPUT_' + getUniqueId();
    return _this;
  }

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

      if (this.input) {
        this.timer = window.setTimeout(function () {
          _this2.input.focus();
          _this2.input.select();
        }, 100);
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      if (this.timer) {
        window.clearTimeout(this.timer);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _state = this.state,
          name = _state.name,
          type = _state.type;
      var disabled = this.props.disabled;


      var style = this.props.style;

      var dropDownStyle = {
        height: 43
      };

      return React.createElement(
        'div',
        { style: style },
        React.createElement(
          TextField,
          {
            id: this.id,
            ref: function ref(textField) {
              return _this3.input = textField && textField.input;
            }
          },
          React.createElement('input', {
            autoFocus: true,
            defaultValue: name,
            disabled: disabled,
            onChange: this.handleNameChange
          })
        ),
        React.createElement(
          DropDownMenu,
          {
            value: type,
            disabled: disabled,
            onChange: this.handleTypeChange,
            style: dropDownStyle
          },
          _Object$keys(MimeTypes).map(function (type) {
            return React.createElement(MenuItem, { key: type, value: type, primaryText: MimeTypes[type] });
          })
        )
      );
    }
  }, {
    key: 'value',
    get: function get() {
      var _state2 = this.state,
          name = _state2.name,
          type = _state2.type;

      return name + MimeTypes[type];
    }
  }, {
    key: 'name',
    get: function get() {
      return this.state.name;
    }
  }, {
    key: 'type',
    get: function get() {
      return this.state.type;
    }
  }]);

  return FilenameInput;
}(Component);

FilenameInput.propTypes = {
  defaultName: PropTypes.string,
  defaultType: PropTypes.string,
  disabled: PropTypes.bool,
  style: PropTypes.object
};
export default FilenameInput;