feeles-ide/lib/Cards/HierarchyCard/Filename.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 TextField from 'material-ui/TextField';

import { separate } from '../../File/';

var getStyles = function getStyles(props, context) {
  var palette = context.muiTheme.palette;


  return {
    root: {
      display: 'flex',
      justifyContent: 'flex-start',
      alignItems: 'baseline'
    },
    path: {
      color: palette.secondaryTextColor
    },
    plane: {
      color: palette.textColor
    },
    ext: {
      color: palette.secondaryTextColor,
      fontSize: '.8em',
      paddingLeft: 4
    },
    textField: {
      width: 'auto',
      flex: '0 1 auto',
      height: 40
    }
  };
};

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

  function Filename() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Filename);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Filename.__proto__ || _Object$getPrototypeOf(Filename)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      isEditing: false
    }, _this.handleInput = function (ref) {
      var _this$props = _this.props,
          file = _this$props.file,
          onChange = _this$props.onChange;


      if (!ref) return;
      ref.input.onchange = function (_ref2) {
        var target = _ref2.target;

        onChange(file, target.value);
        _this.setState({ isEditing: false });
      };
      ref.input.onblur = function () {
        _this.setState({ isEditing: false });
      };
    }, _this.touchFlag = false, _this.handleDoubleTap = function (event) {
      event.stopPropagation();

      if (_this.touchFlag) {
        _this.setState({ isEditing: true });
        return;
      }
      _this.touchFlag = true;
      setTimeout(function () {
        return _this.touchFlag = false;
      }, 200);
    }, _this.handleTextFieldTap = function (event) {
      event.stopPropagation();
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Filename, [{
    key: 'render',
    value: function render() {
      var file = this.props.file;
      var isEditing = this.state.isEditing;
      var prepareStyles = this.context.muiTheme.prepareStyles;


      var styles = getStyles(this.props, this.context);

      var _separate = separate(file.name),
          path = _separate.path,
          plane = _separate.plane,
          ext = _separate.ext,
          name = _separate.name;

      return React.createElement(
        'div',
        { style: prepareStyles(styles.root) },
        React.createElement(
          'span',
          { style: prepareStyles(styles.path) },
          path
        ),
        isEditing ? React.createElement(TextField, {
          id: name,
          defaultValue: plane,
          ref: this.handleInput,
          style: styles.textField,
          onClick: this.handleTextFieldTap
        }) : React.createElement(
          'span',
          {
            onClick: this.handleDoubleTap,
            style: prepareStyles(styles.plane)
          },
          plane
        ),
        React.createElement(
          'span',
          { style: prepareStyles(styles.ext) },
          ext
        )
      );
    }
  }]);

  return Filename;
}(PureComponent);

Filename.propTypes = {
  file: PropTypes.object.isRequired,
  onChange: PropTypes.func.isRequired
};
Filename.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};
export default Filename;