@nodeject/ui-components
Version:
UI library for non-trivial components
81 lines (80 loc) • 4.24 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.EditorContainer = void 0;
var antd_1 = require("antd");
var React = require("react");
var react_1 = require("react");
var Comment_1 = require("./Comment");
var rich_text_editor_1 = require("../../rich-text-editor");
var styles = require("./Editor.module.less");
var EditorContainer = function (props) {
var comment = props.comment, editorType = props.editorType, getTributeComponent = props.getTributeComponent, goToComment = props.goToComment, hideEditEditor = props.hideEditEditor, hideReplyEditor = props.hideReplyEditor, initialValue = props.initialValue, parentConversation = props.parentConversation, submitting = props.submitting, tributes = props.tributes, user = props.user;
var _a = react_1.useState(editorType === 'edit' ? initialValue : ''), value = _a[0], setValue = _a[1];
var clearEditor = function (editorType) {
setValue('');
if (editorType === 'reply') {
hideReplyEditor();
}
else if (editorType === 'edit') {
hideEditEditor();
}
};
var onCreateNewComment = function (content) {
setValue(content);
};
react_1.useEffect(function () {
if (value !== '' &&
(editorType === 'default' || editorType === 'reply')) {
// HERE we assign the parent comment
var newCommentArgs = {
comments: [],
content: value,
parentComment: editorType === 'default' ? undefined : { id: comment.id },
parentConversation: parentConversation,
user: user
};
var newComment = Comment_1.createNewComment(newCommentArgs);
props.onAddComment(newComment);
if (editorType === 'default') {
goToComment && goToComment('#lastComment');
clearEditor('default');
}
else if (editorType === 'reply') {
clearEditor('reply');
}
}
}, [value]);
var onReplyToComment = function (content) {
setValue(content);
};
var onEditComment = function (content) {
var editedComment = __assign({}, comment);
editedComment.content = content;
props.onEditComment(editedComment, function () { return clearEditor('edit'); });
clearEditor('edit');
};
var defaultEditor = editorType === 'default' && (React.createElement(antd_1.Form, null,
React.createElement(antd_1.Form.Item, null,
React.createElement(rich_text_editor_1.RichTextEditor, { onCancel: function (content) {
return console.log('cancel', content);
}, content: value, getTributeComponent: getTributeComponent, onSave: onCreateNewComment, saveButtonTitle: "Add comment", tributes: tributes }))));
var replyEditor = editorType === 'reply' && (React.createElement(antd_1.Form, { className: styles.editorReply },
React.createElement(antd_1.Form.Item, null,
React.createElement(rich_text_editor_1.RichTextEditor, { content: value, getTributeComponent: getTributeComponent, onCancel: hideReplyEditor, onSave: onReplyToComment, saveButtonTitle: "Reply", tributes: tributes }))));
var editExistingCommentEditor = editorType === 'edit' && (React.createElement(antd_1.Form, null,
React.createElement(antd_1.Form.Item, null,
React.createElement(rich_text_editor_1.RichTextEditor, { content: value, getTributeComponent: getTributeComponent, onCancel: hideEditEditor, onSave: onEditComment, saveButtonTitle: "Save", tributes: tributes }))));
return defaultEditor || replyEditor || editExistingCommentEditor;
};
exports.EditorContainer = EditorContainer;