68 lines
2.8 KiB
TypeScript
68 lines
2.8 KiB
TypeScript
// Metro module 13733 (f13734).
|
|
import * as Module19 from "react";
|
|
import { useCallback, useMemo } from "react";
|
|
import { View } from "react-native";
|
|
import { isNameplateRecord } from "../../records/NameplateRecord";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import { GUTTER_SIZE, ROW_SIZE } from "../../native/useCollectibleListLayout";
|
|
import { NONE_ITEM, SHOP_ITEM } from "../useNameplateSections";
|
|
import { EditCollectiblesListItemNone, EditCollectiblesListItemShop, EditCollectiblesListItemProduct } from "../../native/CollectiblesEditUserProfileListItems";
|
|
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
|
|
import { getNameplateData } from "../utils";
|
|
import Nameplate from "./Nameplate";
|
|
let Component;
|
|
const useStyles = createStyles({
|
|
row: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: GUTTER_SIZE
|
|
},
|
|
rowSpacer: {
|
|
height: GUTTER_SIZE
|
|
},
|
|
nameplate: {
|
|
overflow: "hidden"
|
|
}
|
|
});
|
|
const r42 = Module19.memo(({ items, selectedSkuId, setSelectedNameplate, guildId, size }) => {
|
|
const styles = useStyles();
|
|
const callback = useCallback(() => {
|
|
setSelectedNameplate(null);
|
|
}, [setSelectedNameplate]);
|
|
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_NAMEPLATE_SHEET} />;
|
|
}
|
|
if (isNameplateRecord(item)) {
|
|
return <Component key={item.skuId} nameplate={item} isSelected={selectedSkuId === item.skuId} setSelectedNameplate={setSelectedNameplate} size={size} />;
|
|
}
|
|
return <View key={index} style={{
|
|
height: size,
|
|
width: size
|
|
}} />;
|
|
})}
|
|
</View>
|
|
<View style={styles.rowSpacer} />
|
|
</>;
|
|
});
|
|
r42.displayName = "EditNameplateRow";
|
|
Component = Module19.memo(({ nameplate, isSelected, setSelectedNameplate: setSelectedNameplate2, size: size2 }) => {
|
|
const styles = useStyles();
|
|
const memo = useMemo(() => getNameplateData(nameplate), [nameplate]);
|
|
return <EditCollectiblesListItemProduct skuId={nameplate.skuId} isSelected={isSelected} onPress={useCallback(() => {
|
|
setSelectedNameplate2(nameplate);
|
|
}, [setSelectedNameplate2, nameplate])} size={size2} accessibilityLabel={nameplate.label}>
|
|
<Nameplate nameplate={memo} fullOpacity isSquarePreview style={[styles.nameplate, {
|
|
borderRadius: 6
|
|
}]} />
|
|
</EditCollectiblesListItemProduct>;
|
|
});
|
|
Component.displayName = "EditNameplateItem";
|
|
export { r42 as EditNameplateRow };
|