Modal: Freeze children and header during close animation (#6667)

src/components/ui/Modal.tsx

@@ -1,4 +1,4 @@
-import type { ElementRef, FC, TeactNode } from '../../lib/teact/teact';
+import type { ElementRef, TeactNode } from '../../lib/teact/teact';
 import type React from '../../lib/teact/teact';
 import { beginHeavyAnimation, useEffect, useRef } from '../../lib/teact/teact';
 
@@ -10,6 +10,7 @@ import { disableDirectTextInput, enableDirectTextInput } from '../../util/direct
 import trapFocus from '../../util/trapFocus';
 
 import useContextMenuHandlers from '../../hooks/useContextMenuHandlers';
+import useFrozenProps from '../../hooks/useFrozenProps';
 import useHistoryBack from '../../hooks/useHistoryBack';
 import useLastCallback from '../../hooks/useLastCallback';
 import useLayoutEffectWithPrevDeps from '../../hooks/useLayoutEffectWithPrevDeps';
@@ -52,36 +53,20 @@ export type OwnProps = {
   withBalanceBar?: boolean;
   currencyInBalanceBar?: 'TON' | 'XTR';
   isCondensedHeader?: boolean;
+  noFreezeOnClose?: boolean;
 };
 
-const Modal: FC<OwnProps> = ({
+const Modal = (props: OwnProps) => {
-  dialogRef,
+  const {
-  title,
+    dialogRef,
-  className,
+    isOpen,
-  contentClassName,
+    noBackdropClose,
-  headerClassName,
+    onClose,
-  isOpen,
+    onCloseAnimationEnd,
-  isSlim,
+    onEnter,
-  header,
+    noFreezeOnClose,
-  hasCloseButton,
+  } = props;
-  hasAbsoluteCloseButton,
+
-  absoluteCloseButtonColor = 'translucent',
-  noBackdrop,
-  noBackdropClose,
-  children,
-  style,
-  dialogStyle,
-  isLowStackPriority,
-  dialogContent,
-  dialogClassName,
-  moreMenuItems,
-  onClose,
-  onCloseAnimationEnd,
-  onEnter,
-  withBalanceBar,
-  isCondensedHeader,
-  currencyInBalanceBar = 'XTR',
-}) => {
   const {
     ref: modalRef,
     shouldRender,
@@ -91,6 +76,30 @@ const Modal: FC<OwnProps> = ({
     withShouldRender: true,
   });
 
+  const shouldFreeze = !noFreezeOnClose && !isOpen;
+  const {
+    title,
+    isLowStackPriority,
+    header,
+    children,
+    className,
+    contentClassName,
+    headerClassName,
+    dialogClassName,
+    isSlim,
+    hasCloseButton,
+    hasAbsoluteCloseButton,
+    absoluteCloseButtonColor = 'translucent',
+    noBackdrop,
+    style,
+    dialogStyle,
+    dialogContent,
+    moreMenuItems,
+    withBalanceBar,
+    isCondensedHeader,
+    currencyInBalanceBar = 'XTR',
+  } = useFrozenProps(props, shouldFreeze);
+
   const localDialogRef = useRef<HTMLDivElement>();
   const moreButtonRef = useRef<HTMLButtonElement>();
   const menuRef = useRef<HTMLDivElement>();