WJ-117 - New: Modal animation;

90lucasgabriel · Nov 15, 2020 · 1fa231b · 1fa231b
1 parent 815e4c8
commit 1fa231b
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 43 deletions.
diff --git 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
@@ -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<StyleProps> = ({
     handleDismiss();
   }, [location]); // eslint-disable-line
 
-  if (!modalContent && !children && !show) {
-    return null;
-  }
-
   return (
-    <Container>
-      <Backdrop onClick={handleDismiss} />
-      <ModalContainer center={center} height={height}>
-        <ModalContent>
-          {!hideCloseButton && (
-            <CloseContainer>
-              <Button variant="icon" onClick={handleDismiss}>
-                <CloseIcon />
-              </Button>
-            </CloseContainer>
-          )}
+    <AnimatePresence>
+      {(modalContent || children || show) && (
+        <Container>
+          <Backdrop onClick={handleDismiss} />
+          <ModalContainer center={center} height={height}>
+            <ModalContent>
+              {!hideCloseButton && (
+                <CloseContainer>
+                  <Button variant="icon" onClick={handleDismiss}>
+                    <CloseIcon />
+                  </Button>
+                </CloseContainer>
+              )}
 
-          <ContentContainer>{modalContent || children}</ContentContainer>
-        </ModalContent>
-      </ModalContainer>
-    </Container>
+              <ContentContainer>{modalContent || children}</ContentContainer>
+            </ModalContent>
+          </ModalContainer>
+        </Container>
+      )}
+    </AnimatePresence>
   );
 };
 

diff --git 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<StyleProps>`
+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 },
+}))<StyleProps>`
   position: absolute;
 
   top: 100px;
   left: 50%;
   transform: translateX(-50%);
 
-
   z-index: 15;
 
   display: flex;
@@ -39,12 +47,10 @@ export const ModalContainer = styled.div<StyleProps>`
   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<StyleProps>`
     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
@@ -53,7 +53,7 @@ const EntityImage: React.FC<Props> = ({
     } 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
@@ -2036,7 +2036,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/[email protected]", "@emotion/is-prop-valid@^0.8.6", "@emotion/is-prop-valid@^0.8.8":
+"@emotion/[email protected]", "@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"
+
 [email protected]:
   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"
 
+[email protected]:
+  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 @@ [email protected], 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"