From e0017543c1771beb9096b641357dfd9076a22f42 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 15 Jun 2021 13:21:30 +0300
Subject: [PATCH] Support vertical scrolling in horizontal lists (#1161)

---
 src/components/left/search/RecentContacts.tsx    | 2 +-
 src/components/middle/composer/EmojiPicker.tsx   | 2 +-
 src/components/middle/composer/StickerPicker.tsx | 2 +-
 src/components/ui/TabList.tsx                    | 2 +-
 src/hooks/useHorizontalScroll.ts                 | 6 ++----
 5 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/left/search/RecentContacts.tsx b/src/components/left/search/RecentContacts.tsx
index 9202bc6b3..bef24f393 100644
--- a/src/components/left/search/RecentContacts.tsx
+++ b/src/components/left/search/RecentContacts.tsx
@@ -56,7 +56,7 @@ const RecentContacts: FC<OwnProps & StateProps & DispatchProps> = ({
     });
   }, [loadTopUsers, loadContactList]);
 
-  useHorizontalScroll(topUsersRef, !topUserIds);
+  useHorizontalScroll(topUsersRef.current, !topUserIds);
 
   const handleClick = useCallback(
     (id: number) => {
diff --git a/src/components/middle/composer/EmojiPicker.tsx b/src/components/middle/composer/EmojiPicker.tsx
index 3c1a44b8e..ac4b03c84 100644
--- a/src/components/middle/composer/EmojiPicker.tsx
+++ b/src/components/middle/composer/EmojiPicker.tsx
@@ -99,7 +99,7 @@ const EmojiPicker: FC<OwnProps & StateProps> = ({
     setActiveCategoryIndex(intersectingWithIndexes[Math.floor(intersectingWithIndexes.length / 2)].index);
   });
 
-  useHorizontalScroll(headerRef, !IS_MOBILE_SCREEN);
+  useHorizontalScroll(headerRef.current, !IS_MOBILE_SCREEN);
 
   // Scroll header when active set updates
   useEffect(() => {
diff --git a/src/components/middle/composer/StickerPicker.tsx b/src/components/middle/composer/StickerPicker.tsx
index 8cc784e93..1a22f31d0 100644
--- a/src/components/middle/composer/StickerPicker.tsx
+++ b/src/components/middle/composer/StickerPicker.tsx
@@ -147,7 +147,7 @@ const StickerPicker: FC<OwnProps & StateProps & DispatchProps> = ({
     }
   }, [addedSetIds, loadAddedStickers]);
 
-  useHorizontalScroll(headerRef);
+  useHorizontalScroll(headerRef.current);
 
   // Scroll container and header when active set changes
   useEffect(() => {
diff --git a/src/components/ui/TabList.tsx b/src/components/ui/TabList.tsx
index 023ee218e..acb5f6872 100644
--- a/src/components/ui/TabList.tsx
+++ b/src/components/ui/TabList.tsx
@@ -33,7 +33,7 @@ const TabList: FC<OwnProps> = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const previousActiveTab = usePrevious(activeTab);
 
-  useHorizontalScroll(containerRef);
+  useHorizontalScroll(containerRef.current);
 
   // Scroll container to place active tab in the center
   useEffect(() => {
diff --git a/src/hooks/useHorizontalScroll.ts b/src/hooks/useHorizontalScroll.ts
index 25bde35ac..ef8333c0b 100644
--- a/src/hooks/useHorizontalScroll.ts
+++ b/src/hooks/useHorizontalScroll.ts
@@ -1,9 +1,7 @@
-import { RefObject } from 'react';
 import { useEffect } from '../lib/teact/teact';
 
-export default (containerRef: RefObject<HTMLElement>, isDisabled?: boolean) => {
+export default (container: HTMLElement | null, isDisabled?: boolean) => {
   useEffect(() => {
-    const container = containerRef.current;
     if (!container) {
       return undefined;
     }
@@ -20,5 +18,5 @@ export default (containerRef: RefObject<HTMLElement>, isDisabled?: boolean) => {
     return () => {
       container.removeEventListener('wheel', handleScroll);
     };
-  }, [containerRef, isDisabled]);
+  }, [container, isDisabled]);
 };