From ba63b8c2c6577ac0e8ade1885f9ebbb7410da4dc Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Wed, 8 Feb 2023 00:43:32 +0100 Subject: [PATCH] Fix `useHorizontalScroll` to accept ref and not element --- src/components/left/search/ChatResults.tsx | 4 ++-- src/components/left/search/RecentContacts.tsx | 2 +- src/components/middle/composer/CustomEmojiPicker.tsx | 9 +++++---- .../middle/composer/CustomEmojiTooltip.tsx | 2 +- src/components/middle/composer/EmojiPicker.tsx | 9 +++++---- src/components/middle/composer/EmojiTooltip.tsx | 2 +- src/components/middle/composer/StickerPicker.tsx | 9 +++++---- src/components/middle/message/ReactionSelector.tsx | 2 +- src/components/ui/TabList.tsx | 2 +- src/hooks/useHorizontalScroll.ts | 12 +++++++++--- 10 files changed, 31 insertions(+), 22 deletions(-) diff --git a/src/components/left/search/ChatResults.tsx b/src/components/left/search/ChatResults.tsx index 55082e756..79d43ae7d 100644 --- a/src/components/left/search/ChatResults.tsx +++ b/src/components/left/search/ChatResults.tsx @@ -70,8 +70,6 @@ const ChatResults: FC = ({ // eslint-disable-next-line no-null/no-null const chatSelectionRef = useRef(null); - useHorizontalScroll(chatSelectionRef.current, undefined, true); - const lang = useLang(); const { isMobile } = useAppLayout(); @@ -132,6 +130,8 @@ const ChatResults: FC = ({ ]; }, [searchQuery, currentUserId, localContactIds, lang, localChatIds, localUserIds, chatsById]); + useHorizontalScroll(chatSelectionRef, !localResults.length, true); + const globalResults = useMemo(() => { if (!searchQuery || searchQuery.length < MIN_QUERY_LENGTH_FOR_GLOBAL_SEARCH || !globalChatIds || !globalUserIds) { return MEMO_EMPTY_ARRAY; diff --git a/src/components/left/search/RecentContacts.tsx b/src/components/left/search/RecentContacts.tsx index b1954093d..643b9cdae 100644 --- a/src/components/left/search/RecentContacts.tsx +++ b/src/components/left/search/RecentContacts.tsx @@ -58,7 +58,7 @@ const RecentContacts: FC = ({ }); }, [loadTopUsers]); - useHorizontalScroll(topUsersRef.current, !topUserIds); + useHorizontalScroll(topUsersRef, !topUserIds); const handleClick = useCallback((id: string) => { openChat({ id, shouldReplaceHistory: true }); diff --git a/src/components/middle/composer/CustomEmojiPicker.tsx b/src/components/middle/composer/CustomEmojiPicker.tsx index 5f3705c0c..b22041aeb 100644 --- a/src/components/middle/composer/CustomEmojiPicker.tsx +++ b/src/components/middle/composer/CustomEmojiPicker.tsx @@ -171,7 +171,10 @@ const CustomEmojiPicker: FC = ({ && allSets.filter((set) => set.stickers?.length).length === 0 ), [allSets, areAddedLoaded]); - useHorizontalScroll(headerRef.current); + const canRenderContents = useAsyncRendering([], SLIDE_TRANSITION_DURATION); + const shouldRenderContents = areAddedLoaded && canRenderContents && !noPopulatedSets; + + useHorizontalScroll(headerRef, !shouldRenderContents); // Scroll container and header when active set changes useEffect(() => { @@ -199,8 +202,6 @@ const CustomEmojiPicker: FC = ({ onCustomEmojiSelect(emoji); }, [onCustomEmojiSelect]); - const canRenderContents = useAsyncRendering([], SLIDE_TRANSITION_DURATION); - function renderCover(stickerSet: StickerSetOrRecent, index: number) { const firstSticker = stickerSet.stickers?.[0]; const buttonClassName = buildClassName( @@ -263,7 +264,7 @@ const CustomEmojiPicker: FC = ({ const fullClassName = buildClassName('StickerPicker', 'CustomEmojiPicker', className); - if (!areAddedLoaded || !canRenderContents || noPopulatedSets) { + if (!shouldRenderContents) { return (
{noPopulatedSets ? ( diff --git a/src/components/middle/composer/CustomEmojiTooltip.tsx b/src/components/middle/composer/CustomEmojiTooltip.tsx index e01d3822e..1c4cbe6d5 100644 --- a/src/components/middle/composer/CustomEmojiTooltip.tsx +++ b/src/components/middle/composer/CustomEmojiTooltip.tsx @@ -53,7 +53,7 @@ const CustomEmojiTooltip: FC = ({ const prevStickers = usePrevious(customEmoji, true); const displayedStickers = customEmoji || prevStickers; - useHorizontalScroll(containerRef.current); + useHorizontalScroll(containerRef); const { observe: observeIntersection, diff --git a/src/components/middle/composer/EmojiPicker.tsx b/src/components/middle/composer/EmojiPicker.tsx index 72e0e9632..a6a20321f 100644 --- a/src/components/middle/composer/EmojiPicker.tsx +++ b/src/components/middle/composer/EmojiPicker.tsx @@ -105,7 +105,10 @@ const EmojiPicker: FC = ({ setActiveCategoryIndex(intersectingWithIndexes[Math.floor(intersectingWithIndexes.length / 2)].index); }); - useHorizontalScroll(headerRef.current, !isMobile); + const canRenderContents = useAsyncRendering([], MENU_TRANSITION_DURATION); + const shouldRenderContent = emojis && canRenderContents; + + useHorizontalScroll(headerRef, !(isMobile && shouldRenderContent)); // Scroll header when active set updates useEffect(() => { @@ -169,8 +172,6 @@ const EmojiPicker: FC = ({ onEmojiSelect(emoji, name); }, [onEmojiSelect]); - const canRenderContents = useAsyncRendering([], MENU_TRANSITION_DURATION); - function renderCategoryButton(category: EmojiCategoryData, index: number) { const icon = ICONS_BY_CATEGORY[category.id]; @@ -191,7 +192,7 @@ const EmojiPicker: FC = ({ const containerClassName = buildClassName('EmojiPicker', className); - if (!emojis || !canRenderContents) { + if (!shouldRenderContent) { return (
diff --git a/src/components/middle/composer/EmojiTooltip.tsx b/src/components/middle/composer/EmojiTooltip.tsx index 9606b93a8..8533867d9 100644 --- a/src/components/middle/composer/EmojiTooltip.tsx +++ b/src/components/middle/composer/EmojiTooltip.tsx @@ -81,7 +81,7 @@ const EmojiTooltip: FC = ({ emojis.length ? [...customEmojis, ...emojis] : undefined, CLOSE_DURATION, ) || []; - useHorizontalScroll(containerRef.current); + useHorizontalScroll(containerRef); const handleSelectEmoji = useCallback((emoji: Emoji) => { onEmojiSelect(emoji.native); diff --git a/src/components/middle/composer/StickerPicker.tsx b/src/components/middle/composer/StickerPicker.tsx index 70867f01f..4d24af089 100644 --- a/src/components/middle/composer/StickerPicker.tsx +++ b/src/components/middle/composer/StickerPicker.tsx @@ -214,7 +214,10 @@ const StickerPicker: FC = ({ sendMessageAction({ type: 'chooseSticker' }); }, [canSendStickers, loadAndPlay, loadRecentStickers, sendMessageAction]); - useHorizontalScroll(headerRef.current); + const canRenderContents = useAsyncRendering([], SLIDE_TRANSITION_DURATION); + const shouldRenderContents = areAddedLoaded && canRenderContents && !noPopulatedSets && canSendStickers; + + useHorizontalScroll(headerRef, !shouldRenderContents); // Scroll container and header when active set changes useEffect(() => { @@ -260,8 +263,6 @@ const StickerPicker: FC = ({ removeRecentSticker({ sticker }); }, [removeRecentSticker]); - const canRenderContents = useAsyncRendering([], SLIDE_TRANSITION_DURATION); - function renderCover(stickerSet: StickerSetOrRecent, index: number) { const firstSticker = stickerSet.stickers?.[0]; const buttonClassName = buildClassName( @@ -329,7 +330,7 @@ const StickerPicker: FC = ({ const fullClassName = buildClassName('StickerPicker', className); - if (!areAddedLoaded || !canRenderContents || noPopulatedSets || !canSendStickers) { + if (!shouldRenderContents) { return (
{!canSendStickers ? ( diff --git a/src/components/middle/message/ReactionSelector.tsx b/src/components/middle/message/ReactionSelector.tsx index f27b68615..4b62519fa 100644 --- a/src/components/middle/message/ReactionSelector.tsx +++ b/src/components/middle/message/ReactionSelector.tsx @@ -45,7 +45,7 @@ const ReactionSelector: FC = ({ // eslint-disable-next-line no-null/no-null const itemsScrollRef = useRef(null); const [isHorizontalScrollEnabled, enableHorizontalScroll] = useFlag(false); - useHorizontalScroll(itemsScrollRef.current, !isHorizontalScrollEnabled); + useHorizontalScroll(itemsScrollRef, !isHorizontalScrollEnabled); useLayoutEffect(() => { enableHorizontalScroll(); diff --git a/src/components/ui/TabList.tsx b/src/components/ui/TabList.tsx index 19d561024..f9c79061c 100644 --- a/src/components/ui/TabList.tsx +++ b/src/components/ui/TabList.tsx @@ -40,7 +40,7 @@ const TabList: FC = ({ const containerRef = useRef(null); const previousActiveTab = usePrevious(activeTab); - useHorizontalScroll(containerRef.current, undefined, true); + useHorizontalScroll(containerRef, undefined, true); // Scroll container to place active tab in the center useEffect(() => { diff --git a/src/hooks/useHorizontalScroll.ts b/src/hooks/useHorizontalScroll.ts index 142d8c42a..a34ca912f 100644 --- a/src/hooks/useHorizontalScroll.ts +++ b/src/hooks/useHorizontalScroll.ts @@ -1,11 +1,17 @@ import { useEffect } from '../lib/teact/teact'; -const useHorizontalScroll = (container: HTMLElement | null, isDisabled?: boolean, shouldPreventDefault = false) => { +const useHorizontalScroll = ( + containerRef: React.RefObject, + isDisabled?: boolean, + shouldPreventDefault = false, +) => { useEffect(() => { - if (!container || isDisabled) { + if (isDisabled) { return undefined; } + const container = containerRef.current!; + function handleScroll(e: WheelEvent) { // Ignore horizontal scroll and let it work natively (e.g. on touchpad) if (!e.deltaX) { @@ -19,7 +25,7 @@ const useHorizontalScroll = (container: HTMLElement | null, isDisabled?: boolean return () => { container.removeEventListener('wheel', handleScroll); }; - }, [container, isDisabled, shouldPreventDefault]); + }, [containerRef, isDisabled, shouldPreventDefault]); }; export default useHorizontalScroll;