87 lines
3.3 KiB
TypeScript
87 lines
3.3 KiB
TypeScript
// Metro module 8727 (f8728).
|
|
import { memo } from "react";
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useProductPurchaseState } from "../hooks/useProductPurchaseState";
|
|
import useIsVariantColorLight from "../hooks/useIsVariantColorLight";
|
|
import { CheckmarkSmallIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkSmallIcon";
|
|
import { PlusSmallIcon } from "../../../design/components/Icon/native/redesign/generated/PlusSmallIcon";
|
|
import { useDefaultVariantIndex } from "../hooks/useDefaultVariantIndex";
|
|
import { getIsVariantProduct } from "../utils/CollectiblesProductUtils";
|
|
let useStyles, useStyles2, VariantCheckmark, VariantOverflowOption;
|
|
const VariantOption = function VariantOption(props) {
|
|
const { variant, zIndex } = props;
|
|
const styles2 = useStyles2(props.isSelected);
|
|
return <View style={[styles2.variantOption, {
|
|
zIndex
|
|
}]}>
|
|
<View style={[styles2.variantOptionInner, {
|
|
backgroundColor: variant.variantValue
|
|
}]}>
|
|
{useProductPurchaseState(variant).isPurchased && <VariantCheckmark variant={variant} />}
|
|
</View>
|
|
</View>;
|
|
};
|
|
VariantCheckmark = function VariantCheckmark(props) {
|
|
return <CheckmarkSmallIcon color={useIsVariantColorLight(props.variant) ? Module712.colors.BLACK : Module712.colors.WHITE} size="xxs" />;
|
|
};
|
|
VariantOverflowOption = function VariantOverflowOption(props) {
|
|
const zIndex = props.zIndex;
|
|
const styles2 = useStyles2(props.isSelected);
|
|
return <View style={[styles2.variantOption, {
|
|
zIndex
|
|
}]}>
|
|
<View style={[styles2.variantOptionInner, styles2.variantOverflowInner]}>
|
|
<PlusSmallIcon color={Module712.colors.WHITE} size="xxs" />
|
|
</View>
|
|
</View>;
|
|
};
|
|
useStyles = createStyles({
|
|
variantsContainer: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
paddingStart: Module712.space.PX_4
|
|
}
|
|
});
|
|
useStyles2 = createStyles((a0) => ({
|
|
variantOption: {
|
|
marginStart: -Module712.space.PX_4,
|
|
width: 14,
|
|
height: 14,
|
|
borderWidth: 1,
|
|
borderColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
borderRadius: Module712.radii.round,
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
variantOptionInner: {
|
|
width: "100%",
|
|
height: "100%",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderRadius: Module712.radii.round,
|
|
borderWidth: a0 ? 1 : 0,
|
|
borderColor: Module712.colors.BUTTON_OUTLINE_PRIMARY_TEXT
|
|
},
|
|
variantOverflowInner: {
|
|
backgroundColor: Module712.colors.ICON_MUTED
|
|
}
|
|
}));
|
|
const r42 = memo(function CardProductVariants(props) {
|
|
const product = props.product;
|
|
const styles = useStyles();
|
|
const defaultVariantIndex = useDefaultVariantIndex(product);
|
|
if (getIsVariantProduct(product)) {
|
|
const length = product.variants.length;
|
|
const r24 = length > 4 ? 3 : length;
|
|
return <View style={styles.variantsContainer}>
|
|
{product.variants.slice(0, r24).map((item, index) => <VariantOption key={item.variantValue} variant={item} isSelected={index === defaultVariantIndex} zIndex={4 - Math.abs(defaultVariantIndex - index)} />)}
|
|
{r24 !== length && <VariantOverflowOption isSelected={defaultVariantIndex >= 3} zIndex={defaultVariantIndex >= 3 ? 4 : 0} />}
|
|
</View>;
|
|
}
|
|
return null;
|
|
});
|
|
export default r42;
|