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

Folder List, Message: Fix conflicts with swipe-to-back gesture on iOS

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-08-20 23:46:54 +03:00
parent 88cd5e32d1
commit f039f69331
2 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/left/main/ChatFolders.tsx
View File

@ -39,6 +39,7 @@ type StateProps = {
activeChatFolder: number; activeChatFolder: number;
currentUserId?: number; currentUserId?: number;
lastSyncTime?: number; lastSyncTime?: number;
shouldSkipHistoryAnimations?: boolean;
}; };
type DispatchProps = Pick<GlobalActions, 'loadChatFolders' | 'setActiveChatFolder' | 'openChat'>; type DispatchProps = Pick<GlobalActions, 'loadChatFolders' | 'setActiveChatFolder' | 'openChat'>;
@ -56,6 +57,7 @@ const ChatFolders: FC<OwnProps & StateProps & DispatchProps> = ({
activeChatFolder, activeChatFolder,
currentUserId, currentUserId,
lastSyncTime, lastSyncTime,
shouldSkipHistoryAnimations,
foldersDispatch, foldersDispatch,
onScreenSelect, onScreenSelect,
loadChatFolders, loadChatFolders,
@ -220,7 +222,7 @@ const ChatFolders: FC<OwnProps & StateProps & DispatchProps> = ({
) : undefined} ) : undefined}
<Transition <Transition
ref={transitionRef} ref={transitionRef}
name={lang.isRtl ? 'slide-reversed' : 'slide'} name={shouldSkipHistoryAnimations ? 'none' : lang.isRtl ? 'slide-reversed' : 'slide'}
activeKey={activeChatFolder} activeKey={activeChatFolder}
renderCount={folderTabs ? folderTabs.length : undefined} renderCount={folderTabs ? folderTabs.length : undefined}
> >
@ -242,6 +244,7 @@ export default memo(withGlobal<OwnProps>(
}, },
currentUserId, currentUserId,
lastSyncTime, lastSyncTime,
shouldSkipHistoryAnimations,
} = global; } = global;
return { return {
@ -254,6 +257,7 @@ export default memo(withGlobal<OwnProps>(
notifyExceptions: selectNotifyExceptions(global), notifyExceptions: selectNotifyExceptions(global),
activeChatFolder, activeChatFolder,
currentUserId, currentUserId,
shouldSkipHistoryAnimations,
}; };
}, },
(setGlobal, actions): DispatchProps => pick(actions, [ (setGlobal, actions): DispatchProps => pick(actions, [

20
src/util/captureEvents.ts
View File

@ -1,3 +1,5 @@
import { IS_IOS } from './environment';
export enum SwipeDirection { export enum SwipeDirection {
Up, Up,
Down, Down,
@ -29,8 +31,12 @@ export interface RealTouchEvent extends TouchEvent {
pageY?: number; pageY?: number;
} }
type TSwipeAxis = 'x' | 'y' | undefined; type TSwipeAxis =
'x'
| 'y'
| undefined;
const IOS_SCREEN_EDGE_THRESHOLD = 20;
const MOVED_THRESHOLD = 15; const MOVED_THRESHOLD = 15;
const SWIPE_THRESHOLD = 50; const SWIPE_THRESHOLD = 50;
@ -136,7 +142,15 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) {
} }
} }
function onSwipe(e: Event, dragOffsetX: number, dragOffsetY: number) { function onSwipe(e: MouseEvent | RealTouchEvent, dragOffsetX: number, dragOffsetY: number) {
// Avoid conflicts with swipe-to-back gestures
if (IS_IOS) {
const x = (e as RealTouchEvent).touches[0].pageX;
if (x <= IOS_SCREEN_EDGE_THRESHOLD || x >= window.innerWidth - IOS_SCREEN_EDGE_THRESHOLD) {
return;
}
}
if (!currentSwipeAxis) { if (!currentSwipeAxis) {
const xAbs = Math.abs(dragOffsetX); const xAbs = Math.abs(dragOffsetX);
const yAbs = Math.abs(dragOffsetY); const yAbs = Math.abs(dragOffsetY);
@ -170,7 +184,7 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) {
function processSwipe( function processSwipe(
e: Event, e: Event,
currentSwipeAxis:TSwipeAxis, currentSwipeAxis: TSwipeAxis,
dragOffsetX: number, dragOffsetX: number,
dragOffsetY: number, dragOffsetY: number,
onSwipe: (e: Event, direction: SwipeDirection) => void, onSwipe: (e: Event, direction: SwipeDirection) => void,