98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
// Metro module 8763 (f8764).
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useProductPurchaseState } from "../hooks/useProductPurchaseState";
|
|
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import useIsVariantColorLight from "../hooks/useIsVariantColorLight";
|
|
import { CheckmarkSmallIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkSmallIcon";
|
|
import { getIsVariantProduct } from "../utils/CollectiblesProductUtils";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
let useStyles, useStyles2, VariantCheckmark;
|
|
const VariantOption = function VariantOption(props) {
|
|
const { variant, isSelected, onSelect: onSelect2 } = props;
|
|
const styles2 = useStyles2(isSelected);
|
|
let isPurchased = useProductPurchaseState(variant).isPurchased;
|
|
const accessibilityLabel = isPurchased ? intl.formatToPlainString(t["SfQB4+"], {
|
|
variantLabel: variant.name
|
|
}) : variant.name;
|
|
if (isPurchased) {
|
|
isPurchased = <VariantCheckmark variant={variant} />;
|
|
}
|
|
return <PressableOpacity accessibilityRole="button" accessibilityLabel={accessibilityLabel} accessibilityState={{
|
|
selected: isSelected
|
|
}} onPress={onSelect2} style={styles2.variantOption}>
|
|
<View style={[styles2.variantOptionInner, {
|
|
backgroundColor: variant.variantValue
|
|
}]}>{isPurchased}</View>
|
|
</PressableOpacity>;
|
|
};
|
|
VariantCheckmark = function VariantCheckmark(props) {
|
|
return <CheckmarkSmallIcon color={useIsVariantColorLight(props.variant) ? Module712.colors.BLACK : Module712.colors.WHITE} size="md" />;
|
|
};
|
|
useStyles = createStyles({
|
|
container: {
|
|
flex: 1,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
marginTop: Module712.space.PX_16,
|
|
marginHorizontal: Module712.space.PX_16,
|
|
gap: Module712.space.PX_8
|
|
},
|
|
headerRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_12
|
|
},
|
|
variantsContainer: {
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_12
|
|
},
|
|
text: {
|
|
flexGrow: 1,
|
|
flexShrink: 1,
|
|
minWidth: 28
|
|
}
|
|
});
|
|
useStyles2 = createStyles((a0) => ({
|
|
variantOption: {
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: Module712.radii.round,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderWidth: 1,
|
|
borderColor: a0 ? Module712.colors.BUTTON_OUTLINE_PRIMARY_TEXT : Module712.colors.BORDER_STRONG
|
|
},
|
|
variantOptionInner: {
|
|
width: "100%",
|
|
height: "100%",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderRadius: Module712.radii.round,
|
|
borderWidth: 1,
|
|
borderColor: Module712.colors.BACKGROUND_BASE_LOW
|
|
}
|
|
}));
|
|
export default function ProductDetailsActionSheetVariants(props) {
|
|
const { product, selectedVariantIndex, onVariantSelect } = props;
|
|
const styles = useStyles();
|
|
return getIsVariantProduct(product) ? <View style={styles.container}>
|
|
<View style={styles.headerRow}>
|
|
<Text variant="text-md/bold" color="mobile-text-heading-primary">
|
|
{intl.string(t.wbgaj6)}
|
|
</Text>
|
|
{product.variants.length > selectedVariantIndex && <Text variant="text-md/medium" color="text-default" lineClamp={1} style={styles.text}>{product.variants[selectedVariantIndex].variantLabel}</Text>}
|
|
</View>
|
|
<View style={styles.variantsContainer}>
|
|
{product.variants.map((a0, index) => {
|
|
return <VariantOption key={a0.variantValue} variant={a0} isSelected={selectedVariantIndex === index} onSelect={() => onVariantSelect(index)} />;
|
|
})}
|
|
</View>
|
|
</View> : null;
|
|
};
|