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

Multitabs: Fix sign out (#2610)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-02-17 02:32:00 +01:00
parent 511668b72a
commit c3a565c0fa
2 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ui/Transition.tsx
View File

@ -38,6 +38,7 @@ export type TransitionProps = {
const classNames = { const classNames = {
active: 'Transition__slide--active', active: 'Transition__slide--active',
}; };
const FALLBACK_ANIMATION_END = 1000;
const Transition: FC<TransitionProps> = ({ const Transition: FC<TransitionProps> = ({
ref, ref,
@ -211,7 +212,7 @@ const Transition: FC<TransitionProps> = ({
: childNodes[activeIndex]; : childNodes[activeIndex];
if (watchedNode) { if (watchedNode) {
waitForAnimationEnd(watchedNode, onAnimationEnd); waitForAnimationEnd(watchedNode, onAnimationEnd, undefined, FALLBACK_ANIMATION_END);
} else { } else {
onAnimationEnd(); onAnimationEnd();
} }

31
src/util/cssAnimationEndListeners.ts
View File

@ -1,12 +1,16 @@
// Sometimes event is fired earlier than animation completes // Sometimes event is fired earlier than animation completes
const ANIMATION_END_DELAY = 50; const ANIMATION_END_DELAY = 50;
export function waitForTransitionEnd(node: Node, handler: NoneToVoidFunction, propertyName?: string) { export function waitForTransitionEnd(
waitForEndEvent('transitionend', node, handler, propertyName); node: Node, handler: NoneToVoidFunction, propertyName?: string, fallbackMs?: number,
) {
waitForEndEvent('transitionend', node, handler, propertyName, fallbackMs);
} }
export function waitForAnimationEnd(node: Node, handler: NoneToVoidFunction, animationName?: string) { export function waitForAnimationEnd(
waitForEndEvent('animationend', node, handler, animationName); node: Node, handler: NoneToVoidFunction, animationName?: string, fallbackMs?: number,
) {
waitForEndEvent('animationend', node, handler, animationName, fallbackMs);
} }
function waitForEndEvent( function waitForEndEvent(
@ -14,10 +18,11 @@ function waitForEndEvent(
node: Node, node: Node,
handler: NoneToVoidFunction, handler: NoneToVoidFunction,
detailedName?: string, detailedName?: string,
fallbackMs?: number,
) { ) {
let isHandled = false; let isHandled = false;
node.addEventListener(eventType, function handleAnimationEnd(e: TransitionEvent | AnimationEvent) { function handleAnimationEnd(e: TransitionEvent | AnimationEvent | Event) {
if (isHandled || e.target !== e.currentTarget) { if (isHandled || e.target !== e.currentTarget) {
return; return;
} }
@ -31,10 +36,22 @@ function waitForEndEvent(
isHandled = true; isHandled = true;
node.removeEventListener(eventType, handleAnimationEnd as EventListener); node.removeEventListener(eventType, handleAnimationEnd);
setTimeout(() => { setTimeout(() => {
handler(); handler();
}, ANIMATION_END_DELAY); }, ANIMATION_END_DELAY);
} as EventListener); }
node.addEventListener(eventType, handleAnimationEnd);
if (fallbackMs) {
setTimeout(() => {
if (isHandled) return;
node.removeEventListener(eventType, handleAnimationEnd);
handler();
}, fallbackMs);
}
} }