react-cimpress-comment/lib/components/Comment.js

Visualizes comment(s) for a particular platform resource

'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

require('../../style/index.css');

var _CommentVisibilityIcon = require('./CommentVisibilityIcon');

var _CommentVisibilityIcon2 = _interopRequireDefault(_CommentVisibilityIcon);

var _CommentRefererIcon = require('./CommentRefererIcon');

var _CommentRefererIcon2 = _interopRequireDefault(_CommentRefererIcon);

var _CommentAuthorAvatar = require('./CommentAuthorAvatar');

var _CommentAuthorAvatar2 = _interopRequireDefault(_CommentAuthorAvatar);

var _CommentAuthor = require('./CommentAuthor');

var _CommentAuthor2 = _interopRequireDefault(_CommentAuthor);

var _CommentTime = require('./CommentTime');

var _CommentTime2 = _interopRequireDefault(_CommentTime);

var _reactMentions = require('react-mentions');

var _renderCoamMentionSuggestion = require('../renderers/renderCoamMentionSuggestion');

var _renderCoamMentionSuggestion2 = _interopRequireDefault(_renderCoamMentionSuggestion);

var _reactComponents = require('@cimpress/react-components');

var _reactI18next = require('react-i18next');

var _i18n = require('../tools/i18n');

var _helper = require('../tools/helper');

var _mentions = require('../clients/mentions');

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Spinner = _reactComponents.shapes.Spinner;

var Comment = function (_React$Component) {
    _inherits(Comment, _React$Component);

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

        var _this = _possibleConstructorReturn(this, (Comment.__proto__ || Object.getPrototypeOf(Comment)).call(this, props));

        _this.state = {
            editMode: false,
            editedComment: null,
            updatingComment: !props.comment.createdAt && !props.comment.updatedAt,
            commentObject: props.comment
        };
        return _this;
    }

    _createClass(Comment, [{
        key: 'safeSetState',
        value: function safeSetState(data, callback) {
            if (this._ismounted) {
                this.setState(data, callback);
            }
        }
    }, {
        key: 'componentDidMount',
        value: function componentDidMount() {
            this._ismounted = true;
        }
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {
            this._ismounted = false;
        }
    }, {
        key: 'change',
        value: function change(event, newValue, newPlainTextValue, mentions) {
            this.safeSetState({
                editedComment: newValue
            });
        }
    }, {
        key: 'completeEditing',
        value: function completeEditing() {
            var _this2 = this;

            if (this.state.editedComment !== null && this.state.editedComment !== this.state.commentObject.comment) {
                this.safeSetState({
                    updatingComment: true
                });

                this.props.commentsClient.putComment(this.props.commentUri, this.state.editedComment.trim(), this.state.commentObject.visibility).then(function (responseJson) {
                    _this2.exitEditing();

                    _this2.safeSetState({
                        commentObject: responseJson
                    });
                }).catch(function (err) {
                    _this2.safeSetState({
                        errorPut: err,
                        updatingComment: false
                    });
                });
            } else {
                this.safeSetState({
                    editedComment: null,
                    editMode: false,
                    updatingComment: false
                });
            }
        }
    }, {
        key: 'deleteComment',
        value: function deleteComment() {
            var _this3 = this;

            this.safeSetState({
                updatingComment: true
            });

            this.props.commentsClient.deleteComment(this.props.commentUri).then(function () {
                if (_this3.props.onDelete) {
                    _this3.props.onDelete(_this3.props.comment);
                }
            }).catch(function (err) {
                _this3.safeSetState({
                    errorDelete: err,
                    updatingComment: false
                });
            });
        }
    }, {
        key: 'exitEditing',
        value: function exitEditing() {
            this.safeSetState({
                updatingComment: false,
                editMode: false,
                editedComment: null,
                errorPut: null,
                errorDelete: null
            });
        }
    }, {
        key: 'tt',
        value: function tt(key) {
            // eslint-disable-next-line react/prop-types
            var _props = this.props,
                t = _props.t,
                locale = _props.locale;

            if (locale.length > 2) {
                locale = locale.substr(0, 2);
            }
            return t(key, { lng: locale });
        }
    }, {
        key: 'renderError',
        value: function renderError(e, prefix) {
            if (!e) {
                return null;
            }
            return _react2.default.createElement(
                'span',
                { className: 'text-danger' },
                '\xA0',
                _react2.default.createElement('i', {
                    className: 'fa fa-exclamation-triangle' }),
                '\xA0',
                prefix,
                prefix ? _react2.default.createElement(
                    'span',
                    null,
                    '\xA0'
                ) : null,
                '(',
                this.tt((0, _helper.errorToString)(e)),
                ')'
            );
        }
    }, {
        key: 'renderEditMenu',
        value: function renderEditMenu() {
            var _this4 = this;

            if (!this.canModify) {
                // editing disabled
                return null;
            }

            if (this.state.commentObject.createdBy !== this.props.jwtSub && this.state.commentObject.updatedBy !== this.props.jwtSub) {
                // can edit only 'own' comments
                return null;
            }

            if (this.state.editMode) {
                return _react2.default.createElement(
                    'div',
                    null,
                    this.state.editedComment !== null && this.state.editedComment !== this.state.commentObject.comment && this.state.editedComment !== '' ? _react2.default.createElement('div', { onClick: this.completeEditing.bind(this), className: 'fa fa-check mentions-ok' }) : null,
                    this.props.deleteComments ? _react2.default.createElement('div', { onClick: this.deleteComment.bind(this), className: 'fa fa-trash mentions-delete' }) : null,
                    _react2.default.createElement('div', { onClick: this.exitEditing.bind(this), className: 'fa fa-times mentions-cancel' })
                );
            }

            return _react2.default.createElement('div', { onClick: function onClick() {
                    return _this4.safeSetState({ editMode: true });
                }, className: 'mentions-edit fa fa-edit' });
        }
    }, {
        key: 'render',
        value: function render() {
            var _this5 = this;

            var editMenu = void 0;
            var readonlyTextField = void 0;
            if (this.state.updatingComment === true) {
                readonlyTextField = true;
                editMenu = _react2.default.createElement(
                    'div',
                    { className: 'mentions-edit' },
                    _react2.default.createElement(Spinner, { size: 'small' })
                );
            } else {
                readonlyTextField = !(this.state.editMode && this.props.editComments);
                editMenu = this.renderEditMenu();
            }

            var visibility = this.state.commentObject.visibility || 'internal';
            var visibilityOption = this.props.commentVisibilityLevels.find(function (l) {
                return l.value === visibility;
            });

            var commentBody = _react2.default.createElement(
                'div',
                {
                    onKeyDown: (0, _helper.performActionOnMetaEnter)(this.completeEditing.bind(this)),
                    tabIndex: '1',
                    style: { position: 'relative', display: 'flex', flexFlow: 'row' } },
                _react2.default.createElement(
                    _reactMentions.MentionsInput,
                    {
                        className: 'mentions ' + (readonlyTextField ? 'disabled' : ''),
                        value: this.state.editedComment !== null ? this.state.editedComment : this.state.commentObject.comment,
                        onChange: this.change.bind(this),
                        displayTransform: function displayTransform(id, display, type) {
                            return '@' + display;
                        }, allowSpaceInQuery: true,
                        readOnly: readonlyTextField },
                    _react2.default.createElement(_reactMentions.Mention, { trigger: '@', data: function data(search, callback) {
                            (0, _mentions.fetchMatchingMentions)(_this5.props.accessToken, search).then(callback);
                        },
                        renderSuggestion: _renderCoamMentionSuggestion2.default })
                ),
                this.renderError(this.state.errorPut, this.tt('unable_to_edit_comment')),
                this.renderError(this.state.errorDelete, this.tt('unable_to_delete_comment')),
                editMenu
            );

            var error = this.renderError(this.state.error, this.tt('unable_to_read_comment'));
            if (error) {
                return _react2.default.createElement(
                    'div',
                    { className: this.props.className },
                    error
                );
            }

            var header = this.props.header;
            var avatar = null;
            if (typeof header === 'undefined') {
                var commentCreator = _react2.default.createElement(_CommentAuthor2.default, {
                    accessToken: this.props.accessToken,
                    createdBy: this.state.commentObject.createdBy });

                var commentTime = _react2.default.createElement(_CommentTime2.default, {
                    locale: this.props.locale,
                    accessToken: this.props.accessToken,
                    createdBy: this.state.commentObject.createdBy,
                    createdAt: this.state.commentObject.createdAt,
                    updatedBy: this.state.commentObject.updatedBy,
                    updatedAt: this.state.commentObject.updatedAt });

                var additionalCommentIndicators = _react2.default.createElement(
                    'span',
                    { className: 'comment-creator' },
                    _react2.default.createElement(_CommentVisibilityIcon2.default, { icon: visibilityOption.icon, label: visibilityOption.label }),
                    _react2.default.createElement(_CommentRefererIcon2.default, { referer: this.state.commentObject.referer })
                );

                avatar = _react2.default.createElement(_CommentAuthorAvatar2.default, { userId: this.state.commentObject.createdBy,
                    accessToken: this.props.accessToken });

                header = _react2.default.createElement(
                    'span',
                    { className: 'comment-creator' },
                    commentCreator,
                    commentTime ? _react2.default.createElement(
                        'span',
                        null,
                        ',\xA0'
                    ) : null,
                    commentTime,
                    additionalCommentIndicators
                );
            }

            return _react2.default.createElement(
                'div',
                { className: this.props.className },
                _react2.default.createElement(
                    'div',
                    null,
                    avatar
                ),
                _react2.default.createElement(
                    'div',
                    null,
                    header,
                    _react2.default.createElement(
                        'div',
                        { className: 'comment-body' },
                        commentBody
                    ),
                    this.props.footer
                )
            );
        }
    }, {
        key: 'canModify',
        get: function get() {
            return this.props.editComments || this.props.deleteComments;
        }
    }]);

    return Comment;
}(_react2.default.Component);

Comment.propTypes = {
    locale: _propTypes2.default.string,
    accessToken: _propTypes2.default.string,
    className: _propTypes2.default.string,
    jwtSub: _propTypes2.default.string,
    commentUri: _propTypes2.default.string,
    comment: _propTypes2.default.object,
    editComments: _propTypes2.default.bool,
    deleteComments: _propTypes2.default.bool,
    onDelete: _propTypes2.default.func,
    header: _propTypes2.default.node,
    footer: _propTypes2.default.node,
    commentVisibilityLevels: _propTypes2.default.array,
    commentsClient: _propTypes2.default.any
};

Comment.defaultProps = {
    locale: 'en',
    className: 'comment'
};

exports.default = (0, _reactI18next.translate)('translations', { i18n: (0, _i18n.getI18nInstance)() })(Comment);