@nodeject/ui-components
Version:
UI library for non-trivial components
79 lines (78 loc) • 4.3 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 { Tooltip, Typography } from 'antd';
import cc from 'classcat';
import * as React from 'react';
import { Avatar } from '../../avatar';
import { Icons } from '../../icons';
import { RichTextViewer } from '../../rich-text-editor';
import { Layout } from '../../schedio-layout';
import * as styles from './Comment.module.less';
var Header = Layout.Header, Sider = Layout.Sider, Content = Layout.Content;
var Text = Typography.Text;
export 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: cc((_b = {},
_b[styles.comment] = true,
_b.relative = true,
_b)), style: style },
React.createElement("div", { className: cc({
'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(Layout, { className: cc((_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(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 })))))));
};
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: cc((_b = {},
_b[className] = Boolean(className),
_b.flex = true,
_b)) },
React.createElement(Avatar, __assign({}, author, { size: 37 }))));
};
var CommentSiderCreatedAt = function (_a) {
var className = _a.className, createdAt = _a.createdAt;
return (React.createElement(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(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.Conversation.MessageIcon, { className: "hover:bg-gray-200 p-2 rounded-sm" })));
};