From b730cf6acf7da42df9fc9d106272462aba30faaa Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 31 Oct 2021 22:10:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=99=AE=E9=80=9A?=
 =?UTF-8?q?=E8=81=8A=E5=A4=A9=E5=88=97=E8=A1=A8=E7=94=A8=E4=BB=A5=E5=85=9C?=
 =?UTF-8?q?=E5=BA=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChatBox/ChatMessageList/Item.tsx          |  7 ++-
 .../ChatBox/ChatMessageList/NormalList.tsx    | 54 +++++++++++++++++++
 .../ChatMessageList/VirtualizedList.tsx       |  4 +-
 .../ChatBox/ChatMessageList/index.tsx         |  7 ++-
 4 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 web/src/components/ChatBox/ChatMessageList/NormalList.tsx

diff --git a/web/src/components/ChatBox/ChatMessageList/Item.tsx b/web/src/components/ChatBox/ChatMessageList/Item.tsx
index 227adcfc..74e1a8b3 100644
--- a/web/src/components/ChatBox/ChatMessageList/Item.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/Item.tsx
@@ -149,7 +149,10 @@ function findMessageIndexWithId(
 /**
  * 构造聊天项
  */
-export function buildItemRow(messages: ChatMessage[], messageId: string) {
+export function buildMessageItemRow(
+  messages: ChatMessage[],
+  messageId: string
+) {
   const index = findMessageIndexWithId(messages, messageId); // TODO: 这里是因为mattermost的动态列表传的id因此只能这边再用id找回，可以看看是否可以优化
   if (index === -1) {
     return <div />;
@@ -181,7 +184,7 @@ export function buildItemRow(messages: ChatMessage[], messageId: string) {
   }
 
   return (
-    <div key={message._id} data-debug={JSON.stringify(index)}>
+    <div key={message._id}>
       {showDate && (
         <Divider className="text-sm opacity-40 px-6 font-normal select-none">
           {getMessageTimeDiff(messageCreatedAt)}
diff --git a/web/src/components/ChatBox/ChatMessageList/NormalList.tsx b/web/src/components/ChatBox/ChatMessageList/NormalList.tsx
new file mode 100644
index 00000000..3130b9fc
--- /dev/null
+++ b/web/src/components/ChatBox/ChatMessageList/NormalList.tsx
@@ -0,0 +1,54 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useUpdateRef } from 'tailchat-shared';
+import { buildMessageItemRow } from './Item';
+import type { MessageListProps } from './types';
+
+/**
+ * 没有虚拟化版本的聊天列表
+ */
+export const NormalMessageList: React.FC<MessageListProps> = React.memo(
+  (props) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const onUpdateReadedMessageRef = useUpdateRef(props.onUpdateReadedMessage);
+    useEffect(() => {
+      if (props.messages.length === 0) {
+        return;
+      }
+
+      if (containerRef.current?.scrollTop === 0) {
+        // 当前列表在最低
+        onUpdateReadedMessageRef.current(
+          props.messages[props.messages.length - 1]._id
+        );
+      }
+    }, [props.messages.length]);
+
+    const handleScroll = useCallback(() => {
+      if (props.messages.length === 0) {
+        return;
+      }
+
+      if (containerRef.current?.scrollTop === 0) {
+        onUpdateReadedMessageRef.current(
+          props.messages[props.messages.length - 1]._id
+        );
+      }
+    }, [props.messages]);
+
+    return (
+      <div
+        className="flex-1 overflow-y-scroll flex flex-col-reverse"
+        ref={containerRef}
+        onScroll={handleScroll}
+      >
+        <div>
+          {props.messages.map((message, index, arr) =>
+            buildMessageItemRow(arr, message._id)
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+NormalMessageList.displayName = 'NormalMessageList';
diff --git a/web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx b/web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx
index 5ae0f8cc..99034ba7 100644
--- a/web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx
@@ -13,7 +13,7 @@ import React, {
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { ChatMessage, t, usePrevious, useUpdateRef } from 'tailchat-shared';
 import { messageReverseItemId } from './const';
-import { buildItemRow } from './Item';
+import { buildMessageItemRow } from './Item';
 import type { MessageListProps } from './types';
 
 // Reference: https://github.com/mattermost/mattermost-webapp/blob/master/components/post_view/post_list_virtualized/post_list_virtualized.jsx
@@ -114,7 +114,7 @@ export const VirtualizedMessageList: React.FC<MessageListProps> = React.memo(
         );
       }
 
-      return buildItemRow(props.messages, itemId);
+      return buildMessageItemRow(props.messages, itemId);
     };
 
     // 初始渲染范围
diff --git a/web/src/components/ChatBox/ChatMessageList/index.tsx b/web/src/components/ChatBox/ChatMessageList/index.tsx
index 1dc9ad70..9d86017c 100644
--- a/web/src/components/ChatBox/ChatMessageList/index.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/index.tsx
@@ -1,13 +1,18 @@
 import React from 'react';
+import { NormalMessageList } from './NormalList';
 import type { MessageListProps } from './types';
 import { VirtualizedMessageList } from './VirtualizedList';
 
+const useVirtualizedList = true; // 是否使用虚拟化列表
+
 export const ChatMessageList: React.FC<MessageListProps> = React.memo(
   (props) => {
-    return (
+    return useVirtualizedList ? (
       <div className="flex-1">
         <VirtualizedMessageList {...props} />
       </div>
+    ) : (
+      <NormalMessageList {...props} />
     );
   }
 );