@topconsultnpm/sdkui-react-beta 6.14.75 → 6.14.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -88,6 +88,8 @@ interface TMBlogsProps {
|
|
|
88
88
|
showFloatingCommentButton?: boolean;
|
|
89
89
|
/** Context descriptor for the blog component */
|
|
90
90
|
context?: TMBlogContextDescriptor;
|
|
91
|
+
/** Layout */
|
|
92
|
+
layoutMode?: 'stacked' | 'chat';
|
|
91
93
|
}
|
|
92
94
|
declare const TMBlogs: (props: TMBlogsProps) => import("react/jsx-runtime").JSX.Element;
|
|
93
95
|
export default TMBlogs;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import { DcmtTypeListCacheService, LayoutModes, ResultTypes, SDK_Globals, WorkingGroupEngine } from "@topconsultnpm/sdk-ts-beta";
|
|
4
4
|
import { ContextMenu, ScrollView } from 'devextreme-react';
|
|
5
5
|
import { SDKUI_Localizator, IconAttachment, getExceptionMessage, Globalization, IconBoard } from '../../helper';
|
|
@@ -31,7 +31,7 @@ const TMBlogs = (props) => {
|
|
|
31
31
|
isRestoreEnabled: false,
|
|
32
32
|
isRefreshEnabled: false,
|
|
33
33
|
isCreateContextualTask: false,
|
|
34
|
-
}, refreshCallback, newPosts = [], showCommentFormCallback, showTaskFormCallback, showContextMenu = true, handleAttachmentFocus, showFloatingCommentButton = false, context, } = props;
|
|
34
|
+
}, refreshCallback, newPosts = [], showCommentFormCallback, showTaskFormCallback, showContextMenu = true, handleAttachmentFocus, showFloatingCommentButton = false, context, layoutMode = 'stacked' } = props;
|
|
35
35
|
// Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
|
|
36
36
|
const deviceType = useDeviceType();
|
|
37
37
|
const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
|
|
@@ -64,8 +64,11 @@ const TMBlogs = (props) => {
|
|
|
64
64
|
const [isHeaderHidden, setIsHeaderHidden] = useState(isHeaderFullyHidden(currentHeader));
|
|
65
65
|
// showId is a state variable that determines whether an ID-related component or feature should be displayed
|
|
66
66
|
const [localShowId, setLocalShowId] = useState(false);
|
|
67
|
-
// State variable to track the
|
|
68
|
-
const [
|
|
67
|
+
// State variable to track the new posts
|
|
68
|
+
const [newPostIds, setNewPostIds] = useState(new Set());
|
|
69
|
+
const firstNewPostIndex = useMemo(() => {
|
|
70
|
+
return blogPosts.findIndex(post => post.id !== undefined && newPostIds.has(post.id));
|
|
71
|
+
}, [blogPosts, newPostIds]);
|
|
69
72
|
// Ref to the container
|
|
70
73
|
const containerRef = useRef(null);
|
|
71
74
|
// State variable to control the visibility of the wait panel.
|
|
@@ -291,13 +294,23 @@ const TMBlogs = (props) => {
|
|
|
291
294
|
return menuItemsElements;
|
|
292
295
|
}, [isHeaderHidden, localShowId, setLocalShowId, focusedBlog, focusedAttachment, showDcmtForm]);
|
|
293
296
|
useEffect(() => {
|
|
294
|
-
if
|
|
295
|
-
setNewPostCount(0);
|
|
297
|
+
// Check if context exists, the engine is 'WorkingGroupEngine',
|
|
296
298
|
if (context && context.engine === 'WorkingGroupEngine' && context.object && context.object.id) {
|
|
297
|
-
|
|
298
|
-
|
|
299
|
+
// Find the number of new posts for the active working group
|
|
300
|
+
const newPostsCount = newPosts?.find(d => d.id === context.object?.id)?.count ?? 0;
|
|
301
|
+
// If there are no blog posts or the count of new posts is 0 or less, reset the set of new post IDs to an empty set and exit early
|
|
302
|
+
if (blogPosts.length === 0 || newPostsCount <= 0) {
|
|
303
|
+
setNewPostIds(new Set());
|
|
304
|
+
return;
|
|
305
|
+
}
|
|
306
|
+
// Calculate the starting index for slicing the blogPosts array to get only
|
|
307
|
+
const startIndex = Math.max(blogPosts.length - newPostsCount, 0);
|
|
308
|
+
// Extract the IDs of the posts from that slice and filter out undefined IDs
|
|
309
|
+
const ids = blogPosts.slice(startIndex).map(post => post.id).filter((id) => id !== undefined);
|
|
310
|
+
// Update the state with the new set of post IDs considered 'new'
|
|
311
|
+
setNewPostIds(new Set(ids));
|
|
299
312
|
}
|
|
300
|
-
}, [
|
|
313
|
+
}, [blogPosts, newPosts, context]);
|
|
301
314
|
useEffect(() => {
|
|
302
315
|
if (showId !== undefined)
|
|
303
316
|
setLocalShowId(showId);
|
|
@@ -434,101 +447,124 @@ const TMBlogs = (props) => {
|
|
|
434
447
|
return AttachmentElement(attachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, isSelected, searchText, color, downloadDcmtsAsync, handleFocusedAttachment, setAnchorEl, contextMenuRef);
|
|
435
448
|
}) });
|
|
436
449
|
};
|
|
437
|
-
|
|
450
|
+
const renderBlogPostContent = (blogPost, index, isOwnComment) => {
|
|
451
|
+
const isSelected = focusedBlog?.id === blogPost.id;
|
|
452
|
+
const isNew = Boolean((blogPost.newPosts ?? 0) || (blogPost.id !== undefined && blogPost.id !== null && newPostIds.has(blogPost.id)));
|
|
453
|
+
const backgroundColors = {
|
|
454
|
+
default: layoutMode === 'stacked' ? colors.LIGHT_GRAY : isOwnComment ? '#D9EFE0' : '#F3E6E6',
|
|
455
|
+
selectedItems: isSelected ? color ?? colors.PRIMARY_BLUE : colors.PRIMARY_BLUE,
|
|
456
|
+
};
|
|
457
|
+
let bgColor = isSelected ? backgroundColors.selectedItems : backgroundColors.default;
|
|
458
|
+
let textColor = blogPost.isSys ? colors.RED : isSelected ? colors.WHITE : colors.BLACK;
|
|
459
|
+
let iconColor = textColor;
|
|
460
|
+
const classID = blogPost.classID;
|
|
461
|
+
if (classID) {
|
|
462
|
+
if (classID === 'DS')
|
|
463
|
+
iconColor = isSelected ? colors.WHITE : colors.PRIMARY_ORANGE;
|
|
464
|
+
if (classID === 'WG')
|
|
465
|
+
iconColor = isSelected ? colors.WHITE : colors.PRIMARY_GREEN;
|
|
466
|
+
}
|
|
467
|
+
const canNavigate = () => {
|
|
468
|
+
return Boolean(handleNavigateToWGs && id && classID === 'WG');
|
|
469
|
+
};
|
|
470
|
+
const headerClickCallback = () => {
|
|
471
|
+
const id = blogPost.id;
|
|
472
|
+
if (handleNavigateToWGs && id && classID === 'WG')
|
|
473
|
+
handleNavigateToWGs(id);
|
|
474
|
+
};
|
|
475
|
+
const onClickCallback = () => {
|
|
476
|
+
handleFocusedBlog(blogPost);
|
|
477
|
+
};
|
|
478
|
+
const handleKeyDown = (event) => {
|
|
479
|
+
event.preventDefault();
|
|
480
|
+
if (!focusedBlog)
|
|
481
|
+
return;
|
|
482
|
+
const currentIndex = blogPosts.findIndex(post => post.id === focusedBlog.id);
|
|
483
|
+
if (currentIndex === -1)
|
|
484
|
+
return;
|
|
485
|
+
switch (event.key) {
|
|
486
|
+
case 'ArrowDown':
|
|
487
|
+
const nextItem = blogPosts[currentIndex + 1];
|
|
488
|
+
if (nextItem)
|
|
489
|
+
handleFocusedBlog(nextItem);
|
|
490
|
+
break;
|
|
491
|
+
case 'Enter':
|
|
492
|
+
const item = blogPosts[currentIndex];
|
|
493
|
+
const classItemID = item.classID;
|
|
494
|
+
if (handleNavigateToWGs && item.id && classItemID === 'WG')
|
|
495
|
+
handleNavigateToWGs(item.id);
|
|
496
|
+
break;
|
|
497
|
+
default:
|
|
498
|
+
break;
|
|
499
|
+
}
|
|
500
|
+
};
|
|
501
|
+
const handleKeyUp = (event) => {
|
|
502
|
+
event.preventDefault();
|
|
503
|
+
if (event.key === 'ArrowUp' && focusedBlog) {
|
|
504
|
+
const currentIndex = blogPosts.findIndex(post => post.id === focusedBlog.id);
|
|
505
|
+
if (blogPosts[currentIndex - 1]) {
|
|
506
|
+
handleFocusedBlog(blogPosts[currentIndex - 1]);
|
|
507
|
+
}
|
|
508
|
+
;
|
|
509
|
+
}
|
|
510
|
+
};
|
|
511
|
+
const onContextMenu = (e) => {
|
|
512
|
+
e.preventDefault();
|
|
513
|
+
setAnchorEl(e.currentTarget);
|
|
514
|
+
handleFocusedBlog(blogPost);
|
|
515
|
+
handleFocusedAttachment(undefined);
|
|
516
|
+
};
|
|
517
|
+
return (_jsxs(BlogPostContainer, { id: id + "-" + blogPost.id.toString(), ref: containerRef, "$color": textColor, "$textDecoration": blogPost.isDel ? 'line-through' : 'none', "$backgroundColor": bgColor, "$isNew": Boolean(blogPost.newPosts ?? 0) || isNew, "$canNavigate": canNavigate(), "$paddingRight": layoutMode === 'chat' ? "30px" : "10px", onClick: onClickCallback, onDoubleClick: headerClickCallback, tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onContextMenu: onContextMenu, children: [_jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [OwnerInitialsBadge(blogPost), _jsx("div", { style: { flex: "1 1 auto", minWidth: "0" }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: "wrap", overflow: "hidden" }, children: [_jsxs("div", { children: [_jsxs("div", { style: { fontWeight: "bold", fontSize: '1rem', display: "flex", alignItems: "center" }, children: [showIconHeader && blogPost.header && blogPost.classID
|
|
518
|
+
? IconAndHeaderElement(blogPost, iconColor, isSelected, () => {
|
|
519
|
+
if (handleNavigateToWGs && blogPost.id && blogPost.classID === 'WG') {
|
|
520
|
+
handleNavigateToWGs(blogPost.id);
|
|
521
|
+
}
|
|
522
|
+
}, searchText)
|
|
523
|
+
: _jsx("span", { style: { marginLeft: showIconHeader ? "5px" : "0", color: isSelected ? "#fff" : !blogPost.isSys ? TMColors.primary : colors.RED }, children: highlightText(blogPost.ownerName ?? '', searchText, isSelected) }), (blogPost?.newPosts ?? 0) > 0 && (_jsx("div", { style: {
|
|
524
|
+
marginLeft: "5px",
|
|
525
|
+
minWidth: "20px",
|
|
526
|
+
height: "20px",
|
|
527
|
+
padding: "0 6px",
|
|
528
|
+
display: "flex",
|
|
529
|
+
alignItems: "center",
|
|
530
|
+
justifyContent: "center",
|
|
531
|
+
backgroundColor: isSelected ? '#fff' : color,
|
|
532
|
+
color: isSelected ? color : "#fff",
|
|
533
|
+
boxShadow: "1px 1px 2px #00000020",
|
|
534
|
+
borderRadius: "30px",
|
|
535
|
+
fontWeight: "bold",
|
|
536
|
+
fontSize: "12px",
|
|
537
|
+
whiteSpace: "nowrap",
|
|
538
|
+
}, children: blogPost.newPosts }))] }), _jsxs("div", { style: { fontSize: 'calc(1rem - 1px)', color: isSelected ? "#fff" : !blogPost.isSys ? TMColors.primary : colors.RED }, children: [(showIconHeader) && blogPost.header && blogPost.classID &&
|
|
539
|
+
_jsxs(_Fragment, { children: [_jsx("span", { style: { marginLeft: showIconHeader ? "5px" : "0" }, children: blogPost.ownerName }), _jsx("span", { style: { margin: "0 5px" }, children: "\u2501" })] }), blogPost.creationTime &&
|
|
540
|
+
highlightText(`${SDKUI_Localizator.WrittenOn} ${Globalization.getDateTimeDisplayValue(blogPost.creationTime)} ${new Date(blogPost.creationTime).toDateString() === new Date().toDateString() ? `(${SDKUI_Localizator.Today})` : ''}`, searchText, isSelected), localShowId && _jsxs(_Fragment, { children: [_jsx("span", { style: { margin: "0 5px" }, children: "\u2501" }), _jsxs("span", { children: ["(ID: ", blogPost.id, ")"] })] })] })] }), blogPost.attachments && showExtendedAttachments === false &&
|
|
541
|
+
_jsx("div", { style: { marginTop: "10px", fontSize: "13px", display: "flex", justifyContent: "flex-end" }, children: _jsx(TMTooltip, { content: `${SDKUI_Localizator.Attachments}: ${blogPost.attachments.length}`, children: _jsx(IconAttachment, { fontSize: 20, color: isSelected ? '#fff' : color }) }) })] }) })] }), _jsx("div", { style: { marginTop: "10px", fontSize: '1rem' }, children: _jsx(TMHtmlContentDisplay, { markup: blogPost.description ?? '-', searchText: searchText, isSelected: isSelected }) }), showExtendedAttachments && blogPost.attachments && blogPost.attachments.length > 0 &&
|
|
542
|
+
attachmentDetails(blogPost.attachments, isSelected)] }, id + "-" + blogPost.id));
|
|
543
|
+
};
|
|
544
|
+
return _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx("div", { ref: scrollRef, style: { backgroundColor: layoutMode === "stacked" ? "rgba(191, 191, 191, 0.15)" : '#fff', height: "100%", padding: "5px", overflowY: "auto", width: "100%" }, children: blogPosts.length === 0 ?
|
|
438
545
|
_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }, children: [_jsx(IconBoard, { fontSize: 96 }), searchText.length > 0 ?
|
|
439
546
|
_jsx("div", { style: { fontSize: "15px", marginTop: "10px" }, children: SDKUI_Localizator.NoMessagesFound }) :
|
|
440
547
|
_jsx("div", { style: { fontSize: "15px", marginTop: "10px" }, children: SDKUI_Localizator.NoMessages })] })
|
|
441
548
|
: blogPosts.map((blogPost, index) => {
|
|
442
|
-
const
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
const headerClickCallback = () => {
|
|
462
|
-
const id = blogPost.id;
|
|
463
|
-
if (handleNavigateToWGs && id && classID === 'WG')
|
|
464
|
-
handleNavigateToWGs(id);
|
|
465
|
-
};
|
|
466
|
-
const onClickCallback = () => {
|
|
467
|
-
handleFocusedBlog(blogPost);
|
|
468
|
-
};
|
|
469
|
-
const handleKeyDown = (event) => {
|
|
470
|
-
event.preventDefault();
|
|
471
|
-
if (!focusedBlog)
|
|
472
|
-
return;
|
|
473
|
-
const currentIndex = blogPosts.findIndex(post => post.id === focusedBlog.id);
|
|
474
|
-
if (currentIndex === -1)
|
|
475
|
-
return;
|
|
476
|
-
switch (event.key) {
|
|
477
|
-
case 'ArrowDown':
|
|
478
|
-
const nextItem = blogPosts[currentIndex + 1];
|
|
479
|
-
if (nextItem)
|
|
480
|
-
handleFocusedBlog(nextItem);
|
|
481
|
-
break;
|
|
482
|
-
case 'Enter':
|
|
483
|
-
const item = blogPosts[currentIndex];
|
|
484
|
-
const classItemID = item.classID;
|
|
485
|
-
if (handleNavigateToWGs && item.id && classItemID === 'WG')
|
|
486
|
-
handleNavigateToWGs(item.id);
|
|
487
|
-
break;
|
|
488
|
-
default:
|
|
489
|
-
break;
|
|
490
|
-
}
|
|
491
|
-
};
|
|
492
|
-
const handleKeyUp = (event) => {
|
|
493
|
-
event.preventDefault();
|
|
494
|
-
if (event.key === 'ArrowUp' && focusedBlog) {
|
|
495
|
-
const currentIndex = blogPosts.findIndex(post => post.id === focusedBlog.id);
|
|
496
|
-
if (blogPosts[currentIndex - 1]) {
|
|
497
|
-
handleFocusedBlog(blogPosts[currentIndex - 1]);
|
|
498
|
-
}
|
|
499
|
-
;
|
|
500
|
-
}
|
|
501
|
-
};
|
|
502
|
-
const onContextMenu = (e) => {
|
|
503
|
-
e.preventDefault();
|
|
504
|
-
setAnchorEl(e.currentTarget);
|
|
505
|
-
handleFocusedBlog(blogPost);
|
|
506
|
-
handleFocusedAttachment(undefined);
|
|
507
|
-
};
|
|
508
|
-
return (_jsxs(BlogPostContainer, { id: id + "-" + blogPost.id.toString(), ref: containerRef, "$color": textColor, "$textDecoration": blogPost.isDel ? 'line-through' : 'none', "$backgroundColor": bgColor, "$isNew": Boolean(blogPost.newPosts ?? 0) || isNew, "$canNavigate": canNavigate(), onClick: onClickCallback, onDoubleClick: headerClickCallback, tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onContextMenu: onContextMenu, children: [_jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [OwnerInitialsBadge(blogPost), _jsx("div", { style: { flex: "1 1 auto", minWidth: "0" }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: "wrap", overflow: "hidden" }, children: [_jsxs("div", { children: [_jsxs("div", { style: { fontWeight: "bold", fontSize: '1rem', display: "flex", alignItems: "center" }, children: [(showIconHeader && (blogPost.header && blogPost.classID))
|
|
509
|
-
? (IconAndHeaderElement(blogPost, iconColor, isSelected, headerClickCallback, searchText))
|
|
510
|
-
: _jsx("span", { style: {
|
|
511
|
-
marginLeft: showIconHeader ? "5px" : "0",
|
|
512
|
-
color: isSelected ? "#fff" : !blogPost.isSys ? TMColors.primary : colors.RED
|
|
513
|
-
}, children: highlightText(blogPost.ownerName ?? '', searchText, isSelected) }), (blogPost?.newPosts ?? 0) > 0 && (_jsx("div", { style: {
|
|
514
|
-
marginLeft: "5px",
|
|
515
|
-
minWidth: "20px",
|
|
516
|
-
height: "20px",
|
|
517
|
-
padding: "0 6px",
|
|
518
|
-
display: "flex",
|
|
519
|
-
alignItems: "center",
|
|
520
|
-
justifyContent: "center",
|
|
521
|
-
backgroundColor: isSelected ? '#fff' : color,
|
|
522
|
-
color: isSelected ? color : "#fff",
|
|
523
|
-
boxShadow: "1px 1px 2px #00000020",
|
|
524
|
-
borderRadius: "30px",
|
|
525
|
-
fontWeight: "bold",
|
|
526
|
-
fontSize: "12px",
|
|
527
|
-
whiteSpace: "nowrap",
|
|
528
|
-
}, children: blogPost.newPosts }))] }), _jsxs("div", { style: { fontSize: 'calc(1rem - 1px)', color: isSelected ? "#fff" : !blogPost.isSys ? TMColors.primary : colors.RED }, children: [(showIconHeader && (blogPost.header && blogPost.classID)) && _jsxs("span", { style: { marginLeft: showIconHeader ? "5px" : "0" }, children: [blogPost.ownerName, _jsx("span", { style: { margin: "0 5px" }, children: "\u2501" })] }), blogPost.creationTime
|
|
529
|
-
? highlightText(SDKUI_Localizator.WrittenOn + " " + `${Globalization.getDateTimeDisplayValue(blogPost.creationTime)} ${new Date(blogPost.creationTime).toDateString() === new Date().toDateString() ? "(" + SDKUI_Localizator.Today + ")" : ''}`, searchText, isSelected)
|
|
530
|
-
: '', localShowId && _jsxs("span", { children: [_jsx("span", { style: { margin: "0 5px" }, children: "\u2501" }), _jsxs("span", { children: ["(ID: ", blogPost.id, ")"] })] })] })] }), (blogPost.attachments && showExtendedAttachments === false) &&
|
|
531
|
-
_jsx("div", { style: { marginTop: "10px", fontSize: "13px", display: "flex", justifyContent: "flex-end" }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Attachments + ": " + blogPost.attachments.length, children: _jsx(IconAttachment, { fontSize: 20, color: isSelected ? '#fff' : color }) }) })] }) })] }), _jsx("div", { style: { marginTop: "10px", fontSize: '1rem' }, children: _jsx(TMHtmlContentDisplay, { markup: blogPost.description ?? '-', searchText: searchText, isSelected: isSelected }) }), (showExtendedAttachments && blogPost.attachments && blogPost.attachments.length > 0) && attachmentDetails(blogPost.attachments, isSelected)] }, id + "-" + blogPost.id));
|
|
549
|
+
const isOwnComment = blogPost.ownerID === SDK_Globals.tmSession?.SessionDescr?.userID;
|
|
550
|
+
return (_jsxs(React.Fragment, { children: [index === firstNewPostIndex && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', color: TMColors.primary, fontWeight: '600', fontSize: '0.9rem', userSelect: 'none', }, children: [_jsx("hr", { style: { flex: 1, border: 'none', borderTop: `1px solid ${TMColors.primary}`, marginRight: '10px' } }), _jsx("span", { children: SDKUI_Localizator.LastRead }), _jsx("hr", { style: { flex: 1, border: 'none', borderTop: `1px solid ${TMColors.primary}`, marginLeft: '10px' } })] })), layoutMode === 'stacked' ? renderBlogPostContent(blogPost, index, isOwnComment) :
|
|
551
|
+
_jsx("div", { id: 'blogPostChat-' + id + "-" + blogPost.id.toString(), style: {
|
|
552
|
+
display: "flex",
|
|
553
|
+
flexDirection: "row",
|
|
554
|
+
alignItems: "flex-start",
|
|
555
|
+
padding: "5px",
|
|
556
|
+
borderRadius: "12px",
|
|
557
|
+
cursor: "default",
|
|
558
|
+
justifyContent: isOwnComment ? "flex-end" : "flex-start",
|
|
559
|
+
}, children: _jsx("div", { style: {
|
|
560
|
+
display: "flex",
|
|
561
|
+
flexDirection: "column",
|
|
562
|
+
alignItems: isOwnComment ? "flex-end" : "flex-start",
|
|
563
|
+
textAlign: "left",
|
|
564
|
+
maxWidth: '80%',
|
|
565
|
+
borderRadius: '8px',
|
|
566
|
+
backgroundColor: isOwnComment ? '#E8EBFA' : '#f5f5f5',
|
|
567
|
+
}, children: renderBlogPostContent(blogPost, index, isOwnComment) }) }, 'blogPostChat-' + id + "-" + blogPost.id)] }, "blog-post-wrapper-" + id + "-" + blogPost.id));
|
|
532
568
|
}) }) });
|
|
533
569
|
};
|
|
534
570
|
const DataGridView = () => {
|