Animates ModalHost overlay

signalapp · Oct 14, 2021 · d0e8fbd · d0e8fbd
1 parent cfc5407
commit d0e8fbd
Show file tree

Hide file tree

Showing 9 changed files with 347 additions and 299 deletions.
diff --git a/package.json b/package.json
@@ -73,7 +73,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.9.2",
-    "@react-spring/web": "9.2.4",
+    "@react-spring/web": "9.2.6",
     "@signalapp/signal-client": "0.9.5",
     "@sindresorhus/is": "0.8.0",
     "abort-controller": "3.0.0",

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
@@ -8725,22 +8725,26 @@ button.module-image__border-overlay:focus {
 
 .module-modal-host__overlay {
   background: $color-black-alpha-40;
-  position: absolute;
-
   height: 100vh;
-  width: 100vw;
-
   left: 0;
+  position: absolute;
   top: 0;
-
+  width: 100vw;
   z-index: 2;
+}
 
+.module-modal-host__container {
   display: flex;
   flex-direction: column;
+  height: 100vh;
   justify-content: center;
-
+  left: 0;
   overflow: hidden;
   padding: 20px;
+  position: absolute;
+  top: 0;
+  width: 100vw;
+  z-index: 2;
 }
 
 // Module: GroupV2 Join Dialog

diff --git a/ts/components/ConfirmationDialog.tsx b/ts/components/ConfirmationDialog.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React, { MouseEvent, useCallback } from 'react';
+import { animated } from '@react-spring/web';
 import { Button, ButtonVariant } from './Button';
 import { LocalizerType } from '../types/Util';
 import { ModalHost } from './ModalHost';
@@ -63,17 +64,10 @@ export const ConfirmationDialog = React.memo(
     title,
     hasXButton,
   }: Props) => {
-    const { close, renderAnimation } = useAnimated(
-      {
-        from: { opacity: 0, transform: 'scale(0.25)' },
-        enter: { opacity: 1, transform: 'scale(1)' },
-        leave: { opacity: 0, onRest: () => onClose() },
-        config: {
-          duration: 150,
-        },
-      },
-      onClose
-    );
+    const { close, overlayStyles, modalStyles } = useAnimated(onClose, {
+      getFrom: () => ({ opacity: 0, transform: 'scale(0.25)' }),
+      getTo: isOpen => ({ opacity: isOpen ? 1 : 0, transform: 'scale(1)' }),
+    });
 
     const cancelAndClose = useCallback(() => {
       if (onCancel) {
@@ -94,8 +88,8 @@ export const ConfirmationDialog = React.memo(
     const hasActions = Boolean(actions.length);
 
     return (
-      <ModalHost onClose={close} theme={theme}>
-        {renderAnimation(
+      <ModalHost onClose={close} theme={theme} overlayStyles={overlayStyles}>
+        <animated.div style={modalStyles}>
           <ModalWindow
             hasXButton={hasXButton}
             i18n={i18n}
@@ -129,7 +123,7 @@ export const ConfirmationDialog = React.memo(
               ))}
             </Modal.ButtonFooter>
           </ModalWindow>
-        )}
+        </animated.div>
       </ModalHost>
     );
   }