ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support vertical scrolling in horizontal lists (#1161)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-06-15 13:21:30 +03:00
parent 66d7cfe71b
commit e0017543c1
5 changed files with 6 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/left/search/RecentContacts.tsx
View File

@ -56,7 +56,7 @@ const RecentContacts: FC<OwnProps & StateProps & DispatchProps> = ({
}); });
}, [loadTopUsers, loadContactList]); }, [loadTopUsers, loadContactList]);
useHorizontalScroll(topUsersRef, !topUserIds); useHorizontalScroll(topUsersRef.current, !topUserIds);
const handleClick = useCallback( const handleClick = useCallback(
(id: number) => { (id: number) => {

2
src/components/middle/composer/EmojiPicker.tsx
View File

@ -99,7 +99,7 @@ const EmojiPicker: FC<OwnProps & StateProps> = ({
setActiveCategoryIndex(intersectingWithIndexes[Math.floor(intersectingWithIndexes.length / 2)].index); 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 // Scroll header when active set updates
useEffect(() => { useEffect(() => {

2
src/components/middle/composer/StickerPicker.tsx
View File

@ -147,7 +147,7 @@ const StickerPicker: FC<OwnProps & StateProps & DispatchProps> = ({
} }
}, [addedSetIds, loadAddedStickers]); }, [addedSetIds, loadAddedStickers]);
useHorizontalScroll(headerRef); useHorizontalScroll(headerRef.current);
// Scroll container and header when active set changes // Scroll container and header when active set changes
useEffect(() => { useEffect(() => {

2
src/components/ui/TabList.tsx
View File

@ -33,7 +33,7 @@ const TabList: FC<OwnProps> = ({
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const previousActiveTab = usePrevious(activeTab); const previousActiveTab = usePrevious(activeTab);
useHorizontalScroll(containerRef); useHorizontalScroll(containerRef.current);
// Scroll container to place active tab in the center // Scroll container to place active tab in the center
useEffect(() => { useEffect(() => {

6
src/hooks/useHorizontalScroll.ts
View File

@ -1,9 +1,7 @@
import { RefObject } from 'react';
import { useEffect } from '../lib/teact/teact'; import { useEffect } from '../lib/teact/teact';
export default (containerRef: RefObject<HTMLElement>, isDisabled?: boolean) => { export default (container: HTMLElement | null, isDisabled?: boolean) => {
useEffect(() => { useEffect(() => {
const container = containerRef.current;
if (!container) { if (!container) {
return undefined; return undefined;
} }
@ -20,5 +18,5 @@ export default (containerRef: RefObject<HTMLElement>, isDisabled?: boolean) => {
return () => { return () => {
container.removeEventListener('wheel', handleScroll); container.removeEventListener('wheel', handleScroll);
}; };
}, [containerRef, isDisabled]); }, [container, isDisabled]);
}; };