@nodeject/ui-components
Version:
UI library for non-trivial components
77 lines (76 loc) • 4 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);
};
import { Form } from 'antd';
import * as React from 'react';
import { useEffect, useState } from 'react';
import { createNewComment } from './Comment';
import { RichTextEditor as SchedioEditor } from '../../rich-text-editor';
import * as styles from './Editor.module.less';
export 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 = 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);
};
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 = 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(Form, null,
React.createElement(Form.Item, null,
React.createElement(SchedioEditor, { 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(Form, { className: styles.editorReply },
React.createElement(Form.Item, null,
React.createElement(SchedioEditor, { content: value, getTributeComponent: getTributeComponent, onCancel: hideReplyEditor, onSave: onReplyToComment, saveButtonTitle: "Reply", tributes: tributes }))));
var editExistingCommentEditor = editorType === 'edit' && (React.createElement(Form, null,
React.createElement(Form.Item, null,
React.createElement(SchedioEditor, { content: value, getTributeComponent: getTributeComponent, onCancel: hideEditEditor, onSave: onEditComment, saveButtonTitle: "Save", tributes: tributes }))));
return defaultEditor || replyEditor || editExistingCommentEditor;
};