From 1fa231b5eaf989de0a72a27bf2984a85ba70eb63 Mon Sep 17 00:00:00 2001 From: Lucas Teixeira Date: Sun, 15 Nov 2020 11:38:09 -0300 Subject: [PATCH] WJ-117 - New: Modal animation; --- package.json | 1 + src/components/Modal/index.tsx | 39 ++++++++++++------------ src/components/Modal/styles.ts | 34 ++++++++------------- src/containers/EntityImage/index.tsx | 2 +- yarn.lock | 45 +++++++++++++++++++++++++++- 5 files changed, 78 insertions(+), 43 deletions(-) diff --git a/package.json b/package.json index b027272..8e68970 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "chai": "^4.2.0", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", + "framer-motion": "^2.9.4", "lodash": "^4.17.20", "polished": "^3.6.5", "react": "^16.13.1", diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 39df8ba..e94e268 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -1,5 +1,6 @@ import React, { useCallback, useEffect } from 'react'; import { useLocation } from 'react-router-dom'; +import { motion, AnimatePresence } from 'framer-motion'; import { useModal } from 'components/Modal/hooks'; import StyleProps from 'components/Modal/types/StyleProps'; @@ -43,27 +44,27 @@ const Modal: React.FC = ({ handleDismiss(); }, [location]); // eslint-disable-line - if (!modalContent && !children && !show) { - return null; - } - return ( - - - - - {!hideCloseButton && ( - - - - )} + + {(modalContent || children || show) && ( + + + + + {!hideCloseButton && ( + + + + )} - {modalContent || children} - - - + {modalContent || children} + + + + )} + ); }; diff --git a/src/components/Modal/styles.ts b/src/components/Modal/styles.ts index a7dd756..80128ee 100644 --- a/src/components/Modal/styles.ts +++ b/src/components/Modal/styles.ts @@ -1,4 +1,5 @@ import styled, { css } from 'styled-components'; +import { motion } from 'framer-motion'; import { Color, Size } from 'shared/enums'; import StyleProps from 'components/Modal/types/StyleProps'; @@ -17,19 +18,26 @@ export const Container = styled.div` } */ `; -export const Backdrop = styled.div` +export const Backdrop = styled(motion.div).attrs(() => ({ + initial: { opacity: 0 }, + animate: { opacity: 1 }, + exit: { opacity: 0 }, +}))` flex: 1; background-color: rgba(0, 0, 0, 0.4); `; -export const ModalContainer = styled.div` +export const ModalContainer = styled(motion.div).attrs((props: any) => ({ + initial: { y: '-60%', x: '-50%', opacity: 0 }, + animate: { y: props?.center ? '-50%' : 0, x: '-50%', opacity: 1 }, + exit: { y: '-60%', x: '-50%', opacity: 0 }, +}))` position: absolute; top: 100px; left: 50%; transform: translateX(-50%); - z-index: 15; display: flex; @@ -39,12 +47,10 @@ export const ModalContainer = styled.div` max-height: 100%; overflow: hidden; - /* height: 100%; */ - ${props => props.center && css` - top: 50% !important; + top: 50%; transform: translate(-50%, -50%); `} @@ -53,22 +59,6 @@ export const ModalContainer = styled.div` css` height: ${props.height}; `} - - - - - /* @media (max-width: 1280px) { - width: calc(100% - ${Size.Medium} * 2); - } */ - - @media (max-width: 715px) { - /* top: 0; - left: 0; - width: 100%; - height: 100%; */ - } - - `; export const ModalContent = styled.div` diff --git a/src/containers/EntityImage/index.tsx b/src/containers/EntityImage/index.tsx index 4f64093..4af8c9a 100644 --- a/src/containers/EntityImage/index.tsx +++ b/src/containers/EntityImage/index.tsx @@ -53,7 +53,7 @@ const EntityImage: React.FC = ({ } catch (error) { console.log('handleFavorite -> error', error); } - }, [user, UpdateFavorite, entity.id, entity.mediaType]); + }, [user, setModalContent, UpdateFavorite, entity.id, entity.mediaType]); const handleRedirect = useCallback(() => { if (!disabled) { diff --git a/yarn.lock b/yarn.lock index 4bd2cfd..0c884b3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2036,7 +2036,7 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== -"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.6", "@emotion/is-prop-valid@^0.8.8": +"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.6", "@emotion/is-prop-valid@^0.8.8": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== @@ -8821,6 +8821,26 @@ fragment-cache@^0.2.1: dependencies: map-cache "^0.2.2" +framer-motion@^2.9.4: + version "2.9.4" + resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-2.9.4.tgz#366656ae240776c923cbd4359815e5c1ed56084d" + integrity sha512-Bvgdwpu5UO6VnEEwenJEmnGeo9ILRRWh9f3iIX+71NiM5X60Qi6KlkBFGZc9DGbdIUAn0AYgaxVhTKL39OOYng== + dependencies: + framesync "^4.1.0" + hey-listen "^1.0.8" + popmotion "9.0.0-rc.20" + style-value-types "^3.1.9" + tslib "^1.10.0" + optionalDependencies: + "@emotion/is-prop-valid" "^0.8.2" + +framesync@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/framesync/-/framesync-4.1.0.tgz#69a8db3ca432dc70d6a76ba882684a1497ef068a" + integrity sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ== + dependencies: + hey-listen "^1.0.5" + fresh@0.5.2: version "0.5.2" resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7" @@ -9375,6 +9395,11 @@ hex-color-regex@^1.1.0: resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e" integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ== +hey-listen@^1.0.5, hey-listen@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68" + integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q== + highlight.js@~9.15.0, highlight.js@~9.15.1: version "9.15.10" resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.10.tgz#7b18ed75c90348c045eef9ed08ca1319a2219ad2" @@ -13525,6 +13550,16 @@ polished@^3.6.5: dependencies: "@babel/runtime" "^7.9.2" +popmotion@9.0.0-rc.20: + version "9.0.0-rc.20" + resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.0-rc.20.tgz#f3550042ae31957b5416793ae8723200951ad39d" + integrity sha512-f98sny03WuA+c8ckBjNNXotJD4G2utG/I3Q23NU69OEafrXtxxSukAaJBxzbtxwDvz3vtZK69pu9ojdkMoBNTg== + dependencies: + framesync "^4.1.0" + hey-listen "^1.0.8" + style-value-types "^3.1.9" + tslib "^1.10.0" + popper.js@^1.14.4, popper.js@^1.14.7: version "1.16.1" resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b" @@ -16481,6 +16516,14 @@ style-to-object@0.3.0, style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" +style-value-types@^3.1.9: + version "3.1.9" + resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.1.9.tgz#faf7da660d3f284ed695cff61ea197d85b9122cc" + integrity sha512-050uqgB7WdvtgacoQKm+4EgKzJExVq0sieKBQQtJiU3Muh6MYcCp4T3M8+dfl6VOF2LR0NNwXBP1QYEed8DfIw== + dependencies: + hey-listen "^1.0.8" + tslib "^1.10.0" + styled-components@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.1.1.tgz#96dfb02a8025794960863b9e8e365e3b6be5518d"