76 lines
3.3 KiB
TypeScript
76 lines
3.3 KiB
TypeScript
// Metro module 13728 (f13729).
|
|
import { memo, useCallback } from "react";
|
|
import { View } from "react-native";
|
|
import { isProfileFrameRecord } from "../../records/ProfileFrameRecord";
|
|
import { PROFILE_FRAME_ASPECT_RATIO } from "./ProfileFrameConstants";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import { GUTTER_SIZE, ROW_SIZE } from "../../native/useCollectibleListLayout";
|
|
import { NONE_ITEM, SHOP_ITEM } from "../hooks/useProfileFrameSections";
|
|
import { EditCollectiblesListItemNone, EditCollectiblesListItemShop, EditCollectiblesListItemProduct } from "../../native/CollectiblesEditUserProfileListItems";
|
|
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
|
|
import ProfileFrameSamplePreview from "./previews/ProfileFrameSamplePreview";
|
|
let Component;
|
|
const PX_8 = Module712.space.PX_8;
|
|
const useStyles = createStyles({
|
|
row: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: GUTTER_SIZE
|
|
},
|
|
rowSpacer: {
|
|
height: GUTTER_SIZE
|
|
},
|
|
previewContainer: {
|
|
width: "100%",
|
|
height: "100%",
|
|
paddingVertical: PX_8,
|
|
overflow: "hidden",
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
}
|
|
});
|
|
const r49 = memo(({ items, selectedSkuId, setSelectedProfileFrame, guildId, size }) => {
|
|
const styles = useStyles();
|
|
const callback = useCallback(() => {
|
|
setSelectedProfileFrame(null);
|
|
}, [setSelectedProfileFrame]);
|
|
return <>
|
|
<View style={styles.row}>
|
|
{[...items, null, null].slice(0, ROW_SIZE).map((item, index) => {
|
|
if (item === NONE_ITEM) {
|
|
return <EditCollectiblesListItemNone key="none" size={size} onPress={callback} isSelected={selectedSkuId == null} asDefault={guildId != null} />;
|
|
}
|
|
if (item === SHOP_ITEM) {
|
|
return <EditCollectiblesListItemShop key="shop" size={size} analyticsSource={AnalyticsLocation.EDIT_PROFILE_FRAME_SHEET} />;
|
|
}
|
|
if (isProfileFrameRecord(item)) {
|
|
return <Component key={item.skuId} profileFrame={item} isSelected={selectedSkuId === item.skuId} setSelectedProfileFrame={setSelectedProfileFrame} size={size} />;
|
|
}
|
|
return <View key={index} style={{
|
|
height: size,
|
|
width: size
|
|
}} />;
|
|
})}
|
|
</View>
|
|
<View style={styles.rowSpacer} />
|
|
</>;
|
|
});
|
|
r49.displayName = "EditProfileFrameRow";
|
|
Component = memo(({ profileFrame, isSelected, setSelectedProfileFrame: setSelectedProfileFrame2, size: size2 }) => {
|
|
const styles = useStyles();
|
|
return <EditCollectiblesListItemProduct skuId={profileFrame.skuId} isSelected={isSelected} onPress={useCallback(() => {
|
|
setSelectedProfileFrame2({
|
|
skuId: profileFrame.skuId,
|
|
type: profileFrame.type
|
|
});
|
|
}, [setSelectedProfileFrame2, profileFrame])} size={size2} accessibilityLabel={profileFrame.label}>
|
|
<View style={styles.previewContainer}>
|
|
<ProfileFrameSamplePreview profileFrame={profileFrame} previewWidth={size2 * PROFILE_FRAME_ASPECT_RATIO} previewHeight={size2 - 2 * PX_8} profileBackgroundColor={Module712.colors.BACKGROUND_BASE_LOW} />
|
|
</View>
|
|
</EditCollectiblesListItemProduct>;
|
|
});
|
|
Component.displayName = "EditProfileFrameItem";
|
|
export { r49 as EditProfileFrameRow };
|