From 66d2b916540fd295e231bb08d91616d2a378fbac Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Thu, 8 Dec 2022 00:06:31 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=99=AE=E9=80=9A?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E7=9A=84=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E8=A1=8C=E4=B8=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

增加滚动锁，在预览之前的历史时有新消息不自动滚动
---
 .../ChatBox/ChatMessageList/NormalList.tsx    | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx b/client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx
index 55377f5f..18c5ec52 100644
--- a/client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx
+++ b/client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef } from 'react';
-import { sharedEvent } from 'tailchat-shared';
+import { useMemoizedFn, useSharedEventHandler } from 'tailchat-shared';
 import { ChatMessageHeader } from './ChatMessageHeader';
 import { buildMessageItemRow } from './Item';
 import type { MessageListProps } from './types';
@@ -10,25 +10,24 @@ import type { MessageListProps } from './types';
 export const NormalMessageList: React.FC<MessageListProps> = React.memo(
   (props) => {
     const containerRef = useRef<HTMLDivElement>(null);
+    const lockRef = useRef(false);
+
+    const scrollToBottom = useMemoizedFn(() => {
+      containerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+    });
 
     useEffect(() => {
       if (props.messages.length === 0) {
         return;
       }
-    }, [props.messages.length]);
-
-    useEffect(() => {
-      const onSendMessage = () => {
-        // 滚动到底部
-        containerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
-      };
 
-      sharedEvent.on('sendMessage', onSendMessage);
+      // 消息长度发生变化，滚动到底部
+      if (lockRef.current === false) {
+        scrollToBottom();
+      }
+    }, [props.messages.length]);
 
-      return () => {
-        sharedEvent.off('sendMessage', onSendMessage);
-      };
-    }, []);
+    useSharedEventHandler('sendMessage', scrollToBottom);
 
     const handleScroll = useCallback(() => {
       if (props.messages.length === 0) {
@@ -41,12 +40,17 @@ export const NormalMessageList: React.FC<MessageListProps> = React.memo(
 
       if (containerRef.current.scrollTop === 0) {
         // 滚动到最底部
+        lockRef.current = false;
       } else if (
         -containerRef.current.scrollTop + containerRef.current.clientHeight ===
         containerRef.current.scrollHeight
       ) {
         // 滚动条碰触到最顶部
         props.onLoadMore();
+      } else {
+        // 滚动在中间
+        // 锁定位置不自动滚动
+        lockRef.current = true;
       }
     }, [props.messages]);