From e094e64e51341ae74e72b3239d407a7adcb9eb42 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 4 Sep 2021 15:49:46 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E8=81=8A?=
 =?UTF-8?q?=E5=A4=A9=E6=BB=9A=E5=8A=A8=E9=80=BB=E8=BE=91=EF=BC=8C=E9=80=9A?=
 =?UTF-8?q?=E8=BF=87css=E6=9D=A5=E8=BF=9B=E8=A1=8C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChatBox/ChatMessageList/index.tsx         | 85 ++++++++-----------
 1 file changed, 35 insertions(+), 50 deletions(-)

diff --git a/web/src/components/ChatBox/ChatMessageList/index.tsx b/web/src/components/ChatBox/ChatMessageList/index.tsx
index a4c7177f..e1accb71 100644
--- a/web/src/components/ChatBox/ChatMessageList/index.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import {
   ChatMessage,
   getMessageTimeDiff,
@@ -12,60 +12,45 @@ interface ChatMessageListProps {
 }
 export const ChatMessageList: React.FC<ChatMessageListProps> = React.memo(
   (props) => {
-    const ref = useRef<HTMLDivElement>(null);
-    const len = props.messages.length;
-
-    useEffect(() => {
-      // 当会话消息增加时, 滚动到底部
-      requestAnimationFrame(() => {
-        if (ref.current === null) {
-          return;
-        }
-
-        ref.current.scrollTo({
-          top: ref.current.scrollHeight,
-          behavior: 'smooth',
-        });
-      });
-    }, [len]);
-
     return (
-      <div className="flex-1 overflow-y-scroll" ref={ref}>
-        {props.messages.map((message, index, arr) => {
-          let showDate = true;
-          let showAvatar = true;
-          const messageCreatedAt = new Date(message.createdAt ?? '');
-          if (index > 0) {
-            // 当不是第一条数据时
+      <div className="flex-1 overflow-y-scroll flex flex-col-reverse">
+        <div>
+          {props.messages.map((message, index, arr) => {
+            let showDate = true;
+            let showAvatar = true;
+            const messageCreatedAt = new Date(message.createdAt ?? '');
+            if (index > 0) {
+              // 当不是第一条数据时
 
-            // 进行时间合并
-            const prevMessage = arr[index - 1];
-            if (
-              !shouldShowMessageTime(
-                new Date(prevMessage.createdAt ?? ''),
-                messageCreatedAt
-              )
-            ) {
-              showDate = false;
-            }
+              // 进行时间合并
+              const prevMessage = arr[index - 1];
+              if (
+                !shouldShowMessageTime(
+                  new Date(prevMessage.createdAt ?? ''),
+                  messageCreatedAt
+                )
+              ) {
+                showDate = false;
+              }
 
-            // 进行头像合并(在同一时间块下)
-            if (showDate === false) {
-              showAvatar = prevMessage.author !== message.author;
+              // 进行头像合并(在同一时间块下)
+              if (showDate === false) {
+                showAvatar = prevMessage.author !== message.author;
+              }
             }
-          }
 
-          return (
-            <div key={message._id}>
-              {showDate && (
-                <Divider className="text-sm opacity-40 px-6 font-normal select-none">
-                  {getMessageTimeDiff(messageCreatedAt)}
-                </Divider>
-              )}
-              <ChatMessageItem showAvatar={showAvatar} payload={message} />
-            </div>
-          );
-        })}
+            return (
+              <div key={message._id}>
+                {showDate && (
+                  <Divider className="text-sm opacity-40 px-6 font-normal select-none">
+                    {getMessageTimeDiff(messageCreatedAt)}
+                  </Divider>
+                )}
+                <ChatMessageItem showAvatar={showAvatar} payload={message} />
+              </div>
+            );
+          })}
+        </div>
       </div>
     );
   }