instantjob-recruiter-client/dist/components/comment_field.es6.js

a set of tools for creating an instantjob recruiter react client

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _bind = require('classnames/bind');

var _bind2 = _interopRequireDefault(_bind);

var _line_broken_text = require('./line_broken_text');

var _line_broken_text2 = _interopRequireDefault(_line_broken_text);

var _field = require('./field');

var _field2 = _interopRequireDefault(_field);

var _constants = require('../common/constants');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var cx = _bind2.default.bind(require('../styles/field.scss'));

var CommentField = function (_Component) {
  (0, _inherits3.default)(CommentField, _Component);

  function CommentField(props) {
    (0, _classCallCheck3.default)(this, CommentField);

    var _this = (0, _possibleConstructorReturn3.default)(this, (CommentField.__proto__ || (0, _getPrototypeOf2.default)(CommentField)).call(this, props));

    _this.state = {
      active: false
    };
    _this.enter_edit_mode = _this.enter_edit_mode.bind(_this);
    _this.quit_edit_mode = _this.quit_edit_mode.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(CommentField, [{
    key: 'enter_edit_mode',
    value: function enter_edit_mode() {
      this.setState({ active: true });
      this.should_focus_comment_input = true;
    }
  }, {
    key: 'quit_edit_mode',
    value: function quit_edit_mode(comment) {
      this.setState({ active: false });
      this.props.on_submit_comment(comment);
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _props = this.props,
          comment = _props.comment,
          auto_focus = _props.auto_focus;

      this.comment_input.update_comment(comment);
      if (auto_focus) {
        this.enter_edit_mode();
      }
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      if (this.should_focus_comment_input) {
        this.comment_input.focus();
        this.should_focus_comment_input = false;
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(props) {
      if (props.comment != this.props.comment) {
        this.comment_input.update_comment(props.comment);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      return _react2.default.createElement(
        _field2.default,
        (0, _extends3.default)({}, this.props, { category: 'comment', className: cx({ 'field_active': this.state.active && !this.props.locked }) }),
        _react2.default.createElement(
          'div',
          { className: cx('field__display', { 'field__display_empty': this.props.comment.length == 0, 'field__display_locked': this.props.locked }), onClick: this.props.editable ? this.enter_edit_mode : null },
          _react2.default.createElement(
            'div',
            { className: cx('field__label', 'field__label_comment') },
            _react2.default.createElement(
              _line_broken_text2.default,
              null,
              this.props.comment.length == 0 ? "..." : this.props.comment
            ),
            this.props.comment.length > 85 ? _react2.default.createElement(
              'div',
              { className: cx('field__comment-ellipsis') },
              '\u2026'
            ) : null
          ),
          _react2.default.createElement(CommentInput, {
            ref: function ref(comment_input) {
              return _this2.comment_input = comment_input;
            },
            update_comment: this.quit_edit_mode
          })
        )
      );
    }
  }]);
  return CommentField;
}(_react.Component);

var CommentInput = function (_Component2) {
  (0, _inherits3.default)(CommentInput, _Component2);

  function CommentInput(props) {
    (0, _classCallCheck3.default)(this, CommentInput);

    var _this3 = (0, _possibleConstructorReturn3.default)(this, (CommentInput.__proto__ || (0, _getPrototypeOf2.default)(CommentInput)).call(this, props));

    _this3.state = {
      comment: ""
    };
    _this3.update_comment = _this3.update_comment.bind(_this3);
    return _this3;
  }

  (0, _createClass3.default)(CommentInput, [{
    key: 'update_comment',
    value: function update_comment(comment) {
      if (comment != this.state.comment) {
        this.setState({ comment: comment });
      }
    }
  }, {
    key: 'focus',
    value: function focus() {
      this.input.focus();
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      return _react2.default.createElement('textarea', {
        rows: 3,
        cols: 30,
        ref: function ref(input) {
          return _this4.input = input;
        },
        type: 'text',
        className: cx('field__comment-input'),
        onChange: function onChange(event) {
          var comment = event.target.value;
          _this4.update_comment(comment);
        },
        onBlur: function onBlur() {
          return _this4.props.update_comment(_this4.state.comment);
        },
        value: this.state.comment
      });
    }
  }]);
  return CommentInput;
}(_react.Component);

CommentField.defaultProps = {
  name: "",
  show_label: true,
  display_only: false,
  ellipsis: false,
  on_submit_comment: function on_submit_comment(comment) {},
  editable: true,
  edit_mode: 'hover',
  comment: ""
};

exports.default = CommentField;