116 lines
4.3 KiB
TypeScript
116 lines
4.3 KiB
TypeScript
// Metro module 8670 (f8671).
|
|
import { Pressable, View, StyleSheet } from "react-native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import ToastActionCreators from "../../toast/native/ToastActionCreators";
|
|
import { HeartIcon } from "../../../design/components/Icon/native/redesign/generated/HeartIcon";
|
|
import { useThemeContext } from "../../../_bundle/Module3901";
|
|
import { useUserProfileColors } from "../../user_profile/hooks/native/useUserProfileColors";
|
|
import { useToken } from "../../../design/tokens/native/useToken";
|
|
import { WishlistItemSource } from "../hooks/useWishlistHooks";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { isNotNullish } from "../../../utils/GlobalUtils";
|
|
import { CheckmarkLargeBoldIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkLargeBoldIcon";
|
|
let useStyles;
|
|
const SourceIcon = function SourceIcon(props) {
|
|
const toastText = props.toastText;
|
|
return <Pressable style={useStyles().sourceIcon} onPress={function onPress() {
|
|
ToastActionCreators.open({
|
|
key: "WISHLIST_SOURCE_ICON",
|
|
content: toastText
|
|
});
|
|
}} accessible={false} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
|
|
<HeartIcon color={Module712.colors.INTERACTIVE_ICON_DEFAULT} size="md" />
|
|
</Pressable>;
|
|
};
|
|
useStyles = createStyles({
|
|
card: {
|
|
borderWidth: 1,
|
|
borderRadius: Module712.radii.lg,
|
|
borderColor: Module712.colors.BORDER_MUTED,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
overflow: "hidden"
|
|
},
|
|
ownedOverlay: {
|
|
...StyleSheet.absoluteFillObject,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
zIndex: 2,
|
|
shadowOpacity: 0.5,
|
|
shadowRadius: 6,
|
|
elevation: 6
|
|
},
|
|
previewWrap: {
|
|
width: "100%",
|
|
height: "100%",
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
ownedCard: {
|
|
opacity: 0.5
|
|
},
|
|
sourceIcon: {
|
|
position: "absolute",
|
|
top: Module712.space.PX_8,
|
|
right: Module712.space.PX_8,
|
|
zIndex: 1
|
|
}
|
|
});
|
|
export default function WishlistItemCardBase(props) {
|
|
const { onPress: onPress2, accessibilityLabel, renderPreview, source, size = 170 } = props;
|
|
let isOwned = props.isOwned;
|
|
if (isOwned === void 0) {
|
|
isOwned = false;
|
|
}
|
|
const { accessibilityHidden, recipientName } = props;
|
|
const styles = useStyles();
|
|
const themeContext = useThemeContext();
|
|
const { theme, primaryColor } = themeContext;
|
|
const containerBackground = useUserProfileColors({
|
|
theme,
|
|
primaryColor,
|
|
secondaryColor: themeContext.secondaryColor
|
|
}).containerBackground;
|
|
let backgroundColor = useToken(Module712.colors.BG_SURFACE_RAISED);
|
|
if (primaryColor != null) {
|
|
backgroundColor = containerBackground;
|
|
}
|
|
const style = [styles.card, {
|
|
backgroundColor
|
|
}, typeof size === "object" ? {
|
|
width: size.width,
|
|
height: size.height
|
|
} : {
|
|
width: size,
|
|
aspectRatio: 1
|
|
}];
|
|
const WISHLIST = WishlistItemSource.WISHLIST;
|
|
const toastText2 = intl.formatToPlainString(t.p3RmJF, {
|
|
username: recipientName
|
|
});
|
|
const r61 = isOwned ? intl.string(t["6cfuDj"]) : null;
|
|
let r70 = source === WISHLIST;
|
|
const accessibilityLabel2 = [accessibilityLabel, r61, r70 ? toastText2 : null].filter(isNotNullish).join(", ");
|
|
const r94 = <View style={styles.ownedOverlay} pointerEvents="none" accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
|
|
<CheckmarkLargeBoldIcon color={Module712.colors.WHITE} size="custom" style={{
|
|
width: 40,
|
|
height: 40
|
|
}} />
|
|
</View>;
|
|
const r103 = [<View style={[styles.previewWrap, isOwned ? styles.ownedCard : isOwned]} aria-hidden>
|
|
{renderPreview()}
|
|
</View>, , ,];
|
|
if (isOwned) {
|
|
isOwned = r94;
|
|
}
|
|
r103[1] = isOwned;
|
|
if (r70) {
|
|
r70 = <SourceIcon toastText={toastText2} />;
|
|
}
|
|
r103[2] = r70;
|
|
const r107 = <>{r103}</>;
|
|
return onPress2 == null ? <View style={style} accessibilityElementsHidden={accessibilityHidden} importantForAccessibility={accessibilityHidden ? "no-hide-descendants" : "auto"}>{r107}</View> : <Pressable accessibilityRole="button" accessibilityLabel={accessibilityLabel2} style={style} onPress={onPress2} accessibilityElementsHidden={accessibilityHidden} importantForAccessibility={accessibilityHidden ? "no-hide-descendants" : "auto"}>{r107}</Pressable>;
|
|
};
|
|
export const DEFAULT_ITEM_SIZE = 170;
|