From 27d7f9275663eaae85f87a5e4d200d6e9734f520 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 2 Feb 2022 22:49:10 +0100
Subject: [PATCH] [Refactoring] Infinite Scroll: Support absolute positioning

---
 src/components/common/ChatOrUserPicker.tsx | 40 +++++++++------------
 src/components/left/main/ChatList.tsx      | 41 +++++++++-------------
 src/components/ui/InfiniteScroll.tsx       | 21 ++++++++---
 3 files changed, 49 insertions(+), 53 deletions(-)

diff --git a/src/components/common/ChatOrUserPicker.tsx b/src/components/common/ChatOrUserPicker.tsx
index 22641cba1..329b0066c 100644
--- a/src/components/common/ChatOrUserPicker.tsx
+++ b/src/components/common/ChatOrUserPicker.tsx
@@ -4,7 +4,6 @@ import React, {
 } from '../../lib/teact/teact';
 
 import { CHAT_HEIGHT_PX } from '../../config';
-import { IS_ANDROID } from '../../util/environment';
 import useInfiniteScroll from '../../hooks/useInfiniteScroll';
 import useLang from '../../hooks/useLang';
 import useKeyboardListNavigation from '../../hooks/useKeyboardListNavigation';
@@ -105,31 +104,24 @@ const ChatOrUserPicker: FC<OwnProps> = ({
           className="picker-list custom-scroll"
           items={viewportIds}
           onLoadMore={getMore}
-          noFastList
-          noScrollRestore
+          withAbsolutePositioning
+          maxHeight={chatOrUserIds!.length * CHAT_HEIGHT_PX}
           onKeyDown={handleKeyDown}
         >
-          <div
-            className="scroll-container"
-            // @ts-ignore
-            style={IS_ANDROID ? `height: ${chatOrUserIds!.length * CHAT_HEIGHT_PX}px` : undefined}
-            teactFastList
-          >
-            {viewportIds.map((id, i) => (
-              <ListItem
-                key={id}
-                className="chat-item-clickable force-rounded-corners"
-                style={`top: ${(viewportOffset + i) * CHAT_HEIGHT_PX}px;`}
-                onClick={() => onSelectChatOrUser(id)}
-              >
-                {isUserId(id) ? (
-                  <PrivateChatInfo status={id === currentUserId ? lang('SavedMessagesInfo') : undefined} userId={id} />
-                ) : (
-                  <GroupChatInfo chatId={id} />
-                )}
-              </ListItem>
-            ))}
-          </div>
+          {viewportIds.map((id, i) => (
+            <ListItem
+              key={id}
+              className="chat-item-clickable force-rounded-corners"
+              style={`top: ${(viewportOffset + i) * CHAT_HEIGHT_PX}px;`}
+              onClick={() => onSelectChatOrUser(id)}
+            >
+              {isUserId(id) ? (
+                <PrivateChatInfo status={id === currentUserId ? lang('SavedMessagesInfo') : undefined} userId={id} />
+              ) : (
+                <GroupChatInfo chatId={id} />
+              )}
+            </ListItem>
+          ))}
         </InfiniteScroll>
       ) : viewportIds && !viewportIds.length ? (
         <p className="no-results">{lang('lng_blocked_list_not_found')}</p>
diff --git a/src/components/left/main/ChatList.tsx b/src/components/left/main/ChatList.tsx
index 2cdaf77c7..99e68f400 100644
--- a/src/components/left/main/ChatList.tsx
+++ b/src/components/left/main/ChatList.tsx
@@ -13,7 +13,7 @@ import {
   CHAT_HEIGHT_PX,
   CHAT_LIST_SLICE,
 } from '../../../config';
-import { IS_ANDROID, IS_MAC_OS, IS_PWA } from '../../../util/environment';
+import { IS_MAC_OS, IS_PWA } from '../../../util/environment';
 import { mapValues } from '../../../util/iteratees';
 import { getPinnedChatsCount } from '../../../util/folderManager';
 import usePrevious from '../../../hooks/usePrevious';
@@ -138,38 +138,29 @@ const ChatList: FC<OwnProps> = ({
     const viewportOffset = orderedIds!.indexOf(viewportIds![0]);
     const pinnedCount = getPinnedChatsCount(virtualFolderId) || 0;
 
-    return (
-      <div
-        className="scroll-container"
+    return viewportIds!.map((id, i) => (
+      <Chat
+        key={id}
+        teactOrderKey={i}
+        chatId={id}
+        isPinned={viewportOffset + i < pinnedCount}
+        folderId={folderId}
+        animationType={getAnimationType(id)}
+        orderDiff={orderDiffById[id]}
         // @ts-ignore
-        style={IS_ANDROID ? `height: ${orderedIds!.length * CHAT_HEIGHT_PX}px` : undefined}
-        teactFastList
-      >
-        {viewportIds!.map((id, i) => (
-          <Chat
-            key={id}
-            teactOrderKey={i}
-            chatId={id}
-            isPinned={viewportOffset + i < pinnedCount}
-            folderId={folderId}
-            animationType={getAnimationType(id)}
-            orderDiff={orderDiffById[id]}
-            // @ts-ignore
-            style={`top: ${(viewportOffset + i) * CHAT_HEIGHT_PX}px;`}
-          />
-        ))}
-      </div>
-    );
+        style={`top: ${(viewportOffset + i) * CHAT_HEIGHT_PX}px;`}
+      />
+    ));
   }
 
   return (
     <InfiniteScroll
       className="chat-list custom-scroll"
       items={viewportIds}
-      onLoadMore={getMore}
       preloadBackwards={CHAT_LIST_SLICE}
-      noFastList
-      noScrollRestore
+      withAbsolutePositioning
+      maxHeight={(orderedIds?.length || 0) * CHAT_HEIGHT_PX}
+      onLoadMore={getMore}
     >
       {viewportIds?.length ? (
         renderChats()
diff --git a/src/components/ui/InfiniteScroll.tsx b/src/components/ui/InfiniteScroll.tsx
index 817415d06..ce8385619 100644
--- a/src/components/ui/InfiniteScroll.tsx
+++ b/src/components/ui/InfiniteScroll.tsx
@@ -7,6 +7,7 @@ import React, {
 
 import { debounce } from '../../util/schedulers';
 import resetScroll from '../../util/resetScroll';
+import { IS_ANDROID } from '../../util/environment';
 
 type OwnProps = {
   ref?: RefObject<HTMLDivElement>;
@@ -18,6 +19,8 @@ type OwnProps = {
   itemSelector?: string;
   preloadBackwards?: number;
   sensitiveArea?: number;
+  withAbsolutePositioning?: boolean;
+  maxHeight?: number;
   noScrollRestore?: boolean;
   noScrollRestoreOnTop?: boolean;
   noFastList?: boolean;
@@ -39,6 +42,8 @@ const InfiniteScroll: FC<OwnProps> = ({
   itemSelector = DEFAULT_LIST_SELECTOR,
   preloadBackwards = DEFAULT_PRELOAD_BACKWARDS,
   sensitiveArea = DEFAULT_SENSITIVE_AREA,
+  withAbsolutePositioning,
+  maxHeight,
   // Used to turn off restoring scroll position (e.g. for frequently re-ordered chat or user lists)
   noScrollRestore = false,
   noScrollRestoreOnTop = false,
@@ -114,7 +119,7 @@ const InfiniteScroll: FC<OwnProps> = ({
       }
     }
 
-    if (noScrollRestore) {
+    if (withAbsolutePositioning || noScrollRestore) {
       return;
     }
 
@@ -125,7 +130,7 @@ const InfiniteScroll: FC<OwnProps> = ({
     resetScroll(container, newScrollTop);
 
     state.isScrollTopJustUpdated = true;
-  }, [items, itemSelector, noScrollRestore, noScrollRestoreOnTop, cacheBuster]);
+  }, [items, itemSelector, noScrollRestore, noScrollRestoreOnTop, cacheBuster, withAbsolutePositioning]);
 
   const handleScroll = useCallback((e: UIEvent<HTMLDivElement>) => {
     if (loadMoreForwards && loadMoreBackwards) {
@@ -214,10 +219,18 @@ const InfiniteScroll: FC<OwnProps> = ({
       ref={containerRef}
       className={className}
       onScroll={handleScroll}
-      teactFastList={!noFastList}
+      teactFastList={!noFastList && !withAbsolutePositioning}
       onKeyDown={onKeyDown}
     >
-      {children}
+      {withAbsolutePositioning && items?.length ? (
+        <div
+          teactFastList={!noFastList}
+          // @ts-ignore
+          style={`position: relative;${IS_ANDROID ? ` height: ${maxHeight}px;` : undefined}`}
+        >
+          {children}
+        </div>
+      ) : children}
     </div>
   );
 };