WJ-117 - New: FIlmography animation;

90lucasgabriel · Nov 15, 2020 · 7aa4b9f · 7aa4b9f
1 parent 1fa231b
commit 7aa4b9f
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 47 deletions.
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-import { motion, AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'framer-motion';
 
 import { useModal } from 'components/Modal/hooks';
 import StyleProps from 'components/Modal/types/StyleProps';

diff --git a/src/containers/Filmography/index.tsx b/src/containers/Filmography/index.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
+import { AnimatePresence } from 'framer-motion';
 
 import { getEntityRoute } from 'shared/helpers';
 import { Color } from 'shared/enums';
@@ -51,55 +52,57 @@ const Filmography: React.FC<Props> = ({
   }, [data]);
 
   return (
-    <Wrapper theme={theme} background={background} color={color}>
-      <Container>
-        {title && (
-          <Title theme={theme} color={color}>
-            {title}
-          </Title>
-        )}
+    <AnimatePresence>
+      <Wrapper theme={theme} background={background} color={color}>
+        <Container>
+          {title && (
+            <Title theme={theme} color={color}>
+              {title}
+            </Title>
+          )}
 
-        {isLoading && <FilmographyLoading />}
+          {isLoading && <FilmographyLoading />}
 
-        {!isLoading && data.length > 0 && (
-          <>
-            <ListContainer>
-              {parsedData.map((entity: any) => (
-                <ItemContainer
-                  key={entity.id}
-                  onClick={() => handleRedirect(entity)}
-                >
-                  <YearLabel>{entity.year} - </YearLabel>
-                  <MovieName>{entity.title || entity.name}</MovieName>
-                  <CharacterName>
-                    {entity.character && ` como ${entity.character}`}
-                  </CharacterName>
-                  {entity.episodeCount && (
-                    <EpisodeCount>
-                      {entity.episodeCount > 1
-                        ? ` (${entity.episodeCount} episódios)`
-                        : ` (${entity.episodeCount} episódio)`}
-                    </EpisodeCount>
-                  )}
-                </ItemContainer>
-              ))}
-            </ListContainer>
+          {!isLoading && data.length > 0 && (
+            <>
+              <ListContainer>
+                {parsedData.map((entity: any) => (
+                  <ItemContainer
+                    key={entity.id}
+                    onClick={() => handleRedirect(entity)}
+                  >
+                    <YearLabel>{entity.year} - </YearLabel>
+                    <MovieName>{entity.title || entity.name}</MovieName>
+                    <CharacterName>
+                      {entity.character && ` como ${entity.character}`}
+                    </CharacterName>
+                    {entity.episodeCount && (
+                      <EpisodeCount>
+                        {entity.episodeCount > 1
+                          ? ` (${entity.episodeCount} episódios)`
+                          : ` (${entity.episodeCount} episódio)`}
+                      </EpisodeCount>
+                    )}
+                  </ItemContainer>
+                ))}
+              </ListContainer>
 
-            {parsedData?.length < data?.length && (
-              <More onClick={handleMore}>
-                <Button theme="light" background={Color.Transparent}>
-                  Ver Mais
-                </Button>
-              </More>
-            )}
-          </>
-        )}
+              {parsedData?.length < data?.length && (
+                <More onClick={handleMore}>
+                  <Button theme="light" background={Color.Transparent}>
+                    Ver Mais
+                  </Button>
+                </More>
+              )}
+            </>
+          )}
 
-        {!isLoading && data.length === 0 && (
-          <MessageContainer>{message}</MessageContainer>
-        )}
-      </Container>
-    </Wrapper>
+          {!isLoading && data.length === 0 && (
+            <MessageContainer>{message}</MessageContainer>
+          )}
+        </Container>
+      </Wrapper>
+    </AnimatePresence>
   );
 };
 

diff --git a/src/containers/Filmography/styles.ts b/src/containers/Filmography/styles.ts
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { motion } from 'framer-motion';
 
 import DefaultProps from 'shared/types';
 import { Container as DefaultContainer } from 'components/Layout';
@@ -43,7 +44,11 @@ export const ListContainer = styled.div`
   transition: 0.3s height;
 `;
 
-export const ItemContainer = styled.div`
+export const ItemContainer = styled(motion.div).attrs(() => ({
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+}))`
   font-size: ${Size.Default};
   color: ${Color.Text};
   padding: ${Size.Medium} 0;