112 lines
3.6 KiB
TypeScript
112 lines
3.6 KiB
TypeScript
// Metro module 9629 (f9630).
|
|
import { memo } from "react";
|
|
import { View } from "react-native";
|
|
import * as _StickerPickerConstants from "./StickerPickerConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { isStickerPackAnimated } from "../StickersUtils";
|
|
import { Icon } from "../../../design/void/native";
|
|
import Module9630 from "../../../_bundle/Module9630";
|
|
import Module9631 from "../../../_bundle/Module9631";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import StickerPackBanner from "./StickerPackBanner";
|
|
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
|
|
const { PADDING_HORIZONTAL, PADDING_VERTICAL } = _StickerPickerConstants;
|
|
const useStyles = createStyles({
|
|
section: {
|
|
paddingTop: PADDING_VERTICAL,
|
|
paddingHorizontal: PADDING_HORIZONTAL,
|
|
height: 36 + 2 * PADDING_VERTICAL,
|
|
justifyContent: "center",
|
|
overflow: "hidden",
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
|
|
},
|
|
label: {
|
|
flex: -1
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between"
|
|
},
|
|
bannerContainer: {
|
|
aspectRatio: 3.824074074074074,
|
|
marginVertical: -8,
|
|
width: "100%"
|
|
},
|
|
banner: {
|
|
height: "100%"
|
|
},
|
|
headline: {
|
|
height: 20,
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
},
|
|
iconContainer: {
|
|
marginLeft: 8,
|
|
height: 16,
|
|
width: 16,
|
|
borderRadius: Module712.radii.sm,
|
|
backgroundColor: Module712.colors.BORDER_SUBTLE,
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
icon: {
|
|
color: Module712.colors.INTERACTIVE_TEXT_DEFAULT
|
|
},
|
|
animatedIcon: {
|
|
position: "relative",
|
|
left: 1
|
|
},
|
|
premiumIcon: {
|
|
position: "relative",
|
|
left: -1
|
|
}
|
|
});
|
|
const r64 = memo(function(a0) {
|
|
const { stickerPack, style, onPress } = a0;
|
|
let withBanner = a0.withBanner;
|
|
if (withBanner === void 0) {
|
|
withBanner = false;
|
|
}
|
|
let withDescription = a0.withDescription;
|
|
if (withDescription === void 0) {
|
|
withDescription = false;
|
|
}
|
|
const styles = useStyles();
|
|
const r72 = [<View style={styles.header}>
|
|
<View style={styles.headline}>
|
|
<Text style={styles.label} lineClamp={1} variant="text-md/bold" color="mobile-text-heading-primary">{stickerPack.name}</Text>
|
|
{isStickerPackAnimated(stickerPack) && <View style={styles.iconContainer}>
|
|
<Icon source={Module9630} style={styles.animatedIcon} size={Icon.Sizes.EXTRA_SMALL} color={styles.icon.color} />
|
|
</View>}
|
|
<View style={styles.iconContainer}>
|
|
<Icon source={Module9631} style={styles.premiumIcon} size={Icon.Sizes.EXTRA_SMALL} color={styles.icon.color} />
|
|
</View>
|
|
</View>
|
|
</View>, , ,];
|
|
if (withDescription) {
|
|
withDescription = stickerPack.description != null;
|
|
}
|
|
if (withDescription) {
|
|
withDescription = <Text variant="text-sm/medium">{stickerPack.description}</Text>;
|
|
}
|
|
r72[1] = withDescription;
|
|
r72[2] = <Text lineClamp={1} variant="text-xs/medium" color="text-default">
|
|
{intl.format(t["0S3JpO"], {
|
|
numStickers: stickerPack.stickers.length
|
|
})}
|
|
</Text>;
|
|
const r97 = <>{r72}</>;
|
|
if (withBanner) {
|
|
withBanner = <StickerPackBanner stickerPack={stickerPack} containerStyle={styles.bannerContainer} style={styles.banner} />;
|
|
}
|
|
return <>
|
|
{withBanner}
|
|
{onPress != null ? <PressableOpacity style={[styles.section, style]} onPress={onPress} accessibilityRole="header">{r97}</PressableOpacity> : <View style={[styles.section, style]}>{r97}</View>}
|
|
</>;
|
|
});
|
|
export default r64;
|