diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx index f87c3e405e..fc441b0174 100644 --- a/src/components/middle/MessageList.tsx +++ b/src/components/middle/MessageList.tsx @@ -180,7 +180,7 @@ const MessageList: FC<OwnProps & StateProps> = ({ }) => { const { loadViewportMessages, setScrollOffset, loadSponsoredMessages, loadMessageReactions, copyMessagesByIds, - loadMessageViews, loadPeerStoriesByIds, + loadMessageViews, loadPeerStoriesByIds, openChat, } = getActions(); // eslint-disable-next-line no-null/no-null @@ -221,6 +221,29 @@ const MessageList: FC<OwnProps & StateProps> = ({ memoFirstUnreadIdRef.current = firstUnreadId; }, [firstUnreadId]); + useEffect(() => { + const minDeltaX = 50; // Минимальное расстояние прокрутки для активации свайпа + + const handleScroll = (e: WheelEvent) => { + // Проверяем, находится ли элемент, на котором произошло событие, внутри контейнера + if (containerRef.current && containerRef.current.contains(e.target as Node)) { + // Проверяем, был ли совершен горизонтальный свайп + if (Math.abs(e.deltaX) > minDeltaX) { + // Вызываем функцию для обработки свайпа + openChat({ id: undefined }); + } + } + }; + + // Добавляем обработчик событий к window + window.addEventListener('wheel', handleScroll, { passive: true }); + + // Удаляем обработчик событий при размонтировании компонента + return () => { + window.removeEventListener('wheel', handleScroll); + }; + }, [containerRef]); + useEffect(() => { if (!isCurrentUserPremium && isChannelChat && isReady) { loadSponsoredMessages({ chatId }); diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx index 3ad2fb3b01..cb3878000c 100644 --- a/src/components/middle/MiddleColumn.tsx +++ b/src/components/middle/MiddleColumn.tsx @@ -1,5 +1,6 @@ import React, { memo, useEffect, useMemo, + /* useRef, */ useState, } from '../../lib/teact/teact'; import { getActions, withGlobal } from '../../global'; @@ -69,7 +70,6 @@ import useForceUpdate from '../../hooks/useForceUpdate'; import useHistoryBack from '../../hooks/useHistoryBack'; import useLang from '../../hooks/useLang'; import useLastCallback from '../../hooks/useLastCallback'; -/* import useMultitouchBackSwipe from '../../hooks/useMultitouchBackSwipe'; */ import usePrevDuringAnimation from '../../hooks/usePrevDuringAnimation'; import usePrevious from '../../hooks/usePrevious'; import { useResize } from '../../hooks/useResize'; @@ -291,11 +291,6 @@ function MiddleColumn({ : undefined; }, [chatId, openChat]); - /* useMultitouchBackSwipe(() => { - // Действие, выполняемое при свайпе слева направо - openChat({ id: undefined }); - }); */ - useSyncEffect(() => { setDropAreaState(DropAreaState.None); setIsNotchShown(undefined); diff --git a/src/hooks/useMultitouchBackSwipe.ts b/src/hooks/useMultitouchBackSwipe.ts deleted file mode 100644 index 49e9c3c152..0000000000 --- a/src/hooks/useMultitouchBackSwipe.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { useEffect, useState } from 'react'; - -const useMultitouchBackSwipe = (onSwipeBack: () => void, threshold = 100) => { - const [lastScrollLeft, setLastScrollLeft] = useState(0); - const [isSwiping, setIsSwiping] = useState(false); - - useEffect(() => { - const handleScroll = (event: { target: any }) => { - const target = event.target; - const currentScrollLeft = target.scrollLeft; - - if (currentScrollLeft > lastScrollLeft && currentScrollLeft > threshold) { - if (!isSwiping) { - setIsSwiping(true); - onSwipeBack(); - } - } else { - setIsSwiping(false); - } - - setLastScrollLeft(currentScrollLeft); - }; - - window.addEventListener('scroll', handleScroll, true); - - return () => { - window.removeEventListener('scroll', handleScroll, true); - }; - }, [onSwipeBack, threshold, lastScrollLeft, isSwiping]); - - return isSwiping; -}; - -export default useMultitouchBackSwipe; diff --git a/src/hooks/useMultitouchBackSwipe2.ts b/src/hooks/useMultitouchBackSwipe2.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/hooks/useMultitouchBackSwipe3.ts b/src/hooks/useMultitouchBackSwipe3.ts deleted file mode 100644 index 7b55e96d1a..0000000000 --- a/src/hooks/useMultitouchBackSwipe3.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { useEffect } from 'react'; - -const useMultitouchBackSwipe3 = (onSwipeBack: () => void) => { - useEffect(() => { - const handleScroll = (e: WheelEvent) => { - if (e.deltaX) { - onSwipeBack(); - } - }; - - window.addEventListener('wheel', handleScroll, { passive: true }); - - return () => { - window.removeEventListener('wheel', handleScroll); - }; - }, [onSwipeBack]); -}; - -export default useMultitouchBackSwipe3;