Support vertical scrolling in horizontal lists (#1161)

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) => {

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(() => {

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(() => {

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(() => {

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]);
 };