@nodeject/ui-components
Version:
UI library for non-trivial components
83 lines (82 loc) • 4.64 kB
JavaScript
"use strict";
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.Comment = void 0;
var antd_1 = require("antd");
var classcat_1 = require("classcat");
var React = require("react");
var avatar_1 = require("../../avatar");
var icons_1 = require("../../icons");
var rich_text_editor_1 = require("../../rich-text-editor");
var schedio_layout_1 = require("../../schedio-layout");
var styles = require("./Comment.module.less");
var Header = schedio_layout_1.Layout.Header, Sider = schedio_layout_1.Layout.Sider, Content = schedio_layout_1.Layout.Content;
var Text = antd_1.Typography.Text;
var Comment = function (_a) {
var _b, _c;
var id = _a.id, actions = _a.actions, author = _a.author, className = _a.className, content = _a.body, createdAt = _a.createdAt, showHeader = _a.showHeader, showSider = _a.showSider, style = _a.style;
return (React.createElement("div", { id: id, className: classcat_1.default((_b = {},
_b[styles.comment] = true,
_b.relative = true,
_b)), style: style },
React.createElement("div", { className: classcat_1.default({
'absolute right-2 z-10': true,
'-mt-5': showHeader,
'-mt-7': !showHeader
}) },
React.createElement(CommentMenu, { onReplyToClick: function () { return actions === null || actions === void 0 ? void 0 : actions.onReplyToClick(id); } })),
React.createElement(schedio_layout_1.Layout, { className: classcat_1.default((_c = {},
_c[className] = Boolean(className),
_c['bg-white hover:bg-gray-100'] = true,
_c)) },
React.createElement(Sider, { className: "w-10 flex justify-center" }, showSider ? (React.createElement(CommentSiderAuthor, { author: author })) : (React.createElement(CommentSiderCreatedAt, { className: styles.sider, createdAt: createdAt }))),
React.createElement(Content, { className: "pl-2" },
React.createElement(schedio_layout_1.Layout, null,
React.createElement(Header, null, showHeader && (React.createElement(CommentHeader, { author: author, createdAt: createdAt }))),
React.createElement(Content, { className: "overflow-auto" },
React.createElement(CommentContent, { content: content })))))));
};
exports.Comment = Comment;
exports.Comment.defaultProps = {
showHeader: true,
showSider: true
};
var CommentHeader = function (_a) {
var author = _a.author, createdAt = _a.createdAt;
return (React.createElement("div", { className: "flex items-baseline -mt-1" },
React.createElement(Text, { className: "font-bold" }, author === null || author === void 0 ? void 0 : author.display),
React.createElement(Text, { type: "secondary", className: "ml-2" }, "todo: createdAt should be formated as HH:mm with dayjs")));
};
var CommentSiderAuthor = function (_a) {
var _b;
var author = _a.author, className = _a.className;
return (React.createElement("div", { className: classcat_1.default((_b = {},
_b[className] = Boolean(className),
_b.flex = true,
_b)) },
React.createElement(avatar_1.Avatar, __assign({}, author, { size: 37 }))));
};
var CommentSiderCreatedAt = function (_a) {
var className = _a.className, createdAt = _a.createdAt;
return (React.createElement(antd_1.Tooltip, { title: 'todo: createdAt should be formated as dd MMMM yyyy HH:mm:ss with dayjs' },
React.createElement(Text, { className: className, type: "secondary" }, "todo: createdAt should be formated as HH:mm with dayjs")));
};
var CommentContent = function (_a) {
var content = _a.content;
return React.createElement(rich_text_editor_1.RichTextViewer, { content: content });
};
var CommentMenu = function (_a) {
var onReplyToClick = _a.onReplyToClick;
return (React.createElement("div", { className: styles.menu + " z-50 bg-white px-1 py-1 rounded-md border border-gray-200", onClick: onReplyToClick },
React.createElement(icons_1.Icons.Conversation.MessageIcon, { className: "hover:bg-gray-200 p-2 rounded-sm" })));
};