From e4805301ed2f7429dced7029df6a1b90f6a92f62 Mon Sep 17 00:00:00 2001 From: Lucas Teixeira Date: Sat, 14 Nov 2020 22:12:28 -0300 Subject: [PATCH 1/6] WJ-117 - New: LoginAlert; --- src/components/Button/styles.ts | 16 +++++++++ src/components/LoginAlert/index.tsx | 49 ++++++++++++++++++++++++++++ src/components/LoginAlert/styles.ts | 29 ++++++++++++++++ src/components/index.ts | 1 + src/containers/EntityImage/index.tsx | 4 +-- 5 files changed, 97 insertions(+), 2 deletions(-) create mode 100644 src/components/LoginAlert/index.tsx create mode 100644 src/components/LoginAlert/styles.ts diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts index 33e2182..b3d5853 100644 --- a/src/components/Button/styles.ts +++ b/src/components/Button/styles.ts @@ -50,6 +50,22 @@ export const Container = styled.button` } `} + ${props => + props.variant === 'basic' && + css` + border: 0; + color: ${getBackground(props.theme, props.color, Color.Fill)}; + background: transparent; + + &:hover { + background-color: ${`${getBackground( + props.theme, + props.color, + Color.Fill, + )}15`}; + } + `} + ${props => diff --git a/src/components/LoginAlert/index.tsx b/src/components/LoginAlert/index.tsx new file mode 100644 index 0000000..89298ce --- /dev/null +++ b/src/components/LoginAlert/index.tsx @@ -0,0 +1,49 @@ +import React, { useCallback } from 'react'; +import { useHistory } from 'react-router-dom'; + +import Route from 'routes/enums'; + +import { useModal } from 'components/Modal/hooks'; +import { Button } from 'components'; +import { + Container, + MessageContainer, + Message, + ButtonsContainer, +} from './styles'; + +const LoginAlert: React.FC = () => { + const history = useHistory(); + const { dismissModal } = useModal(); + + const handleClose = useCallback(() => { + dismissModal(); + }, [dismissModal]); + + return ( + + + Entre com sua conta para adicionar aos favoritos. + + + + + + + ); +}; + +export default LoginAlert; diff --git a/src/components/LoginAlert/styles.ts b/src/components/LoginAlert/styles.ts new file mode 100644 index 0000000..00ee390 --- /dev/null +++ b/src/components/LoginAlert/styles.ts @@ -0,0 +1,29 @@ +import styled from 'styled-components'; +import { Size } from 'shared/enums'; + +export const Container = styled.div` + display: flex; + flex-direction: column; + padding: ${Size.Default}; + padding-top: 0; + width: min(550px, calc(100vw - 5rem)); +`; + +export const MessageContainer = styled.div` + padding: ${Size.Default}; + padding-top: 0; + text-align: center; +`; + +export const Message = styled.h3``; + +export const ButtonsContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + @media (min-width: 715px) { + flex-direction: row; + } +`; diff --git a/src/components/index.ts b/src/components/index.ts index 47aeebb..328d33f 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -7,6 +7,7 @@ export { default as AspectRatioLoading } from './AspectRatio/Loading'; export { default as Button } from './Button'; export { default as EnvironmentLabel } from './EnvironmentLabel'; export { default as Input } from './Input'; +export { default as LoginAlert } from './LoginAlert'; export { default as Media } from './Media'; export { default as Modal } from './Modal'; diff --git a/src/containers/EntityImage/index.tsx b/src/containers/EntityImage/index.tsx index 585f470..4f64093 100644 --- a/src/containers/EntityImage/index.tsx +++ b/src/containers/EntityImage/index.tsx @@ -8,7 +8,7 @@ import { useModal } from 'components/Modal/hooks'; import { useFavorite } from 'domains/Favorites/hooks'; import { Color } from 'shared/enums'; -import { Media } from 'components'; +import { LoginAlert, Media } from 'components'; import { EntityImageLoading } from 'containers'; import { Container, @@ -45,7 +45,7 @@ const EntityImage: React.FC = ({ const handleFavorite = useCallback(async () => { try { if (!user) { - alert('Entre com sua conta para adicionar aos favoritos.'); + setModalContent({ value: }); return; } From f50de3783073bf345949b7b96c99df7daa96b653 Mon Sep 17 00:00:00 2001 From: Lucas Teixeira Date: Sat, 14 Nov 2020 22:24:19 -0300 Subject: [PATCH 2/6] WJ-117 - Update: Modal shadow; --- src/components/Modal/styles.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Modal/styles.ts b/src/components/Modal/styles.ts index 276f8be..2f0e488 100644 --- a/src/components/Modal/styles.ts +++ b/src/components/Modal/styles.ts @@ -74,7 +74,9 @@ export const ModalContainer = styled.div` export const ModalContent = styled.div` display: flex; flex-direction: column; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); + box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.3); + margin: 10px; + margin-top: 0; background-color: ${Color.Fill}; border-radius: ${Size.Small}; From 815e4c87c99b4ac971122e342865dd19cfa4c612 Mon Sep 17 00:00:00 2001 From: Lucas Teixeira Date: Sat, 14 Nov 2020 23:07:04 -0300 Subject: [PATCH 3/6] WJ-117 - New: Image login favorite alert; --- src/assets/heart.svg | 53 +++++++++++++++++++++++++++++ src/assets/login.svg | 28 +++++++++++++++ src/components/LoginAlert/index.tsx | 5 +++ src/components/LoginAlert/styles.ts | 14 ++++++-- src/components/Modal/styles.ts | 2 +- src/pages/Login/index.tsx | 8 ++--- src/pages/Login/styles.ts | 10 +++--- src/pages/Signup/index.tsx | 8 ++--- src/pages/Signup/styles.ts | 8 ++--- 9 files changed, 116 insertions(+), 20 deletions(-) create mode 100644 src/assets/heart.svg create mode 100644 src/assets/login.svg diff --git a/src/assets/heart.svg b/src/assets/heart.svg new file mode 100644 index 0000000..5628acb --- /dev/null +++ b/src/assets/heart.svg @@ -0,0 +1,53 @@ + + a whole year + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/login.svg b/src/assets/login.svg new file mode 100644 index 0000000..a50cc15 --- /dev/null +++ b/src/assets/login.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/LoginAlert/index.tsx b/src/components/LoginAlert/index.tsx index 89298ce..f3808de 100644 --- a/src/components/LoginAlert/index.tsx +++ b/src/components/LoginAlert/index.tsx @@ -3,10 +3,12 @@ import { useHistory } from 'react-router-dom'; import Route from 'routes/enums'; +import { ReactComponent as HeartImage } from 'assets/heart.svg'; import { useModal } from 'components/Modal/hooks'; import { Button } from 'components'; import { Container, + ImageContainer, MessageContainer, Message, ButtonsContainer, @@ -22,6 +24,9 @@ const LoginAlert: React.FC = () => { return ( + + + Entre com sua conta para adicionar aos favoritos. diff --git a/src/components/LoginAlert/styles.ts b/src/components/LoginAlert/styles.ts index 00ee390..a41249b 100644 --- a/src/components/LoginAlert/styles.ts +++ b/src/components/LoginAlert/styles.ts @@ -9,9 +9,19 @@ export const Container = styled.div` width: min(550px, calc(100vw - 5rem)); `; +export const ImageContainer = styled.div` + display: flex; + align-items: center; + justify-content: center; + + svg { + width: min(300px, 100%); + height: auto; + } +`; + export const MessageContainer = styled.div` - padding: ${Size.Default}; - padding-top: 0; + padding: ${Size.Large} ${Size.Default}; text-align: center; `; diff --git a/src/components/Modal/styles.ts b/src/components/Modal/styles.ts index 2f0e488..a7dd756 100644 --- a/src/components/Modal/styles.ts +++ b/src/components/Modal/styles.ts @@ -74,7 +74,7 @@ export const ModalContainer = styled.div` export const ModalContent = styled.div` display: flex; flex-direction: column; - box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.3); + box-shadow: 0 4px 7px 1px rgba(0, 0, 0, 0.3); margin: 10px; margin-top: 0; diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx index 3c72f28..abc8cfb 100644 --- a/src/pages/Login/index.tsx +++ b/src/pages/Login/index.tsx @@ -72,7 +72,7 @@ const Login: React.FC = () => { return ( -
+
@@ -88,7 +88,7 @@ const Login: React.FC = () => { placeholder="Senha" /> {error} - @@ -102,7 +102,7 @@ const Login: React.FC = () => { @@ -103,7 +103,7 @@ const Signup: React.FC = () => { - - )} + + {(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" From 7aa4b9fb5c92a5c84e866d10d0f7b4e723d974c2 Mon Sep 17 00:00:00 2001 From: Lucas Teixeira Date: Sun, 15 Nov 2020 13:24:14 -0300 Subject: [PATCH 5/6] WJ-117 - New: FIlmography animation; --- src/components/Modal/index.tsx | 2 +- src/containers/Filmography/index.tsx | 93 ++++++++++++++-------------- src/containers/Filmography/styles.ts | 7 ++- 3 files changed, 55 insertions(+), 47 deletions(-) diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index e94e268..21a59de 100644 --- 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 index 5129868..928f7c0 100644 --- 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 = ({ }, [data]); return ( - - - {title && ( - - {title} - - )} + + + + {title && ( + + {title} + + )} - {isLoading && } + {isLoading && } - {!isLoading && data.length > 0 && ( - <> - - {parsedData.map((entity: any) => ( - handleRedirect(entity)} - > - {entity.year} - - {entity.title || entity.name} - - {entity.character && ` como ${entity.character}`} - - {entity.episodeCount && ( - - {entity.episodeCount > 1 - ? ` (${entity.episodeCount} episódios)` - : ` (${entity.episodeCount} episódio)`} - - )} - - ))} - + {!isLoading && data.length > 0 && ( + <> + + {parsedData.map((entity: any) => ( + handleRedirect(entity)} + > + {entity.year} - + {entity.title || entity.name} + + {entity.character && ` como ${entity.character}`} + + {entity.episodeCount && ( + + {entity.episodeCount > 1 + ? ` (${entity.episodeCount} episódios)` + : ` (${entity.episodeCount} episódio)`} + + )} + + ))} + - {parsedData?.length < data?.length && ( - - - - )} - - )} + {parsedData?.length < data?.length && ( + + + + )} + + )} - {!isLoading && data.length === 0 && ( - {message} - )} - - + {!isLoading && data.length === 0 && ( + {message} + )} + + + ); }; diff --git a/src/containers/Filmography/styles.ts b/src/containers/Filmography/styles.ts index ca61ac7..5809e95 100644 --- 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; From 1f4dfb9a851561031861b151b173992d782519f7 Mon Sep 17 00:00:00 2001 From: Lucas Teixeira Date: Sun, 15 Nov 2020 14:59:33 -0300 Subject: [PATCH 6/6] WJ-117 - New: EntityImage animations; --- src/containers/EntityImage/index.tsx | 61 +++++------ src/containers/EntityImage/styles.ts | 2 + src/containers/EntityImageList/index.tsx | 123 ++++++++++++----------- src/containers/EntityImageList/styles.ts | 11 +- 4 files changed, 109 insertions(+), 88 deletions(-) diff --git a/src/containers/EntityImage/index.tsx b/src/containers/EntityImage/index.tsx index 4af8c9a..c7ed9a9 100644 --- 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 = ({ } }, [user, favoriteList, entity.id, entity.mediaType]); - if (!entity.featuredImage && !entity.backdrop && !showEmpty) { - return null; - } - if (isLoading) { return ( = ({ } return ( - - {!hideFavoriteButton && ( - - - + + {(entity.featuredImage || entity.backdrop || showEmpty) && ( + + {!hideFavoriteButton && ( + + + + )} + + + + {showInfo && ( + + + {entity.title} + + {!hideSubtitle && ( + {entity?.subtitle} + )} + + )} + + )} - - - - {showInfo && ( - - {entity.title} - {!hideSubtitle && {entity?.subtitle}} - - )} - - + ); }; diff --git a/src/containers/EntityImage/styles.ts b/src/containers/EntityImage/styles.ts index 1dda95f..9bcb356 100644 --- 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 index 5981aae..7036bd6 100644 --- 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 = ({ }, [itemsContainer, checkButtons]); return ( - - - {title && ( - - {title} - - )} - - {isLoading && ( - - )} - - {!isLoading && data.length > 0 && ( - <> - {showPreviousButton && ( - - - - )} - - - {data.map(entity => ( - - ))} - - - {showNextButton && ( - - - - )} - - )} - - {!isLoading && data.length === 0 && ( - {message} - )} - - + + + + {title && ( + + {title} + + )} + + {isLoading && ( + + )} + + {!isLoading && data.length > 0 && ( + <> + {showPreviousButton && ( + + + + )} + + + {data.map(entity => ( + + + + ))} + + + {showNextButton && ( + + + + )} + + )} + + {!isLoading && data.length === 0 && ( + {message} + )} + + + ); }; diff --git a/src/containers/EntityImageList/styles.ts b/src/containers/EntityImageList/styles.ts index d5bdca5..5d027f1 100644 --- 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;