ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: reply message click scroll into original msg

Browse Source
This commit is contained in:
Tristan Yang
2023-03-09 11:30:00 +08:00
parent c8850e8c6d
commit 384de7c8df
1 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/Message/Reply.tsx
+14 -4
View File
@@ -1,4 +1,5 @@
import React, { MouseEvent, FC } from "react"; import React, { MouseEvent, FC } from "react";
import clsx from "clsx";
import MarkdownRender from "../MarkdownRender"; import MarkdownRender from "../MarkdownRender";
import { ContentTypes } from "../../../app/config"; import { ContentTypes } from "../../../app/config";
import { getFileIcon, isImage } from "../../utils"; import { getFileIcon, isImage } from "../../utils";
@@ -62,10 +63,14 @@ const Reply: FC<ReplyProps> = ({ mid, interactive = true }) => {
const { mid } = evt.currentTarget.dataset; const { mid } = evt.currentTarget.dataset;
const msgEle = document.querySelector<HTMLDivElement>(`[data-msg-mid='${mid}']`); const msgEle = document.querySelector<HTMLDivElement>(`[data-msg-mid='${mid}']`);
if (msgEle) { if (msgEle) {
msgEle.dataset.highlight = "true"; const _class1 = `md:dark:bg-gray-800`;
const _class2 = `md:bg-gray-100`;
msgEle.classList.add(_class1);
msgEle.classList.add(_class2);
msgEle.scrollIntoView({ behavior: "smooth", block: "center" }); msgEle.scrollIntoView({ behavior: "smooth", block: "center" });
setTimeout(() => { setTimeout(() => {
msgEle.dataset.highlight = "false"; msgEle.classList.remove(_class1);
msgEle.classList.remove(_class2);
}, 3000); }, 3000);
} }
}; };
@@ -77,7 +82,9 @@ const Reply: FC<ReplyProps> = ({ mid, interactive = true }) => {
<div <div
key={mid} key={mid}
data-mid={mid} data-mid={mid}
className={`flex items-start flex-col md:flex-row p-2 bg-gray-100 dark:bg-gray-900 rounded-lg gap-2 mb-1 ${interactive ? "cursor-pointer" : "!bg-transparent"}`} className={clsx(`flex items-start flex-col md:flex-row p-2 bg-gray-100 dark:bg-gray-900 rounded-lg gap-2 mb-1`,
interactive ? "cursor-pointer" : "!bg-transparent"
)}
onClick={interactive ? handleClick : undefined} onClick={interactive ? handleClick : undefined}
> >
<div className="flex items-center gap-1 whitespace-nowrap"> <div className="flex items-center gap-1 whitespace-nowrap">
@@ -90,7 +97,10 @@ const Reply: FC<ReplyProps> = ({ mid, interactive = true }) => {
/> />
<span className="text-sm text-primary-500">{currUser.name}</span> <span className="text-sm text-primary-500">{currUser.name}</span>
</div> </div>
<div className="text-sm flex items-center overflow-hidden">{renderContent(data)}</div> <div className={clsx("text-sm flex items-center overflow-hidden", interactive && "relative")}>
{renderContent(data)}
{interactive && <div className="absolute top-0 left-0 w-full h-full"></div>}
</div>
</div> </div>
); );
}; };