diff --git a/src/components/ItemList/ItemList.tsx b/src/components/ItemList/ItemList.tsx index e6dda88..1c3b653 100644 --- a/src/components/ItemList/ItemList.tsx +++ b/src/components/ItemList/ItemList.tsx @@ -1,6 +1,10 @@ import React from "react"; import Item from "../Item/Item"; -import { Item as mItem } from "../../model"; +import { + featuredOnly, + nonFeaturedOnly, + Item as mItem, +} from "../../model"; import "./item-list.scss"; type ItemListProps = { @@ -9,7 +13,6 @@ type ItemListProps = { noLeadingBorder?: boolean; headerStyle?: React.CSSProperties; itemStyle?: React.CSSProperties[]; - greyedOut?: boolean; }; const ItemList: React.FC = ({ @@ -19,25 +22,38 @@ const ItemList: React.FC = ({ noLeadingBorder, headerStyle = {}, itemStyle = [], - greyedOut = false, -}) => ( +}) => { + const featuredItems = featuredOnly(items); + const nonFeaturedItems = nonFeaturedOnly(items); + + return (
{children}
- {items.map((item, i) => ( + {featuredItems.map((item, i) => ( + ))} + {nonFeaturedItems.map((item, i) => ( + ))}
-); +);} export default ItemList; diff --git a/src/components/PageItem/PageItem.tsx b/src/components/PageItem/PageItem.tsx index 91d666a..c88721a 100644 --- a/src/components/PageItem/PageItem.tsx +++ b/src/components/PageItem/PageItem.tsx @@ -9,8 +9,6 @@ import { useAnimations } from "./useAnimations"; import "./item-page.scss"; import { translate } from "../../config"; import { - featuredOnly, - nonFeaturedOnly, groupByQuadrants, Item, } from "../../model"; @@ -36,13 +34,9 @@ type Props = { const PageItem: React.FC = ({ pageName, items, leaving, onLeave }) => { const itemsInRing = getItemsInRing(pageName, items); - const featuredItemsInRing = featuredOnly(itemsInRing); - const nonFeaturedItemsInRing = nonFeaturedOnly(itemsInRing); const { getAnimationState, getAnimationStates } = useAnimations({ itemsInRing, - featuredItemsInRing, - nonFeaturedItemsInRing, onLeave, leaving, }); @@ -62,10 +56,10 @@ const PageItem: React.FC = ({ pageName, items, leaving, onLeave }) => {

{translate(item.quadrant)}

@@ -82,24 +76,6 @@ const PageItem: React.FC = ({ pageName, items, leaving, onLeave }) => {
- {nonFeaturedItemsInRing.length > 0 && ( -
- -
-
-

Not featured anymore

-
-
-
-
- )} -
void; } export const useAnimations = ({ itemsInRing, - featuredItemsInRing, - nonFeaturedItemsInRing, leaving, onLeave, }: Props) => { - interface AnimationConfig extends AbstractAnimationConfig { + type AnimationConfig = { background: Animation; navHeader: Animation; text: Animation; - featuredItems: Animation[]; - nonFeaturedItems: Animation[]; + items: Animation[]; footer: Animation; } @@ -71,7 +65,7 @@ export const useAnimations = ({ }, 600 ), - featuredItems: featuredItemsInRing.map((item, i) => + items: itemsInRing.map((item, i) => createAnimation( { transform: "translateX(-40px)", @@ -85,20 +79,6 @@ export const useAnimations = ({ 400 + 100 * i ) ), - nonFeaturedItems: nonFeaturedItemsInRing.map((item, i) => - createAnimation( - { - transform: "translateX(-40px)", - opacity: "0", - }, - { - transition: "opacity 150ms ease-out, transform 300ms ease-out", - transform: "translateX(0px)", - opacity: "1", - }, - 400 + 100 * (featuredItemsInRing.length + i) - ) - ), footer: createAnimation( { transition: "opacity 150ms ease-out, transform 300ms ease-out", @@ -113,7 +93,7 @@ export const useAnimations = ({ 600 + itemsInRing.length * 100 ), }), - [itemsInRing, featuredItemsInRing, nonFeaturedItemsInRing] + [itemsInRing] ); const animationsOut: AnimationConfig = useMemo( @@ -141,9 +121,9 @@ export const useAnimations = ({ }, 0 ), - featuredItems: featuredItemsInRing.map((item, i) => + items: itemsInRing.map((item, i) => createAnimation( - animationsIn.featuredItems[i].stateB, + animationsIn.items[i].stateB, { transition: "opacity 150ms ease-out, transform 300ms ease-out", transform: "translateX(40px)", @@ -152,17 +132,6 @@ export const useAnimations = ({ 100 + 50 * i ) ), - nonFeaturedItems: nonFeaturedItemsInRing.map((item, i) => - createAnimation( - animationsIn.nonFeaturedItems[i].stateB, - { - transition: "opacity 150ms ease-out, transform 300ms ease-out", - transform: "translateX(40px)", - opacity: "0", - }, - 100 + 50 * (featuredItemsInRing.length + i) - ) - ), footer: createAnimation( animationsIn.text.stateB, { @@ -173,7 +142,7 @@ export const useAnimations = ({ 200 + itemsInRing.length * 50 ), }), - [itemsInRing, featuredItemsInRing, nonFeaturedItemsInRing, animationsIn] + [itemsInRing, animationsIn] ); const [animations, setAnimations] = useState(() => {