From 607f5995789439ca3e039da6af67767bf5842930 Mon Sep 17 00:00:00 2001 From: Vadzim Hvazdovich Date: Tue, 27 Dec 2022 11:48:33 +0400 Subject: [PATCH 1/2] EPMRPP-77676 || Add animations for opening/closing modal windows (redesigned modals only) --- app/package-lock.json | 132 +++++++++++++++++- app/package.json | 1 + .../modal/modalLayout/modalLayout.jsx | 43 +++--- .../modal/modalLayout/modalLayout.scss | 24 ---- app/webpack/base.config.js | 2 +- 5 files changed, 149 insertions(+), 53 deletions(-) diff --git a/app/package-lock.json b/app/package-lock.json index 3776efed3a..f4a9cb82f6 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -1332,6 +1332,21 @@ "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==", "dev": true }, + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "@formatjs/ecma402-abstract": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.4.0.tgz", @@ -1751,6 +1766,64 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "@motionone/animation": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.15.1.tgz", + "integrity": "sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==", + "requires": { + "@motionone/easing": "^10.15.1", + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "@motionone/dom": { + "version": "10.12.0", + "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz", + "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==", + "requires": { + "@motionone/animation": "^10.12.0", + "@motionone/generators": "^10.12.0", + "@motionone/types": "^10.12.0", + "@motionone/utils": "^10.12.0", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, + "@motionone/easing": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.15.1.tgz", + "integrity": "sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==", + "requires": { + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "@motionone/generators": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.15.1.tgz", + "integrity": "sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==", + "requires": { + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "@motionone/types": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.15.1.tgz", + "integrity": "sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==" + }, + "@motionone/utils": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.15.1.tgz", + "integrity": "sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==", + "requires": { + "@motionone/types": "^10.15.1", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", @@ -3808,7 +3881,7 @@ "bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", - "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==", + "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=", "dev": true }, "c3": { @@ -4913,7 +4986,7 @@ "parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz", - "integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==", + "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=", "dev": true, "requires": { "error-ex": "^1.3.1", @@ -7732,6 +7805,28 @@ "map-cache": "^0.2.2" } }, + "framer-motion": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz", + "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==", + "requires": { + "@emotion/is-prop-valid": "^0.8.2", + "@motionone/dom": "10.12.0", + "framesync": "6.0.1", + "hey-listen": "^1.0.8", + "popmotion": "11.0.3", + "style-value-types": "5.0.0", + "tslib": "^2.1.0" + } + }, + "framesync": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz", + "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==", + "requires": { + "tslib": "^2.1.0" + } + }, "fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -8025,7 +8120,7 @@ "globby": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", - "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==", + "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", "dev": true, "requires": { "array-union": "^1.0.1", @@ -8038,7 +8133,7 @@ "pify": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true } } @@ -8328,6 +8423,11 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, + "hey-listen": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", + "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==" + }, "highlight.js": { "version": "10.7.3", "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", @@ -11907,7 +12007,7 @@ "normalize-path": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", - "integrity": "sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==", + "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", "dev": true, "requires": { "remove-trailing-separator": "^1.0.1" @@ -12444,7 +12544,7 @@ "parse-json": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz", - "integrity": "sha512-QR/GGaKCkhwk1ePQNYDRKYZ3mwU9ypsKhB0XyFnLQdomyEqk3e8wpW3V5Jp88zbxK4n5ST1nqo+g9juTpownhQ==", + "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=", "dev": true, "requires": { "error-ex": "^1.2.0" @@ -12686,6 +12786,17 @@ "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==", "dev": true }, + "popmotion": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz", + "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==", + "requires": { + "framesync": "6.0.1", + "hey-listen": "^1.0.8", + "style-value-types": "5.0.0", + "tslib": "^2.1.0" + } + }, "popper.js": { "version": "1.16.1", "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", @@ -16587,6 +16698,15 @@ "inline-style-parser": "0.1.1" } }, + "style-value-types": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz", + "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==", + "requires": { + "hey-listen": "^1.0.8", + "tslib": "^2.1.0" + } + }, "stylehacks": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz", diff --git a/app/package.json b/app/package.json index 3c021a7243..a2090f8342 100644 --- 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 index 2459d362cf..68d362954d 100644 --- 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 ( -
-
- - - {(status) => ( -
+ {isShown && ( +
+
+ + - {status !== 'exited' ? children : null} + {children} -
- )} - - -
-
+ + +
+
+ )} + ); }; ModalLayout.propTypes = { diff --git a/app/src/componentLibrary/modal/modalLayout/modalLayout.scss b/app/src/componentLibrary/modal/modalLayout/modalLayout.scss index 8b584f8dbc..706e569033 100644 --- 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 index 101cca056b..f28a6818e4 100644 --- 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({ From a828cf225af39da9bdcf89ca015bea6840ae96a1 Mon Sep 17 00:00:00 2001 From: Vadzim Hvazdovich Date: Tue, 27 Dec 2022 14:39:09 +0400 Subject: [PATCH 2/2] EPMRPP-77676 || code review fixes - 1 --- app/src/componentLibrary/modal/modalLayout/modalLayout.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/src/componentLibrary/modal/modalLayout/modalLayout.jsx b/app/src/componentLibrary/modal/modalLayout/modalLayout.jsx index 68d362954d..b2763889a5 100644 --- a/app/src/componentLibrary/modal/modalLayout/modalLayout.jsx +++ b/app/src/componentLibrary/modal/modalLayout/modalLayout.jsx @@ -77,6 +77,7 @@ export const ModalLayout = ({