85 lines
3.8 KiB
TypeScript
85 lines
3.8 KiB
TypeScript
// Metro module 13724 (f13725).
|
|
import { memo, useCallback, useMemo } from "react";
|
|
import { View } from "react-native";
|
|
import { isProfileEffectRecord } from "../../records/ProfileEffectRecord";
|
|
import { SAMPLE_PROFILE_ASPECT_RATIO } from "../../native/CollectiblesPreviewConstants";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import { GUTTER_SIZE, ROW_SIZE } from "../../native/useCollectibleListLayout";
|
|
import { NONE_ITEM, SHOP_ITEM } from "../useProfileEffectSections";
|
|
import { EditCollectiblesListItemNone, EditCollectiblesListItemShop, EditCollectiblesListItemProduct } from "../../native/CollectiblesEditUserProfileListItems";
|
|
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
|
|
import useProfileEffect from "../useProfileEffect";
|
|
import FastImage from "../../../../components_native/common/FastImage";
|
|
import Module8695 from "../../../../_bundle/Module8695";
|
|
import ProfileEffect from "./ProfileEffect";
|
|
let Component;
|
|
const useStyles = createStyles({
|
|
row: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: GUTTER_SIZE
|
|
},
|
|
rowSpacer: {
|
|
height: GUTTER_SIZE
|
|
},
|
|
profileEffect: {
|
|
overflow: "hidden",
|
|
width: "100%",
|
|
height: "100%"
|
|
},
|
|
sampleProfile: {
|
|
aspectRatio: SAMPLE_PROFILE_ASPECT_RATIO,
|
|
width: "100%"
|
|
}
|
|
});
|
|
const r46 = memo((a0) => {
|
|
const { items, selectedSkuId, setSelectedProfileEffect, guildId, isTryItOut: isTryItOut2 = false } = a0;
|
|
const isTryItOut = isTryItOut2;
|
|
const size = a0.size;
|
|
const styles = useStyles();
|
|
const callback = useCallback(() => {
|
|
setSelectedProfileEffect(null);
|
|
}, [setSelectedProfileEffect]);
|
|
return <>
|
|
<View style={styles.row}>
|
|
{[...items, null, null].slice(0, ROW_SIZE).map((a0, index) => {
|
|
if (a0 === NONE_ITEM) {
|
|
return <EditCollectiblesListItemNone key="none" size={size} onPress={callback} isSelected={selectedSkuId == null} asDefault={guildId != null} />;
|
|
}
|
|
if (a0 === SHOP_ITEM) {
|
|
return <EditCollectiblesListItemShop key="shop" size={size} analyticsSource={AnalyticsLocation.EDIT_PROFILE_EFFECT_SHEET} />;
|
|
}
|
|
if (isProfileEffectRecord(a0)) {
|
|
return <Component key={a0.skuId} item={a0} isSelected={selectedSkuId === a0.skuId} setSelectedProfileEffect={setSelectedProfileEffect} isTryItOut={isTryItOut} size={size} />;
|
|
}
|
|
return <View key={index} style={{
|
|
height: size,
|
|
width: size
|
|
}} />;
|
|
})}
|
|
</View>
|
|
<View style={styles.rowSpacer} />
|
|
</>;
|
|
});
|
|
r46.displayName = "EditProfileEffectRow";
|
|
Component = memo(({ item, isSelected, setSelectedProfileEffect: setSelectedProfileEffect2, isTryItOut: isTryItOut2 = false, size: size2 }) => {
|
|
const styles = useStyles();
|
|
const profileEffect = useProfileEffect(item.skuId);
|
|
let c20671_2 = profileEffect;
|
|
return <EditCollectiblesListItemProduct skuId={item.skuId} isSelected={isSelected} onPress={useCallback(() => {
|
|
setSelectedProfileEffect2(item);
|
|
}, [setSelectedProfileEffect2, item])} isTryItOut={isTryItOut2} size={size2} accessibilityLabel={profileEffect?.accessibilityLabel}>
|
|
<View style={[styles.profileEffect, {
|
|
borderRadius: 6
|
|
}]} accessible={false} importantForAccessibility="no">
|
|
<FastImage source={{
|
|
uri: Module8695
|
|
}} style={styles.sampleProfile} resizeMode="cover" />
|
|
<ProfileEffect skuId={item.skuId} bannerAdjustment={0} useThumbnail thumbnailUrlOverride={useMemo(() => c20671_2?.thumbnailPreviewSrc == null ? c20671_2?.thumbnailPreviewSrc : `${c20671_2.thumbnailPreviewSrc}?width=100&height=195`, [profileEffect?.thumbnailPreviewSrc])} />
|
|
</View>
|
|
</EditCollectiblesListItemProduct>;
|
|
});
|
|
Component.displayName = "EditProfileEffectItem";
|
|
export { r46 as EditProfileEffectRow };
|