feeles-ide/lib/jsx/EditableLabel.js

The hackable and serializable IDE to make learning material

import _extends from 'babel-runtime/helpers/extends';
import _Object$assign from 'babel-runtime/core-js/object/assign';
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 ContentCreate from 'material-ui/svg-icons/content/create';

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


  return {
    hint: prepareStyles({
      color: palette.secondaryTextColor,
      fontStyle: 'italic',
      fontSize: '.8em',
      borderBottom: '1px dashed ' + palette.secondaryTextColor
    }),
    label: {
      fontSize: 16
    }
  };
};

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

  function EditableLabel() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, EditableLabel);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = EditableLabel.__proto__ || _Object$getPrototypeOf(EditableLabel)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      isEditing: _this.props.openImmediately
    }, _this.touched = false, _this.handleTouch = function () {
      if (_this.touched) {
        _this.setState({ isEditing: true });
      }
      _this.touched = true;
      setTimeout(function () {
        return _this.touched = false;
      }, 200);
    }, _this.handleBlur = function () {
      _this.setState({ isEditing: false });
    }, _this.handleKeyPress = function () {
      if (event.key === 'Enter') {
        _this.setState({ isEditing: false });
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(EditableLabel, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      if (this.props.openImmediately && this.input) {
        this.input.focus();
      }
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps, prevState) {
      if (!this.input) return;

      if (!prevState.isEditing && this.state.isEditing) {
        this.input.focus();
      }
      if (prevState.isEditing && !this.state.isEditing) {
        this.props.onEditEnd(this.input.value);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var isEditing = this.state.isEditing;
      var _props = this.props,
          value = _props.value,
          defaultValue = _props.defaultValue;


      var labelText = value || defaultValue;

      var _context$muiTheme2 = this.context.muiTheme,
          prepareStyles = _context$muiTheme2.prepareStyles,
          secondaryTextColor = _context$muiTheme2.palette.secondaryTextColor;

      var _getStyles = getStyles(this.props, this.context),
          hint = _getStyles.hint,
          label = _getStyles.label;

      var style = prepareStyles(_Object$assign({}, label, this.props.style));

      var props = _Object$assign({}, this.props);
      delete props.onEditEnd;
      delete props.tapTwiceQuickly;
      delete props.openImmediately;

      return isEditing ? React.createElement(TextField, _extends({}, props, {
        ref: function ref(_ref2) {
          return _ref2 && (_this2.input = _ref2.input);
        },
        onBlur: this.handleBlur,
        onKeyPress: this.handleKeyPress
      })) : labelText ? React.createElement(
        'div',
        { style: style, onClick: this.handleTouch },
        labelText
      ) : React.createElement(
        'div',
        { style: hint, onClick: this.handleTouch },
        React.createElement(ContentCreate, { color: secondaryTextColor }),
        this.props.tapTwiceQuickly
      );
    }
  }]);

  return EditableLabel;
}(PureComponent);

EditableLabel.propTypes = _Object$assign({
  openImmediately: PropTypes.bool.isRequired,
  tapTwiceQuickly: PropTypes.string.isRequired,
  onEditEnd: PropTypes.func
}, TextField.propTypes);
EditableLabel.defaultProps = {
  openImmediately: false,
  tapTwiceQuickly: 'Tap twice quickly'
};
EditableLabel.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};
export default EditableLabel;