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

31
src/util/cssAnimationEndListeners.ts
View File

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