Tomasz Zawadzki
139 lines
3.5 KiB
TypeScript
139 lines
3.5 KiB
TypeScript
import {useEffect, useRef, useState} from 'react'
|
|
import {View} from 'react-native'
|
|
import PagerView from 'react-native-pager-view'
|
|
import {type PagerViewOnPageSelectedEvent} from 'react-native-pager-view'
|
|
import {Image} from 'expo-image'
|
|
import {msg} from '@lingui/core/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {atoms as a, tokens, useTheme} from '#/alf'
|
|
import {Text} from '#/components/Typography'
|
|
import {PROP_1, PROP_2, PROP_3} from './images'
|
|
import {
|
|
Dot,
|
|
useValuePropText,
|
|
type ValuePropositionPagerProps,
|
|
} from './ValuePropositionPager.shared'
|
|
|
|
export function ValuePropositionPager({
|
|
step,
|
|
setStep,
|
|
avatarUri,
|
|
}: ValuePropositionPagerProps) {
|
|
const t = useTheme()
|
|
const [activePage, setActivePage] = useState(step)
|
|
const ref = useRef<PagerView>(null)
|
|
|
|
if (step !== activePage) {
|
|
setActivePage(step)
|
|
}
|
|
|
|
/*
|
|
* In an effect rather than inline above: driving the pager is a side effect,
|
|
* and reading a ref during render is a Rules of React violation. `initialPage`
|
|
* already covers the first render, so the mount run is a no-op.
|
|
*/
|
|
useEffect(() => {
|
|
ref.current?.setPage(step)
|
|
}, [step])
|
|
|
|
const images = [PROP_1[t.name], PROP_2[t.name], PROP_3[t.name]]
|
|
|
|
return (
|
|
<View style={[a.h_full, {marginHorizontal: tokens.space.xl * -1}]}>
|
|
<PagerView
|
|
ref={ref}
|
|
style={[a.flex_1]}
|
|
initialPage={step}
|
|
onPageSelected={(evt: PagerViewOnPageSelectedEvent) => {
|
|
const page = evt.nativeEvent.position as 0 | 1 | 2
|
|
if (step !== page) {
|
|
setActivePage(page)
|
|
setStep(page)
|
|
}
|
|
}}>
|
|
{([0, 1, 2] as const).map(page => (
|
|
<Page
|
|
key={page}
|
|
page={page}
|
|
image={images[page]}
|
|
avatarUri={avatarUri}
|
|
/>
|
|
))}
|
|
</PagerView>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function Page({
|
|
page,
|
|
image,
|
|
avatarUri,
|
|
}: {
|
|
page: 0 | 1 | 2
|
|
image: string
|
|
avatarUri?: string
|
|
}) {
|
|
const {_} = useLingui()
|
|
const t = useTheme()
|
|
const {title, description, alt} = useValuePropText(page)
|
|
|
|
return (
|
|
<View key={page}>
|
|
<View
|
|
style={[
|
|
a.relative,
|
|
a.align_center,
|
|
a.justify_center,
|
|
a.pointer_events_none,
|
|
]}>
|
|
<Image
|
|
source={image}
|
|
style={[a.w_full, a.aspect_square]}
|
|
alt={alt}
|
|
accessibilityIgnoresInvertColors={false} // I guess we do need it to blend into the background
|
|
useAppleWebpCodec
|
|
/>
|
|
{page === 1 && (
|
|
<Image
|
|
source={avatarUri}
|
|
style={[
|
|
a.z_10,
|
|
a.absolute,
|
|
a.rounded_full,
|
|
{
|
|
width: `${(80 / 393) * 100}%`,
|
|
height: `${(80 / 393) * 100}%`,
|
|
},
|
|
]}
|
|
accessibilityIgnoresInvertColors
|
|
useAppleWebpCodec
|
|
alt={_(msg`Your profile picture`)}
|
|
/>
|
|
)}
|
|
</View>
|
|
|
|
<View style={[a.mt_4xl, a.gap_2xl, a.px_xl, a.align_center]}>
|
|
<View style={[a.flex_row, a.gap_sm]}>
|
|
<Dot active={page === 0} />
|
|
<Dot active={page === 1} />
|
|
<Dot active={page === 2} />
|
|
</View>
|
|
|
|
<View style={[a.gap_sm]}>
|
|
<Text style={[a.font_bold, a.text_3xl, a.text_center]}>{title}</Text>
|
|
<Text
|
|
style={[
|
|
t.atoms.text_contrast_medium,
|
|
a.text_md,
|
|
a.leading_snug,
|
|
a.text_center,
|
|
]}>
|
|
{description}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|