46 lines
2.0 KiB
TypeScript
46 lines
2.0 KiB
TypeScript
// Metro module 11654 (f11655).
|
|
import { useMemo, useRef, useCallback } from "react";
|
|
import { View } from "react-native";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { isIOS } from "../../../../_bundle/Module501";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import GuildPowerupsSectionHeader from "./GuildPowerupsSectionHeader";
|
|
import { intl } from "../../../../intl/index.native";
|
|
import GuildPowerups_messages from "../GuildPowerups.messages";
|
|
import { MarketingCardsScroller } from "../../../guild_boosting/native/marketing_redesign/MarketingCardsScroller";
|
|
import GuildPowerupsLevelCard from "./GuildPowerupsLevelCard";
|
|
const PX_16 = Module712.space.PX_16;
|
|
const useStyles = createStyles({
|
|
cardContainer: {
|
|
width: 250,
|
|
marginEnd: PX_16,
|
|
flex: 1
|
|
},
|
|
scroller: {
|
|
height: isIOS() ? 300 : 325,
|
|
paddingBottom: Module712.space.PX_8
|
|
},
|
|
scrollerContent: {
|
|
paddingHorizontal: Module712.space.PX_16
|
|
}
|
|
});
|
|
export default function GuildPowerupsLevelsSection(props) {
|
|
let ref;
|
|
const { guildId, listings } = props;
|
|
ref = void 0;
|
|
const styles = useStyles();
|
|
const memo = useMemo(() => listings.filter((listing) => listing.type === "singleLevel").map((item) => item.powerup), [listings]);
|
|
ref = useRef(false);
|
|
const callback = useCallback((a0) => {
|
|
ref.current = a0;
|
|
}, []);
|
|
return <>
|
|
<GuildPowerupsSectionHeader title={intl.string(GuildPowerups_messages["TXY/b0"])} description={intl.string(GuildPowerups_messages.aJv4PB)} />
|
|
<MarketingCardsScroller cardMarginRight={PX_16} cardWidth={250} contentContainerStyle={styles.scrollerContent} itemCount={memo.length} onScrollingChange={callback} style={styles.scroller}>
|
|
{memo.map((item, a1) => <View key={item.skuId} style={styles.cardContainer}>
|
|
<GuildPowerupsLevelCard guildId={guildId} powerup={item} nextPowerup={memo[a1 + 1]} index={a1} isScrollingRef={ref} />
|
|
</View>)}
|
|
</MarketingCardsScroller>
|
|
</>;
|
|
};
|