diff --git a/src/components/App.tsx b/src/components/App.tsx index 54e5086cc..acfc77a67 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -42,8 +42,8 @@ type StateProps = { enum AppScreens { auth, - lock, main, + lock, inactive, } diff --git a/src/components/ui/Transition.tsx b/src/components/ui/Transition.tsx index 0197e1275..9a1da7875 100644 --- a/src/components/ui/Transition.tsx +++ b/src/components/ui/Transition.tsx @@ -175,11 +175,11 @@ function Transition({ activeKey, currentKeyRef, container, + childNodes[activeIndex], + childNodes[prevActiveIndex], shouldRestoreHeight, onStart, onStop, - childNodes[activeIndex] as HTMLElement, - childNodes[prevActiveIndex] as HTMLElement, ); return; @@ -347,27 +347,27 @@ function performSlideOptimized( activeKey: number, currentKeyRef: { current: number | undefined }, container: HTMLElement, + toSlide: ChildNode, + fromSlide?: ChildNode, shouldRestoreHeight?: boolean, onStart?: NoneToVoidFunction, onStop?: NoneToVoidFunction, - toSlide?: HTMLElement, - fromSlide?: HTMLElement, ) { - if (!fromSlide || !toSlide) { - return; - } - if (shouldDisableAnimation) { toggleExtraClass(container, `Transition-${name}`, !isBackwards); toggleExtraClass(container, `Transition-${name}Backwards`, isBackwards); - fromSlide.style.transition = 'none'; - fromSlide.style.transform = ''; - removeExtraClass(fromSlide, CLASSES.active); + if (fromSlide instanceof HTMLElement) { + fromSlide.style.transition = 'none'; + fromSlide.style.transform = ''; + removeExtraClass(fromSlide, CLASSES.active); + } - toSlide.style.transition = 'none'; - toSlide.style.transform = 'translate3d(0, 0, 0)'; - addExtraClass(toSlide, CLASSES.active); + if (toSlide instanceof HTMLElement) { + toSlide.style.transition = 'none'; + toSlide.style.transform = 'translate3d(0, 0, 0)'; + addExtraClass(toSlide, CLASSES.active); + } cleanup(); @@ -385,39 +385,50 @@ function performSlideOptimized( toggleExtraClass(container, `Transition-${name}`, !isBackwards); toggleExtraClass(container, `Transition-${name}Backwards`, isBackwards); - fromSlide.style.transition = 'none'; - fromSlide.style.transform = 'translate3d(0, 0, 0)'; + if (fromSlide instanceof HTMLElement) { + fromSlide.style.transition = 'none'; + fromSlide.style.transform = 'translate3d(0, 0, 0)'; + } - toSlide.style.transition = 'none'; - toSlide.style.transform = `translate3d(${isBackwards ? '-' : ''}100%, 0, 0)`; + if (toSlide instanceof HTMLElement) { + toSlide.style.transition = 'none'; + toSlide.style.transform = `translate3d(${isBackwards ? '-' : ''}100%, 0, 0)`; + } requestForcedReflow(() => { - forceReflow(toSlide); + if (toSlide instanceof HTMLElement) { + forceReflow(toSlide); + } return () => { - fromSlide.style.transition = ''; - fromSlide.style.transform = `translate3d(${isBackwards ? '' : '-'}100%, 0, 0)`; + if (fromSlide instanceof HTMLElement) { + fromSlide.style.transition = ''; + fromSlide.style.transform = `translate3d(${isBackwards ? '' : '-'}100%, 0, 0)`; + removeExtraClass(fromSlide, CLASSES.active); + } - toSlide.style.transition = ''; - toSlide.style.transform = 'translate3d(0, 0, 0)'; - - removeExtraClass(fromSlide, CLASSES.active); - addExtraClass(toSlide, CLASSES.active); + if (toSlide instanceof HTMLElement) { + toSlide.style.transition = ''; + toSlide.style.transform = 'translate3d(0, 0, 0)'; + addExtraClass(toSlide, CLASSES.active); + } }; }); - waitForTransitionEnd(fromSlide, () => { - const { clientHeight } = toSlide; + waitForTransitionEnd(toSlide, () => { + const clientHeight = toSlide instanceof HTMLElement ? toSlide.clientHeight : undefined; requestMutation(() => { if (activeKey !== currentKeyRef.current) { return; } - fromSlide.style.transition = 'none'; - fromSlide.style.transform = ''; + if (fromSlide instanceof HTMLElement) { + fromSlide.style.transition = 'none'; + fromSlide.style.transform = ''; + } - if (shouldRestoreHeight) { + if (shouldRestoreHeight && clientHeight && toSlide instanceof HTMLElement) { toSlide.style.height = 'auto'; container.style.height = `${clientHeight}px`; } diff --git a/src/lib/teact/teact-dom.ts b/src/lib/teact/teact-dom.ts index cee846d2b..75cc634ee 100644 --- a/src/lib/teact/teact-dom.ts +++ b/src/lib/teact/teact-dom.ts @@ -710,7 +710,7 @@ function updateClassName(element: HTMLElement, value: string) { export function addExtraClass(element: Element, className: string, forceSingle = false) { if (!forceSingle) { const classNames = className.split(' '); - if (className.length > 1) { + if (classNames.length > 1) { classNames.forEach((cn) => { addExtraClass(element, cn, true); }); @@ -732,7 +732,7 @@ export function addExtraClass(element: Element, className: string, forceSingle = export function removeExtraClass(element: Element, className: string, forceSingle = false) { if (!forceSingle) { const classNames = className.split(' '); - if (className.length > 1) { + if (classNames.length > 1) { classNames.forEach((cn) => { removeExtraClass(element, cn, true); }); @@ -756,7 +756,7 @@ export function removeExtraClass(element: Element, className: string, forceSingl export function toggleExtraClass(element: Element, className: string, force?: boolean, forceSingle = false) { if (!forceSingle) { const classNames = className.split(' '); - if (className.length > 1) { + if (classNames.length > 1) { classNames.forEach((cn) => { toggleExtraClass(element, cn, force, true); });