EPMRPP-77676 || Add animations for opening/closing modal windows (red…

…esigned modals only)
reportportal · Dec 27, 2022 · 607f599 · 607f599
1 parent eff644b
commit 607f599
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 53 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -40,6 +40,7 @@
     "downshift": "6.1.7",
     "fast-deep-equal": "2.0.1",
     "fetch-jsonp": "1.1.3",
+    "framer-motion": "6.5.1",
     "history": "4.7.2",
     "html-react-parser": "1.2.4",
     "intl": "1.2.5",

diff --git a/app/src/componentLibrary/modal/modalLayout/modalLayout.jsx b/app/src/componentLibrary/modal/modalLayout/modalLayout.jsx
@@ -17,7 +17,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Scrollbars } from 'react-custom-scrollbars';
-import { CSSTransition } from 'react-transition-group';
+import { motion, AnimatePresence } from 'framer-motion';
 import classNames from 'classnames/bind';
 import { useOnClickOutside } from 'common/hooks';
 import { ModalContent } from './modalContent';
@@ -67,38 +67,37 @@ export const ModalLayout = ({
   useOnClickOutside(modalRef, allowCloseOutside && closeModal);
 
   return (
-    <div
-      className={cx('modal-layout', { [`overlay-${overlay}`]: overlay })}
-      data-automation-id="modalWindow"
-    >
-      <div className={cx('scrolling-content')}>
-        <Scrollbars>
-          <CSSTransition
-            timeout={300}
-            in={isShown}
-            classNames={cx('modal-window-animation')}
-            onExited={onClose}
-          >
-            {(status) => (
-              <div
+    <AnimatePresence onExitComplete={onClose}>
+      {isShown && (
+        <div
+          className={cx('modal-layout', { [`overlay-${overlay}`]: overlay })}
+          data-automation-id="modalWindow"
+        >
+          <div className={cx('scrolling-content')}>
+            <Scrollbars>
+              <motion.div
                 className={cx('modal-window', { [`size-${modalSize}`]: modalSize }, className)}
                 ref={modalRef}
                 tabIndex="0"
+                initial={{ opacity: 0, marginTop: '-100px' }}
+                animate={{ opacity: 1, marginTop: '80px' }}
+                exit={{ opacity: 0, marginTop: '-100px' }}
+                transition={{ duration: 0.3 }}
               >
                 <ModalHeader title={title} headerNode={headerNode} onClose={closeModal} />
-                <ModalContent>{status !== 'exited' ? children : null}</ModalContent>
+                <ModalContent>{children}</ModalContent>
                 <ModalFooter
                   footerNode={footerNode}
                   okButton={okButton}
                   cancelButton={cancelButton}
                   closeHandler={closeModal}
                 />
-              </div>
-            )}
-          </CSSTransition>
-        </Scrollbars>
-      </div>
-    </div>
+              </motion.div>
+            </Scrollbars>
+          </div>
+        </div>
+      )}
+    </AnimatePresence>
   );
 };
 ModalLayout.propTypes = {

diff --git a/app/src/componentLibrary/modal/modalLayout/modalLayout.scss b/app/src/componentLibrary/modal/modalLayout/modalLayout.scss
@@ -48,34 +48,11 @@ $Z-INDEX-OVERLAY: 2;
   z-index: $Z-INDEX-OVERLAY;
 }
 
-:global {
-  .modal-window-animation-enter {
-    opacity: 0;
-    margin-top: -100px;
-  }
-
-  .modal-window-animation-enter-active {
-    opacity: 1;
-    margin-top: 80px;
-  }
-
-  .modal-window-animation-exit {
-    opacity: 1;
-    margin-top: 80px;
-  }
-
-  .modal-window-animation-exit-active {
-    opacity: 0;
-    margin-top: -100px;
-  }
-}
-
 .modal-window {
   position: absolute;
   left: 50%;
   transform: translate(-50%);
   display: inline-block;
-  margin-top: 80px;
   margin-bottom: 10px;
   padding: 32px 48px;
   box-sizing: border-box;
@@ -84,7 +61,6 @@ $Z-INDEX-OVERLAY: 2;
   border-radius: 16px;
   box-shadow: $BOX_SHADOW--modal-window;
   opacity: 1;
-  transition: margin-top 300ms ease-in, opacity 300ms ease-in;
   outline: none;
 }
 

diff --git a/app/webpack/base.config.js b/app/webpack/base.config.js
@@ -92,7 +92,7 @@ module.exports = {
     new webpack.ProvidePlugin({
       React: 'react',
       Utils: 'common/utils',
-      process: 'process/browser',
+      process: 'process/browser.js',
       Buffer: ['buffer', 'Buffer'],
     }),
     new ModuleFederationPlugin({