@nodeject/ui-components
Version:
UI library for non-trivial components
107 lines (106 loc) • 4.78 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.CommentList = exports.Thread = void 0;
var React = require("react");
var uuid_1 = require("uuid");
var rich_text_editor_1 = require("../rich-text-editor");
var schedio_layout_1 = require("../schedio-layout");
var components_1 = require("./components");
Object.defineProperty(exports, "CommentList", { enumerable: true, get: function () { return components_1.CommentList; } });
var Content = schedio_layout_1.Layout.Content, Footer = schedio_layout_1.Layout.Footer, Header = schedio_layout_1.Layout.Header;
var Thread = function (props) {
var fixedHeight = props.fixedHeight, order = props.order, saveComment = props.saveComment, toolbarButtons = props.toolbarButtons, toolbarPosition = props.toolbarPosition;
var _a = useOptimisticThread({
author: props.author,
commentList: props.commentList,
saveComment: saveComment
}), commentList = _a.commentList, optimisticOnSave = _a.onSave;
var _b = React.useState(false), editorIsReady = _b[0], setEditorIsReady = _b[1];
var _c = useScrollTo(), bottomRef = _c.ref, scrollToBottom = _c.scrollTo;
var _d = useScrollTo(), topRef = _d.ref, scrollToTop = _d.scrollTo;
var scroll = function () {
if (order === 'asc') {
scrollToBottom();
}
else if (order === 'desc') {
scrollToTop();
}
};
// Init (scrolls to latest msg)
React.useEffect(function () {
if (editorIsReady) {
if (order === 'asc') {
scrollToBottom();
}
}
}, [order, editorIsReady, commentList === null || commentList === void 0 ? void 0 : commentList.length]);
var onSave = function (body) {
optimisticOnSave({ body: body, parent: null });
scroll();
};
var editorInitialized = function (initialized) {
setEditorIsReady(initialized);
};
var editor = (React.createElement(rich_text_editor_1.EditableRichText, { toolbarButtons: toolbarButtons, editorInitialized: editorInitialized, state: { content: '', editorMode: 'edit' }, actions: { onSave: onSave }, toolbarPosition: toolbarPosition }));
return (React.createElement(schedio_layout_1.Layout, { className: "bg-white" },
order === 'desc' && React.createElement(Header, { fixed: true }, editor),
React.createElement(Content, { fixedHeight: fixedHeight },
React.createElement(components_1.CommentList, { order: order, bottomRef: bottomRef, topRef: topRef, align: order === 'asc' ? 'bottom' : 'top' }, commentList === null || commentList === void 0 ? void 0 : commentList.map(function (comment) {
return React.createElement(components_1.Comment, __assign({ key: comment.id }, comment));
}))),
order === 'asc' && (React.createElement(Footer, { fixed: true },
React.createElement("div", { className: "pt-3" }, editor)))));
};
exports.Thread = Thread;
exports.Thread.defaultProps = {
order: 'asc',
toolbarButtons: 'sm',
fixedHeight: true
};
var useScrollTo = function (option) {
var ref = React.useRef(null);
var scrollTo = function () {
ref.current.scrollIntoView(option);
};
return {
ref: ref,
scrollTo: scrollTo
};
};
var useOptimisticThread = function (args) {
var _a = React.useState(args.commentList), commentList = _a[0], setCommentList = _a[1];
React.useEffect(function () {
setCommentList(args.commentList);
}, [JSON.stringify(args.commentList)]);
var onSave = function (_a) {
var body = _a.body, parent = _a.parent;
var newComment = { body: body, id: uuid_1.v4(), parent: parent };
args.saveComment(newComment);
setCommentList(function (list) {
var newCommentList = list.slice();
newCommentList.push({
id: newComment.id,
author: args.author,
body: body,
createdAt: new Date(Date.now()).toISOString()
});
return newCommentList;
});
};
return { commentList: commentList, onSave: onSave };
};
exports.Thread.CommmentList = components_1.CommentList;
components_1.CommentList.defaultProps = {
order: 'asc'
};