From e86c126a893216b1a32a6176069c24505324ae0a Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Fri, 10 Dec 2021 18:33:37 +0100 Subject: [PATCH] TeactN: Support forcing during heavy animation --- src/components/left/main/ChatFolders.tsx | 10 +++++----- src/components/middle/MiddleColumn.tsx | 2 +- src/components/right/RightColumn.tsx | 4 ++-- src/global/types.ts | 8 +++++++- src/lib/teact/teactn.tsx | 25 ++++++++++++------------ src/modules/actions/ui/initial.ts | 2 +- 6 files changed, 29 insertions(+), 22 deletions(-) diff --git a/src/components/left/main/ChatFolders.tsx b/src/components/left/main/ChatFolders.tsx index 51f8f98c..91dca704 100644 --- a/src/components/left/main/ChatFolders.tsx +++ b/src/components/left/main/ChatFolders.tsx @@ -118,7 +118,7 @@ const ChatFolders: FC = ({ }, [displayedFolders, folderCountersById, lang]); const handleSwitchTab = useCallback((index: number) => { - setActiveChatFolder(index); + setActiveChatFolder(index, { forceOnHeavyAnimation: true }); }, [setActiveChatFolder]); // Prevent `activeTab` pointing at non-existing folder after update @@ -141,10 +141,10 @@ const ChatFolders: FC = ({ selectorToPreventScroll: '.chat-list', onSwipe: ((e, direction) => { if (direction === SwipeDirection.Left) { - setActiveChatFolder(Math.min(activeChatFolder + 1, folderTabs.length - 1)); + setActiveChatFolder(Math.min(activeChatFolder + 1, folderTabs.length - 1), { forceOnHeavyAnimation: true }); return true; } else if (direction === SwipeDirection.Right) { - setActiveChatFolder(Math.max(0, activeChatFolder - 1)); + setActiveChatFolder(Math.max(0, activeChatFolder - 1), { forceOnHeavyAnimation: true }); return true; } @@ -161,7 +161,7 @@ const ChatFolders: FC = ({ } }) : undefined), [activeChatFolder, setActiveChatFolder]); - useHistoryBack(activeChatFolder !== 0, () => setActiveChatFolder(0)); + useHistoryBack(activeChatFolder !== 0, () => setActiveChatFolder(0, { forceOnHeavyAnimation: true })); useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { @@ -177,7 +177,7 @@ const ChatFolders: FC = ({ const folder = Number(digit) - 1; if (folder > folderTabs.length - 1) return; - setActiveChatFolder(folder); + setActiveChatFolder(folder, { forceOnHeavyAnimation: true }); e.preventDefault(); } }; diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx index 8241172b..67861a6e 100644 --- a/src/components/middle/MiddleColumn.tsx +++ b/src/components/middle/MiddleColumn.tsx @@ -337,7 +337,7 @@ const MiddleColumn: FC = ({ ); const closeChat = () => { - openChat({ id: undefined }, true); + openChat({ id: undefined }, { forceSyncOnIOs: true }); }; useHistoryBack( diff --git a/src/components/right/RightColumn.tsx b/src/components/right/RightColumn.tsx index 70c30b8a..2b930247 100644 --- a/src/components/right/RightColumn.tsx +++ b/src/components/right/RightColumn.tsx @@ -107,14 +107,14 @@ const RightColumn: FC = ({ setProfileState(ProfileState.Profile); break; } - toggleChatInfo(undefined, true); + toggleChatInfo(undefined, { forceSyncOnIOs: true }); break; case RightColumnContent.UserInfo: if (isScrolledDown && shouldScrollUp) { setProfileState(ProfileState.Profile); break; } - openUserInfo({ id: undefined }, true); + openUserInfo({ id: undefined }, { forceSyncOnIOs: true }); break; case RightColumnContent.Management: { switch (managementScreen) { diff --git a/src/global/types.ts b/src/global/types.ts index 6e66667f..940511b8 100644 --- a/src/global/types.ts +++ b/src/global/types.ts @@ -569,4 +569,10 @@ export type ActionTypes = ( 'openCallFallbackConfirm' | 'closeCallFallbackConfirm' | 'inviteToCallFallback' ); -export type GlobalActions = Record void>; +export interface DispatchOptions { + forceOnHeavyAnimation?: boolean; + // Workaround for iOS gesture history navigation + forceSyncOnIOs?: boolean; +} + +export type GlobalActions = Record void>; diff --git a/src/lib/teact/teactn.tsx b/src/lib/teact/teactn.tsx index 47879bf4..2b1069e8 100644 --- a/src/lib/teact/teactn.tsx +++ b/src/lib/teact/teactn.tsx @@ -8,7 +8,9 @@ import generateIdFor from '../../util/generateIdFor'; import { throttleWithRaf } from '../../util/schedulers'; import arePropsShallowEqual, { getUnequalProps } from '../../util/arePropsShallowEqual'; import { orderBy } from '../../util/iteratees'; -import { GlobalState, GlobalActions, ActionTypes } from '../../global/types'; +import { + GlobalState, GlobalActions, ActionTypes, DispatchOptions, +} from '../../global/types'; import { handleError } from '../../util/handleError'; import { isHeavyAnimating } from '../../hooks/useHeavyAnimationCheck'; @@ -43,8 +45,8 @@ const containers = new Map cb(currentGlobal)); } -// `noThrottle = true` is used as a workaround for iOS gesture history navigation -export function setGlobal(newGlobal?: GlobalState, noThrottle = false) { +export function setGlobal(newGlobal?: GlobalState, options?: DispatchOptions) { if (typeof newGlobal === 'object' && newGlobal !== currentGlobal) { currentGlobal = newGlobal; - if (!noThrottle) { - runCallbacksThrottled(); + if (options?.forceSyncOnIOs) { + runCallbacks(true); } else { - runCallbacks(); + runCallbacksThrottled(options?.forceOnHeavyAnimation); } } } @@ -72,12 +73,12 @@ export function getDispatch() { return actions; } -function onDispatch(name: string, payload?: ActionPayload, noThrottle?: boolean) { +function onDispatch(name: string, payload?: ActionPayload, options?: DispatchOptions) { if (reducers[name]) { reducers[name].forEach((reducer) => { const newGlobal = reducer(currentGlobal, actions, payload); if (newGlobal) { - setGlobal(newGlobal, noThrottle); + setGlobal(newGlobal, options); } }); } @@ -151,8 +152,8 @@ export function addReducer(name: ActionTypes, reducer: Reducer) { if (!reducers[name]) { reducers[name] = []; - actions[name] = (payload?: ActionPayload, noThrottle = false) => { - onDispatch(name, payload, noThrottle); + actions[name] = (payload?: ActionPayload, options?: DispatchOptions) => { + onDispatch(name, payload, options); }; } diff --git a/src/modules/actions/ui/initial.ts b/src/modules/actions/ui/initial.ts index 672ebcce..f8296283 100644 --- a/src/modules/actions/ui/initial.ts +++ b/src/modules/actions/ui/initial.ts @@ -88,7 +88,7 @@ addReducer('disableHistoryAnimations', () => { setGlobal({ ...getGlobal(), shouldSkipHistoryAnimations: true, - }, true); + }, { forceSyncOnIOs: true }); }); function subscribeToSystemThemeChange() {