Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ONYX-1442): adjust HomeViewSectionCard component for bigger screens #11321

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+93 −75
Open

fix(ONYX-1442): adjust HomeViewSectionCard component for bigger screens #11321

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7628470
fix: adjust image scaling on ipad
dariakoko Dec 18, 2024
5185381
fix: use HeroUnit component for HomeView section card
dariakoko Dec 20, 2024
f03bc3c
chore
dariakoko Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 17 additions & 18 deletions src/app/Scenes/HomeView/Components/HeroUnit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
import { Box, Button, Flex, Image, Text, Touchable } from "@artsy/palette-mobile"
import { HeroUnitItem } from "app/Scenes/HomeView/Sections/HomeViewSectionHeroUnits"
import { navigate } from "app/system/navigation/navigate"
import { useScreenDimensions } from "app/utils/hooks"
import { PixelRatio } from "react-native"

interface HeroUnitProps {
interface HeroUnitItem {
internalID?: string
title: string
body: string | null | undefined
imageSrc: string
url: string
buttonText: string
}

interface HeroUnitItemProps {
item: HeroUnitItem
onPress?: () => void
}
Expand All @@ -15,32 +22,24 @@ export const HERO_UNIT_CARD_HEIGHT = 250 * fontScale
const CARD_IMAGE_WIDTH = 125
const DESCRIPTION_LINES = fontScale > 1 ? 4 : 3

export const HeroUnit: React.FC<HeroUnitProps> = ({ item, onPress }) => {
export const HeroUnit: React.FC<HeroUnitItemProps> = ({ item, onPress }) => {
const { internalID, title, imageSrc, body, buttonText } = item
const { width: screenWidth } = useScreenDimensions()
const cardImageWidth = screenWidth > 700 ? screenWidth / 2 : CARD_IMAGE_WIDTH
const imageSrc = item.image?.imageURL ?? ""

const handlePress = () => {
onPress?.()

if (item.link.url) {
navigate(item.link.url)
}
}

return (
<Touchable key={item.internalID} onPress={handlePress}>
<Touchable key={internalID} onPress={onPress} haptic="impactLight">
<Flex bg="black100" flexDirection="row" height={HERO_UNIT_CARD_HEIGHT} width={screenWidth}>
<Image height={HERO_UNIT_CARD_HEIGHT} src={imageSrc} width={cardImageWidth} />
<Box p={2} width={screenWidth - cardImageWidth}>
<Text color="white100" mb={1} numberOfLines={2} variant="lg-display">
{item.title}
{title}
</Text>
<Text color="white100" mb={2} numberOfLines={DESCRIPTION_LINES}>
{item.body}
{body}
</Text>
<Button size="small" variant="outlineLight" onPress={handlePress}>
{item.link.text}
<Button size="small" variant="outlineLight" onPress={onPress}>
{buttonText}
</Button>
</Box>
</Flex>
Expand Down
110 changes: 63 additions & 47 deletions src/app/Scenes/HomeView/Sections/HomeViewSectionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
} from "@artsy/palette-mobile"
import { HomeViewSectionCardQuery } from "__generated__/HomeViewSectionCardQuery.graphql"
import { HomeViewSectionCard_section$key } from "__generated__/HomeViewSectionCard_section.graphql"
import { HeroUnit } from "app/Scenes/HomeView/Components/HeroUnit"
import { HomeViewSectionSentinel } from "app/Scenes/HomeView/Components/HomeViewSectionSentinel"
import { SectionSharedProps } from "app/Scenes/HomeView/Sections/Section"
import { useHomeViewTracking } from "app/Scenes/HomeView/hooks/useHomeViewTracking"
Expand Down Expand Up @@ -42,11 +43,13 @@ export const HomeViewSectionCard: React.FC<HomeViewSectionCardProps> = ({
return null
}

const { title, subtitle, image, buttonText: btnText } = section.card

const imageHeight = height * 0.5

const hasImage = !!section.card.image?.imageURL
const hasImage = !!image?.imageURL
const textColor = hasImage ? "white100" : "black100"
const buttonText = section.card.buttonText ?? "More"
const buttonText = btnText ?? "More"
const route = getRoute(section.card)

const onPress = () => {
Expand All @@ -59,54 +62,67 @@ export const HomeViewSectionCard: React.FC<HomeViewSectionCardProps> = ({

return (
<Flex {...flexProps}>
<Touchable onPress={onPress} haptic="impactLight">
{!!hasImage && (
<Flex position="absolute">
<FastImage
source={{ uri: section.card.image.imageURL }}
style={{ width: width, height: imageHeight }}
resizeMode={isTablet() ? "contain" : "cover"}
/>
<LinearGradient
colors={["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 1)"]}
start={{ x: 0, y: 0 }}
end={{ x: 0, y: 1 }}
style={{
position: "absolute",
width: "100%",
height: "40%",
bottom: 0,
}}
/>
</Flex>
)}

<Flex justifyContent="flex-end" px={2} pb={2} height={hasImage ? imageHeight : undefined}>
<Text variant="lg-display" color={textColor}>
{section.card.title}
</Text>

<Flex mt={0.5} justifyContent="space-between" flexDirection="row">
<Flex flex={1} mr={2}>
<Text variant="sm-display" color={textColor}>
{section.card.subtitle}
</Text>
{isTablet() ? (
<HeroUnit
item={{
title: title,
body: subtitle,
imageSrc: image?.imageURL ?? "",
url: route,
buttonText: buttonText,
}}
onPress={onPress}
/>
) : (
<Touchable onPress={onPress} haptic="impactLight">
{!!hasImage && (
<Flex position="absolute">
<FastImage
source={{ uri: image.imageURL }}
style={{ width: width, height: imageHeight }}
resizeMode="cover"
/>
<LinearGradient
colors={["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 1)"]}
start={{ x: 0, y: 0 }}
end={{ x: 0, y: 1 }}
style={{
position: "absolute",
width: "100%",
height: "40%",
bottom: 0,
}}
/>
</Flex>

{!!route && (
<Flex mt={0.5} maxWidth={150}>
<Button
variant={hasImage ? "outlineLight" : "fillDark"}
size="small"
onPress={onPress}
>
{buttonText}
</Button>
)}

<Flex justifyContent="flex-end" px={2} pb={2} height={hasImage ? imageHeight : undefined}>
<Text variant="lg-display" color={textColor}>
{title}
</Text>

<Flex mt={0.5} justifyContent="space-between" flexDirection="row">
<Flex flex={1} mr={2}>
<Text variant="sm-display" color={textColor}>
{subtitle}
</Text>
</Flex>
)}

{!!route && (
<Flex mt={0.5} maxWidth={150}>
<Button
variant={hasImage ? "outlineLight" : "fillDark"}
size="small"
onPress={onPress}
>
{buttonText}
</Button>
</Flex>
)}
</Flex>
</Flex>
</Flex>
</Touchable>
</Touchable>
)}

<HomeViewSectionSentinel
contextModule={section.contextModule as ContextModule}
Expand Down
23 changes: 13 additions & 10 deletions src/app/Scenes/HomeView/Sections/HomeViewSectionHeroUnits.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import { ContextModule } from "@artsy/cohesion"
import { Flex, FlexProps, Skeleton, SkeletonBox, Spacer } from "@artsy/palette-mobile"
import { HomeViewSectionHeroUnitsQuery } from "__generated__/HomeViewSectionHeroUnitsQuery.graphql"
import {
HomeViewSectionHeroUnits_section$data,
HomeViewSectionHeroUnits_section$key,
} from "__generated__/HomeViewSectionHeroUnits_section.graphql"
import { HomeViewSectionHeroUnits_section$key } from "__generated__/HomeViewSectionHeroUnits_section.graphql"
import { PaginationDots } from "app/Components/PaginationDots"
import { HERO_UNIT_CARD_HEIGHT, HeroUnit } from "app/Scenes/HomeView/Components/HeroUnit"
import { HomeViewSectionSentinel } from "app/Scenes/HomeView/Components/HomeViewSectionSentinel"
Expand All @@ -14,10 +11,10 @@ import {
HORIZONTAL_FLATLIST_WINDOW_SIZE,
} from "app/Scenes/HomeView/helpers/constants"
import { useHomeViewTracking } from "app/Scenes/HomeView/hooks/useHomeViewTracking"
import { navigate } from "app/system/navigation/navigate"
import { extractNodes } from "app/utils/extractNodes"
import { useScreenDimensions } from "app/utils/hooks"
import { NoFallback, withSuspense } from "app/utils/hooks/withSuspense"
import { ExtractNodeType } from "app/utils/relayHelpers"
import { isNumber } from "lodash"
import { memo, useRef, useState } from "react"
import { FlatList, ViewabilityConfig, ViewToken } from "react-native"
Expand All @@ -28,10 +25,6 @@ interface HomeViewSectionHeroUnitsProps extends FlexProps {
index: number
}

export type HeroUnitItem = ExtractNodeType<
HomeViewSectionHeroUnits_section$data["heroUnitsConnection"]
>

Comment on lines -31 to -34
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing this type definition in favor of interface HeroUnitItemProps because the old type definition does not allow to reuse the component due to different shape of types

For example this does not work:

type HeroUnitItem =
  | NonNullable<HomeViewSectionCard_section$data["card"]>
  | ExtractNodeType<HomeViewSectionHeroUnits_section$data["heroUnitsConnection"]>

Am I right for doing so of there is a better way?

Copy link
Member

@dblandin dblandin Dec 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What reuse are you referring to? These components should be fairly specific to the homeView schema and screen so I'm surprised we can't keep this typing as is and address any errors in item access elsewhere.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am reusing HeroUnit component

export const HomeViewSectionHeroUnits: React.FC<HomeViewSectionHeroUnitsProps> = ({
section: sectionProp,
index,
Expand Down Expand Up @@ -72,13 +65,23 @@ export const HomeViewSectionHeroUnits: React.FC<HomeViewSectionHeroUnitsProps> =
keyExtractor={(item) => item.internalID}
renderItem={({ item, index }) => (
<HeroUnit
item={item}
item={{
internalID: item.internalID,
title: item.title,
body: item.body,
imageSrc: item.image?.imageURL ?? "",
url: item.link.url,
buttonText: item.link.text,
}}
onPress={() => {
tracking.tappedHeroUnitGroup(
item.link.url,
section.contextModule as ContextModule,
index
)
if (item.link.url) {
navigate(item.link.url)
}
}}
/>
)}
Expand Down