@nodeject/ui-components/esm/threads/Thread.js

UI library for non-trivial components

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 * as React from 'react';
import { v4 as uuidv4 } from 'uuid';
import { EditableRichText } from '../rich-text-editor';
import { Layout } from '../schedio-layout';
import { Comment, CommentList } from './components';
var Content = Layout.Content, Footer = Layout.Footer, Header = Layout.Header;
export 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(EditableRichText, { toolbarButtons: toolbarButtons, editorInitialized: editorInitialized, state: { content: '', editorMode: 'edit' }, actions: { onSave: onSave }, toolbarPosition: toolbarPosition }));
    return (React.createElement(Layout, { className: "bg-white" },
        order === 'desc' && React.createElement(Header, { fixed: true }, editor),
        React.createElement(Content, { fixedHeight: fixedHeight },
            React.createElement(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(Comment, __assign({ key: comment.id }, comment));
            }))),
        order === 'asc' && (React.createElement(Footer, { fixed: true },
            React.createElement("div", { className: "pt-3" }, editor)))));
};
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: uuidv4(), 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 };
};
Thread.CommmentList = CommentList;
CommentList.defaultProps = {
    order: 'asc'
};
export { CommentList };