From bf29c5cd2abcfa73488c8d4c185536ea8d81b390 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <147140426+ulugmer@users.noreply.github.com>
Date: Thu, 16 Nov 2023 23:27:51 +0800
Subject: [PATCH 1/2] swipe to go back
---
src/components/middle/MessageList.tsx | 25 ++++++++++++++++++-
src/components/middle/MiddleColumn.tsx | 16 +++++++-----
src/hooks/useMultitouchBackSwipe.ts | 34 --------------------------
src/hooks/useMultitouchBackSwipe2.ts | 0
src/hooks/useMultitouchBackSwipe3.ts | 19 --------------
5 files changed, 34 insertions(+), 60 deletions(-)
delete mode 100644 src/hooks/useMultitouchBackSwipe.ts
delete mode 100644 src/hooks/useMultitouchBackSwipe2.ts
delete mode 100644 src/hooks/useMultitouchBackSwipe3.ts
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..f9c7242bf0 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,7 @@ 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 useMultitouchBackSwipe2 from '../../hooks/useMultitouchBackSwipe2'; */
import usePrevDuringAnimation from '../../hooks/usePrevDuringAnimation';
import usePrevious from '../../hooks/usePrevious';
import { useResize } from '../../hooks/useResize';
@@ -269,6 +270,13 @@ function MiddleColumn({
closeAnimationDuration,
);
+ /* // eslint-disable-next-line no-null/no-null
+ const middleColumnRef = useRef<HTMLDivElement>(null);
+
+ useMultitouchBackSwipe2(middleColumnRef, () => {
+ openChat({ id: undefined });
+ }); */
+
const prevTransitionKey = usePrevious(currentTransitionKey);
const cleanupExceptionKey = (
@@ -291,11 +299,6 @@ function MiddleColumn({
: undefined;
}, [chatId, openChat]);
- /* useMultitouchBackSwipe(() => {
- // Действие, выполняемое при свайпе слева направо
- openChat({ id: undefined });
- }); */
-
useSyncEffect(() => {
setDropAreaState(DropAreaState.None);
setIsNotchShown(undefined);
@@ -482,6 +485,7 @@ function MiddleColumn({
return (
<div
id="MiddleColumn"
+ /* ref={middleColumnRef} */
className={className}
onTransitionEnd={handleCssTransitionEnd}
style={buildStyle(
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;
From 13db48a683afce89fd1fac6070ddb03a13401d9f Mon Sep 17 00:00:00 2001
From: "serafim.eth" <147140426+ulugmer@users.noreply.github.com>
Date: Thu, 16 Nov 2023 23:30:12 +0800
Subject: [PATCH 2/2] clean up
---
src/components/middle/MiddleColumn.tsx | 9 ---------
1 file changed, 9 deletions(-)
diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx
index f9c7242bf0..cb3878000c 100644
--- a/src/components/middle/MiddleColumn.tsx
+++ b/src/components/middle/MiddleColumn.tsx
@@ -70,7 +70,6 @@ import useForceUpdate from '../../hooks/useForceUpdate';
import useHistoryBack from '../../hooks/useHistoryBack';
import useLang from '../../hooks/useLang';
import useLastCallback from '../../hooks/useLastCallback';
-/* import useMultitouchBackSwipe2 from '../../hooks/useMultitouchBackSwipe2'; */
import usePrevDuringAnimation from '../../hooks/usePrevDuringAnimation';
import usePrevious from '../../hooks/usePrevious';
import { useResize } from '../../hooks/useResize';
@@ -270,13 +269,6 @@ function MiddleColumn({
closeAnimationDuration,
);
- /* // eslint-disable-next-line no-null/no-null
- const middleColumnRef = useRef<HTMLDivElement>(null);
-
- useMultitouchBackSwipe2(middleColumnRef, () => {
- openChat({ id: undefined });
- }); */
-
const prevTransitionKey = usePrevious(currentTransitionKey);
const cleanupExceptionKey = (
@@ -485,7 +477,6 @@ function MiddleColumn({
return (
<div
id="MiddleColumn"
- /* ref={middleColumnRef} */
className={className}
onTransitionEnd={handleCssTransitionEnd}
style={buildStyle(