59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
// Metro module 12485 (f12486).
|
|
import { useState, useCallback } from "react";
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import PremiumPerkCard, { usePerkCardHeight, PerkCardVariant, PERK_CARD_SIZES } from "./PremiumPerkCard";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import Carousel from "../../../components_native/common/Carousel";
|
|
import { CarouselPagination } from "../../../design/void/native";
|
|
const useStyles = createStyles({
|
|
title: {
|
|
marginLeft: 24
|
|
},
|
|
indicators: {
|
|
marginBottom: -36
|
|
},
|
|
carousel: {
|
|
marginTop: 16
|
|
},
|
|
carouselCard: {
|
|
marginLeft: 8
|
|
},
|
|
lastCarouselCard: {
|
|
marginRight: 8
|
|
}
|
|
});
|
|
export default function PremiumPerkCarousel(props) {
|
|
let length;
|
|
const { title, perks, style, onItemChange } = props;
|
|
length = void 0;
|
|
const styles = useStyles();
|
|
const perkCardHeight = usePerkCardHeight(PerkCardVariant.NARROW);
|
|
const [state, setState] = useState(0);
|
|
const callback = useCallback((a0) => {
|
|
if (a0 !== state) {
|
|
setState(a0);
|
|
if (onItemChange != null) {
|
|
onItemChange(a0);
|
|
}
|
|
}
|
|
}, [state, onItemChange]);
|
|
const width = PERK_CARD_SIZES[PerkCardVariant.NARROW].width;
|
|
length = perks.length;
|
|
return <View style={style}>
|
|
<Text style={styles.title} variant="heading-xl/extrabold" color="mobile-text-heading-primary">{title}</Text>
|
|
<Carousel style={[styles.carousel, {
|
|
height: perkCardHeight + 8
|
|
}]} width={width} onPageChange={callback} pageIndictor={false} scrollViewProps={{
|
|
overScrollMode: "always",
|
|
snapToInterval: width + 8 + 0.2,
|
|
snapToStart: true,
|
|
snapToAlignment: "start",
|
|
decelerationRate: "normal"
|
|
}}>
|
|
{perks.map((perk, index) => <PremiumPerkCard key={index} {...perk} variant={PerkCardVariant.NARROW} style={[styles.carouselCard, length - 1 === index ? styles.lastCarouselCard : null]} />)}
|
|
</Carousel>
|
|
<CarouselPagination containerStyle={styles.indicators} numberOfItems={perks.length} currentIndex={state} />
|
|
</View>;
|
|
};
|