fix: [MessageContainer] scrollToEnd support force

alibaba · Jun 29, 2022 · ea8566b · ea8566b
1 parent c4e0058
commit ea8566b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/demo/src/demo/Chat.tsx b/demo/src/demo/Chat.tsx
@@ -140,6 +140,7 @@ export default () => {
   const msgRef = React.useRef(null);
 
   window.appendMsg = appendMsg;
+  window.msgRef = msgRef;
 
   // 发送回调
   function handleSend(type: string, val: string) {
@@ -151,7 +152,9 @@ export default () => {
         position: 'right',
       });
 
-      setTyping(true);
+      setTimeout(() => {
+        setTyping(true);
+      }, 10);
 
       // 模拟回复消息
       setTimeout(() => {

diff --git a/src/components/Chat/index.tsx b/src/components/Chat/index.tsx
@@ -184,7 +184,7 @@ export const Chat = React.forwardRef<HTMLDivElement, ChatProps>((props, ref) =>
 
   function handleInputFocus(e: React.FocusEvent<HTMLTextAreaElement>) {
     if (messagesRef && messagesRef.current) {
-      messagesRef.current.scrollToEnd({ animated: false });
+      messagesRef.current.scrollToEnd({ animated: false, force: true });
     }
     if (onInputFocus) {
       onInputFocus(e);

diff --git a/src/components/MessageContainer/index.tsx b/src/components/MessageContainer/index.tsx
@@ -44,20 +44,23 @@ export const MessageContainer = React.forwardRef<MessageContainerHandle, Message
 
     const [showBackBottom, setShowBackBottom] = useState(false);
     const [newCount, setNewCount] = useState(0);
-    const newCountRef = useRef(0);
+    const showBackBottomtRef = useRef(showBackBottom);
+    const newCountRef = useRef(newCount);
     const messagesRef = useRef<HTMLDivElement>(null);
     const scrollerRef = useRef<PullToRefreshHandle>(null);
     const bottomRef = useRef<HTMLDivElement>(null);
     const lastMessage = messages[messages.length - 1];
 
     const scrollToEnd = useCallback((opts?: ScrollToEndOptions) => {
       if (scrollerRef.current) {
-        scrollerRef.current.scrollToEnd(opts);
+        if (!showBackBottomtRef.current || (opts && opts.force)) {
+          scrollerRef.current.scrollToEnd(opts);
+        }
       }
     }, []);
 
     const handleBackBottomClick = () => {
-      scrollToEnd({ animated: false });
+      scrollToEnd({ animated: false, force: true });
       setNewCount(0);
       setShowBackBottom(false);
 
@@ -97,6 +100,10 @@ export const MessageContainer = React.forwardRef<MessageContainerHandle, Message
       newCountRef.current = newCount;
     }, [newCount]);
 
+    useEffect(() => {
+      showBackBottomtRef.current = showBackBottom;
+    }, [showBackBottom]);
+
     useEffect(() => {
       const scroller = scrollerRef.current;
       const wrapper = scroller && scroller.wrapperRef.current;
@@ -106,10 +113,10 @@ export const MessageContainer = React.forwardRef<MessageContainerHandle, Message
       }
 
       if (lastMessage.position === 'right') {
-        scrollToEnd();
+        scrollToEnd({ force: true });
       } else if (isNearBottom(wrapper, 1)) {
         const animated = !!wrapper.scrollTop;
-        scrollToEnd({ animated });
+        scrollToEnd({ animated, force: true });
       } else {
         setNewCount((c) => c + 1);
         setShowBackBottom(true);

diff --git a/src/components/PullToRefresh/index.tsx b/src/components/PullToRefresh/index.tsx
@@ -26,6 +26,7 @@ export interface PullToRefreshProps {
 
 export interface ScrollToEndOptions {
   animated?: boolean;
+  force?: boolean;
 }
 
 interface PTRScrollToOptions extends ScrollToEndOptions {