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

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

View File

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

View File

@ -1,3 +1,5 @@
import { IS_IOS } from './environment';
export enum SwipeDirection {
Up,
Down,
@ -29,8 +31,12 @@ export interface RealTouchEvent extends TouchEvent {
pageY?: number;
}
type TSwipeAxis = 'x' | 'y' | undefined;
type TSwipeAxis =
'x'
| 'y'
| undefined;
const IOS_SCREEN_EDGE_THRESHOLD = 20;
const MOVED_THRESHOLD = 15;
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) {
const xAbs = Math.abs(dragOffsetX);
const yAbs = Math.abs(dragOffsetY);
@ -170,7 +184,7 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) {
function processSwipe(
e: Event,
currentSwipeAxis:TSwipeAxis,
currentSwipeAxis: TSwipeAxis,
dragOffsetX: number,
dragOffsetY: number,
onSwipe: (e: Event, direction: SwipeDirection) => void,