@contentstack/live-preview-utils/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentCard.cjs.map

Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting live changes to the preview pane.

{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentCard.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect, useState, useMemo } from \"preact/hooks\";\nimport CommentTextArea from \"./CommentTextArea\";\nimport {\n    ICommentCard,\n    IMessageDTO,\n    IUserDTO,\n} from \"../../../types/collab.types\";\nimport { getUserName, formatDate } from \"../../../utils/collabUtils\";\nimport CommentActionBar from \"./CommentActionBar\";\nimport CommentResolvedText from \"./CommentResolvedText\";\nimport Avatar from \"../Avatar/Avatar\";\nimport ThreadBodyLoader from \"./loader/ThreadBody\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\nconst formatCommentDate = (comment: IMessageDTO | null): string => {\n    return comment ? formatDate(comment.updatedAt || comment.createdAt) : \"\";\n};\n\nconst CommentCard = ({\n    userState,\n    comment,\n    onClose,\n    handleOnSaveRef,\n    mode,\n}: ICommentCard) => {\n    const [commentUser, setCommentUser] = useState<IUserDTO | null>(null);\n    const [isHovered, setIsHovered] = useState(false);\n\n    useEffect(() => {\n        setCommentUser(\n            comment\n                ? userState.userMap[comment.createdBy]\n                : userState.currentUser\n        );\n    }, [comment, userState]);\n\n    const formattedDate = useMemo(() => formatCommentDate(comment), [comment]);\n\n    if (!commentUser) {\n        return <ThreadBodyLoader key=\"collab-thread-body--comment-loader\" />;\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"collab-thread-comment--wrapper\",\n                collabStyles()[\"collab-thread-comment--wrapper\"]\n            )}\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n        >\n            <div\n                className={classNames(\n                    \"collab-thread-comment--user-details\",\n                    \"flex-v-center\",\n                    collabStyles()[\"collab-thread-comment--user-details\"],\n                    flexAlignCenter\n                )}\n            >\n                <Avatar\n                    avatar={\n                        {\n                            name: getUserName(commentUser),\n                            id: commentUser.uid,\n                        } as any\n                    }\n                />\n                <div\n                    className={classNames(\n                        \"collab-thread-comment--user-details__text\",\n                        collabStyles()[\n                            \"collab-thread-comment--user-details__text\"\n                        ]\n                    )}\n                >\n                    <div\n                        className={classNames(\n                            \"collab-thread-comment--user-name\",\n                            collabStyles()[\"collab-thread-comment--user-name\"]\n                        )}\n                    >\n                        {getUserName(commentUser)}\n                    </div>\n                    {comment && (\n                        <div\n                            className={classNames(\n                                \"collab-thread-comment--time-details\",\n                                collabStyles()[\n                                    \"collab-thread-comment--time-details\"\n                                ]\n                            )}\n                        >\n                            {formattedDate}\n                        </div>\n                    )}\n                </div>\n                {isHovered && (\n                    <CommentActionBar\n                        mode={mode}\n                        commentUser={commentUser}\n                        currentUser={userState.currentUser}\n                        commentUID={comment?._id}\n                    />\n                )}\n            </div>\n            {mode === \"edit\" ? (\n                <CommentTextArea\n                    onClose={onClose}\n                    userState={userState}\n                    handleOnSaveRef={handleOnSaveRef}\n                    comment={comment}\n                />\n            ) : (\n                comment && (\n                    <CommentResolvedText\n                        comment={comment}\n                        userState={userState}\n                    />\n                )\n            )}\n        </div>\n    );\n};\n\nexport default CommentCard;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA6C;AAC7C,6BAA4B;AAM5B,yBAAwC;AACxC,8BAA6B;AAC7B,iCAAgC;AAChC,oBAAmB;AACnB,wBAA6B;AAC7B,oBAA8C;AAC9C,wBAAuB;AA2BR;AAzBf,IAAM,oBAAoB,CAAC,YAAwC;AAC/D,SAAO,cAAU,+BAAW,QAAQ,aAAa,QAAQ,SAAS,IAAI;AAC1E;AAEA,IAAM,cAAc,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAoB;AAChB,QAAM,CAAC,aAAa,cAAc,QAAI,uBAA0B,IAAI;AACpE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,8BAAU,MAAM;AACZ;AAAA,MACI,UACM,UAAU,QAAQ,QAAQ,SAAS,IACnC,UAAU;AAAA,IACpB;AAAA,EACJ,GAAG,CAAC,SAAS,SAAS,CAAC;AAEvB,QAAM,oBAAgB,sBAAQ,MAAM,kBAAkB,OAAO,GAAG,CAAC,OAAO,CAAC;AAEzE,MAAI,CAAC,aAAa;AACd,WAAO,4CAAC,kBAAAA,SAAA,IAAqB,oCAAqC;AAAA,EACtE;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAC;AAAA,QACP;AAAA,YACA,4BAAa,EAAE,gCAAgC;AAAA,MACnD;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MAEtC;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,cACA;AAAA,kBACA,4BAAa,EAAE,qCAAqC;AAAA,cACpD;AAAA,YACJ;AAAA,YAEA;AAAA;AAAA,gBAAC,cAAAC;AAAA,gBAAA;AAAA,kBACG,QACI;AAAA,oBACI,UAAM,gCAAY,WAAW;AAAA,oBAC7B,IAAI,YAAY;AAAA,kBACpB;AAAA;AAAA,cAER;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACG,eAAW,kBAAAD;AAAA,oBACP;AAAA,wBACA,4BAAa,EACT,2CACJ;AAAA,kBACJ;AAAA,kBAEA;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACG,eAAW,kBAAAA;AAAA,0BACP;AAAA,8BACA,4BAAa,EAAE,kCAAkC;AAAA,wBACrD;AAAA,wBAEC,8CAAY,WAAW;AAAA;AAAA,oBAC5B;AAAA,oBACC,WACG;AAAA,sBAAC;AAAA;AAAA,wBACG,eAAW,kBAAAA;AAAA,0BACP;AAAA,8BACA,4BAAa,EACT,qCACJ;AAAA,wBACJ;AAAA,wBAEC;AAAA;AAAA,oBACL;AAAA;AAAA;AAAA,cAER;AAAA,cACC,aACG;AAAA,gBAAC,wBAAAE;AAAA,gBAAA;AAAA,kBACG;AAAA,kBACA;AAAA,kBACA,aAAa,UAAU;AAAA,kBACvB,YAAY,SAAS;AAAA;AAAA,cACzB;AAAA;AAAA;AAAA,QAER;AAAA,QACC,SAAS,SACN;AAAA,UAAC,uBAAAC;AAAA,UAAA;AAAA,YACG;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACJ,IAEA,WACI;AAAA,UAAC,2BAAAC;AAAA,UAAA;AAAA,YACG;AAAA,YACA;AAAA;AAAA,QACJ;AAAA;AAAA;AAAA,EAGZ;AAER;AAEA,IAAO,sBAAQ;","names":["ThreadBodyLoader","classNames","Avatar","CommentActionBar","CommentTextArea","CommentResolvedText"]}