yeet

modules/collectibles/native/ProductDetailsActionSheetVariants.tsx

@@ -0,0 +1,97 @@
+// 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;
+};