WJ-117 - New: EntityImage animations;

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

Hide file tree

Showing 4 changed files with 109 additions and 88 deletions.
diff --git a/src/containers/EntityImage/index.tsx b/src/containers/EntityImage/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 { BsHeartFill } from 'react-icons/bs';
 
 import { getEntityRoute } from 'shared/helpers';
@@ -96,10 +97,6 @@ const EntityImage: React.FC<Props> = ({
     }
   }, [user, favoriteList, entity.id, entity.mediaType]);
 
-  if (!entity.featuredImage && !entity.backdrop && !showEmpty) {
-    return null;
-  }
-
   if (isLoading) {
     return (
       <EntityImageLoading
@@ -112,31 +109,39 @@ const EntityImage: React.FC<Props> = ({
   }
 
   return (
-    <Container showShadow={showShadow} size={size}>
-      {!hideFavoriteButton && (
-        <IconButton onClick={handleFavorite}>
-          <BsHeartFill fill={isFavorite ? Color.Primary : Color.Empty} />
-        </IconButton>
+    <AnimatePresence>
+      {(entity.featuredImage || entity.backdrop || showEmpty) && (
+        <Container showShadow={showShadow} size={size}>
+          {!hideFavoriteButton && (
+            <IconButton onClick={handleFavorite}>
+              <BsHeartFill fill={isFavorite ? Color.Primary : Color.Empty} />
+            </IconButton>
+          )}
+          <EntityContainer
+            size={size}
+            showInfo={showInfo}
+            disabled={disabled}
+            onClick={handleClick}
+          >
+            <FeaturedImage
+              src={entity.featuredImage || entity.backdrop}
+              showInfo={showInfo}
+            />
+
+            {showInfo && (
+              <InfoContainer hideSubtitle={hideSubtitle}>
+                <InfoTitle hideSubtitle={hideSubtitle}>
+                  {entity.title}
+                </InfoTitle>
+                {!hideSubtitle && (
+                  <InfoSubtitle>{entity?.subtitle}</InfoSubtitle>
+                )}
+              </InfoContainer>
+            )}
+          </EntityContainer>
+        </Container>
       )}
-      <EntityContainer
-        size={size}
-        showInfo={showInfo}
-        disabled={disabled}
-        onClick={handleClick}
-      >
-        <FeaturedImage
-          src={entity.featuredImage || entity.backdrop}
-          showInfo={showInfo}
-        />
-
-        {showInfo && (
-          <InfoContainer hideSubtitle={hideSubtitle}>
-            <InfoTitle hideSubtitle={hideSubtitle}>{entity.title}</InfoTitle>
-            {!hideSubtitle && <InfoSubtitle>{entity?.subtitle}</InfoSubtitle>}
-          </InfoContainer>
-        )}
-      </EntityContainer>
-    </Container>
+    </AnimatePresence>
   );
 };
 

diff --git a/src/containers/EntityImage/styles.ts b/src/containers/EntityImage/styles.ts
@@ -75,6 +75,8 @@ export const IconButton = styled.button`
   svg {
     height: ${Size.Default};
     width: ${Size.Default};
+
+    transition: fill 0.3s;
   }
 `;
 

diff --git a/src/containers/EntityImageList/index.tsx b/src/containers/EntityImageList/index.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, createRef, useState } from 'react';
+import { AnimatePresence } from 'framer-motion';
 
 import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';
 
@@ -9,6 +10,7 @@ import {
   Title,
   ListContainer,
   ListContent,
+  EntityImageContainer,
   PreviousButton,
   NextButton,
   MessageContainer,
@@ -73,65 +75,68 @@ const EntityImageList: React.FC<Props> = ({
   }, [itemsContainer, checkButtons]);
 
   return (
-    <Wrapper theme={theme} background={background} color={color}>
-      <Container>
-        {title && (
-          <Title theme={theme} color={color}>
-            {title}
-          </Title>
-        )}
-
-        {isLoading && (
-          <EntityImageListLoading
-            showShadow={showShadow}
-            showInfo={showInfo}
-            hideSubtitle={hideSubtitle}
-            theme={theme}
-            background={background}
-            color={color}
-          />
-        )}
-
-        {!isLoading && data.length > 0 && (
-          <>
-            {showPreviousButton && (
-              <PreviousButton
-                variant="icon"
-                theme="light"
-                onClick={handlePrevious}
-              >
-                <FiChevronLeft />
-              </PreviousButton>
-            )}
-            <ListContainer ref={itemsContainer}>
-              <ListContent>
-                {data.map(entity => (
-                  <EntityImage
-                    key={entity.id}
-                    showShadow={showShadow}
-                    hideFavoriteButton={hideFavoriteButton}
-                    disabled={disabled}
-                    showInfo={showInfo}
-                    hideSubtitle={hideSubtitle}
-                    showModal={showModal}
-                    {...entity}
-                  />
-                ))}
-              </ListContent>
-            </ListContainer>
-            {showNextButton && (
-              <NextButton variant="icon" theme="light" onClick={handleNext}>
-                <FiChevronRight />
-              </NextButton>
-            )}
-          </>
-        )}
-
-        {!isLoading && data.length === 0 && (
-          <MessageContainer>{message}</MessageContainer>
-        )}
-      </Container>
-    </Wrapper>
+    <AnimatePresence>
+      <Wrapper theme={theme} background={background} color={color}>
+        <Container>
+          {title && (
+            <Title theme={theme} color={color}>
+              {title}
+            </Title>
+          )}
+
+          {isLoading && (
+            <EntityImageListLoading
+              showShadow={showShadow}
+              showInfo={showInfo}
+              hideSubtitle={hideSubtitle}
+              theme={theme}
+              background={background}
+              color={color}
+            />
+          )}
+
+          {!isLoading && data.length > 0 && (
+            <>
+              {showPreviousButton && (
+                <PreviousButton
+                  variant="icon"
+                  theme="light"
+                  onClick={handlePrevious}
+                >
+                  <FiChevronLeft />
+                </PreviousButton>
+              )}
+              <ListContainer ref={itemsContainer}>
+                <ListContent>
+                  {data.map(entity => (
+                    <EntityImageContainer key={entity.id}>
+                      <EntityImage
+                        showShadow={showShadow}
+                        hideFavoriteButton={hideFavoriteButton}
+                        disabled={disabled}
+                        showInfo={showInfo}
+                        hideSubtitle={hideSubtitle}
+                        showModal={showModal}
+                        {...entity}
+                      />
+                    </EntityImageContainer>
+                  ))}
+                </ListContent>
+              </ListContainer>
+              {showNextButton && (
+                <NextButton variant="icon" theme="light" onClick={handleNext}>
+                  <FiChevronRight />
+                </NextButton>
+              )}
+            </>
+          )}
+
+          {!isLoading && data.length === 0 && (
+            <MessageContainer>{message}</MessageContainer>
+          )}
+        </Container>
+      </Wrapper>
+    </AnimatePresence>
   );
 };
 

diff --git a/src/containers/EntityImageList/styles.ts b/src/containers/EntityImageList/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, Button } from 'components';
@@ -61,7 +62,9 @@ export const ListContainer = styled.div`
   }
 `;
 
-export const ListContent = styled.div`
+export const ListContent = styled(motion.div).attrs(() => ({
+  // layout: true,
+}))`
   display: inline-flex;
   padding: 0 2px;
   margin-top: 2px;
@@ -92,6 +95,12 @@ export const ListContent = styled.div`
   }
 `;
 
+export const EntityImageContainer = styled(motion.div).attrs(() => ({
+  initial: { x: 20, opacity: 0 },
+  animate: { x: 0, opacity: 1 },
+  exit: { x: -20, opacity: 0 },
+}))``;
+
 export const PreviousButton = styled(Button)`
   opacity: 0;
   pointer-events: none;