310 lines
10 KiB
TypeScript
310 lines
10 KiB
TypeScript
// Metro module 15237 (f15238).
|
|
import { useState, useMemo, useCallback } from "react";
|
|
import { Image as Image2, View } from "react-native";
|
|
import AccessibilityStore from "../../a11y/AccessibilityStore";
|
|
import GuildStore from "../../../stores/GuildStore";
|
|
import { AnalyticEvents, GuildFeatures, JoinGuildSources } from "../../../Constants";
|
|
import { getWindowDimensions } from "../../screen/useWindowDimensions.native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useStateFromStores } from "../../../_bundle/Module589";
|
|
import AvatarUtils from "../../../utils/AvatarUtils";
|
|
import { getDevicePixelRatio } from "../../image_upload/ImageLoaderUtils";
|
|
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
|
|
import GuildActionCreators from "../../../actions/GuildActionCreators";
|
|
import { transitionToGuild } from "../../routing/transitionToGuild.native";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import ClipView, { CutoutShape } from "../../../design/components/Icon/native/ClipView";
|
|
import GuildBadgeV2 from "../../guild/native/GuildBadgeV2";
|
|
import { Icon } from "../../../design/void/native";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
import { ContextMenu } from "../../../design/components/ContextMenu/native/ContextMenu.native";
|
|
import { IconButton } from "../../../design/components/Button/native/IconButton.native";
|
|
import { MoreHorizontalIcon } from "../../../design/components/Icon/native/redesign/generated/MoreHorizontalIcon";
|
|
const useStyles = createStyles((a0) => {
|
|
const r7 = a0 === "one-column";
|
|
const width = r7 ? 12 : 10;
|
|
let r1 = 50;
|
|
const width2 = r7 ? 56 : 50;
|
|
if (r7) {
|
|
r1 = 56;
|
|
}
|
|
const r5 = r1 / 2;
|
|
const borderRadius = width / 2;
|
|
return {
|
|
card: {
|
|
backgroundColor: Module712.colors.BG_SURFACE_RAISED,
|
|
borderColor: Module712.colors.BORDER_MUTED,
|
|
borderWidth: 1,
|
|
borderRadius: Module712.radii.lg,
|
|
overflow: "hidden",
|
|
flex: 1,
|
|
marginBottom: Module712.space.PX_16
|
|
},
|
|
bannerContainer: {
|
|
height: r7 ? 88 : 80,
|
|
backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT
|
|
},
|
|
banner: {
|
|
flex: 1
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
justifyContent: "space-between",
|
|
marginTop: r7 ? 32 : 28,
|
|
marginBottom: Module712.space.PX_12,
|
|
marginHorizontal: Module712.space.PX_12
|
|
},
|
|
guildIconContainer: {
|
|
position: "absolute",
|
|
top: r7 ? 88 - r5 - 2 : 80 - r5 - 2,
|
|
left: 16
|
|
},
|
|
guildIcon: {
|
|
width: width2,
|
|
height: width2,
|
|
borderRadius: Module712.radii.lg
|
|
},
|
|
guildNameRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: Module712.space.PX_4
|
|
},
|
|
guildBadge: {
|
|
marginRight: r7 ? Module712.space.PX_8 : Module712.space.PX_4
|
|
},
|
|
guildName: {
|
|
flex: 1,
|
|
minWidth: 0
|
|
},
|
|
description: {
|
|
marginBottom: r7 ? Module712.space.PX_8 : Module712.space.PX_4
|
|
},
|
|
memberCounts: {
|
|
flexDirection: "row",
|
|
gap: Module712.space.PX_16
|
|
},
|
|
memberCount: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: r7 ? Module712.space.PX_12 : Module712.space.PX_8,
|
|
gap: 6
|
|
},
|
|
dot: {
|
|
width,
|
|
height: width,
|
|
borderRadius,
|
|
backgroundColor: Module712.colors.TEXT_STATUS_OFFLINE
|
|
},
|
|
dotOnline: {
|
|
width,
|
|
height: width,
|
|
borderRadius,
|
|
backgroundColor: Module712.colors.TEXT_STATUS_ONLINE
|
|
},
|
|
dismissButton: {
|
|
position: "absolute",
|
|
top: 8,
|
|
right: 8,
|
|
width: 2 * Module712.radii.lg,
|
|
height: 2 * Module712.radii.lg,
|
|
borderRadius: Module712.radii.lg,
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
}
|
|
};
|
|
});
|
|
export default function GameCommunityMultiGuildUpsellCard(props) {
|
|
let stateFromStores2, c21797_8, c21797_9;
|
|
const { guild, gameId, variant, onDismiss } = props;
|
|
stateFromStores2 = void 0;
|
|
c21797_8 = void 0;
|
|
c21797_9 = void 0;
|
|
const styles = useStyles(variant);
|
|
const [state, setState] = useState(false);
|
|
const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
|
|
stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guild.id) != null);
|
|
let r26 = variant === "one-column";
|
|
let r0 = 50;
|
|
const r2 = r26 ? 56 : 50;
|
|
c21797_8 = r2;
|
|
const memo = useMemo(() => {
|
|
let icon = guild.icon;
|
|
if (icon == null) {
|
|
icon = null;
|
|
}
|
|
return AvatarUtils.getGuildIconSource({
|
|
id: guild.id,
|
|
icon,
|
|
canAnimate: !stateFromStores,
|
|
size: c21797_8 * getDevicePixelRatio()
|
|
});
|
|
}, [guild.id, guild.icon, stateFromStores, r2]);
|
|
const r58 = stateFromStores ? !stateFromStores : guild.features.has(GuildFeatures.ANIMATED_BANNER) === true;
|
|
c21797_9 = r58;
|
|
const memo2 = useMemo(() => {
|
|
let r12;
|
|
const { splash, banner } = guild;
|
|
if (splash != null) {
|
|
const width = getWindowDimensions().width;
|
|
r12 = AvatarUtils.getGuildSplashSource({
|
|
id: guild.id,
|
|
splash,
|
|
size: (variant !== "one-column" ? width / 2 : width) * getDevicePixelRatio()
|
|
});
|
|
} else {
|
|
r12 = banner != null ? AvatarUtils.getAnimatableSourceWithFallback(c21797_9, (a0) => AvatarUtils.getGuildBannerSource({
|
|
id: guild.id,
|
|
banner
|
|
}, a0)) : null;
|
|
}
|
|
return r12;
|
|
}, [guild.id, guild.splash, guild.banner, r58, variant]);
|
|
const callback2 = useCallback(async () => {
|
|
let c27970_2;
|
|
let c27970_3 = 0;
|
|
L16: {
|
|
try {
|
|
if (stateFromStores2) {
|
|
break L16;
|
|
}
|
|
if (state) {
|
|
break L16;
|
|
}
|
|
setState(true);
|
|
AnalyticsUtils.track(AnalyticEvents.GAME_COMMUNITY_MULTI_GUILD_UPSELL_CARD_JOINED, {
|
|
guild_id: guild.id,
|
|
game_id: gameId,
|
|
variant
|
|
});
|
|
c27970_3 = 1;
|
|
await GuildActionCreators.joinGuild(guild.id, {
|
|
source: JoinGuildSources.GAME_COMMUNITY_UPSELL,
|
|
autoNavigate: false
|
|
});
|
|
await GuildActionCreators.waitForGuild(guild.id);
|
|
c27970_3 = 0;
|
|
(0, setState)(false);
|
|
} catch ($e) {
|
|
const r29 = $e;
|
|
let r7 = r29;
|
|
c27970_2 = r29;
|
|
if (c27970_3 !== 0) {
|
|
while (true) {
|
|
try {
|
|
const r110 = c27970_2;
|
|
c27970_3 = 0;
|
|
(0, setState)(false);
|
|
throw r110;
|
|
} catch (r107) {
|
|
r7 = r107;
|
|
c27970_2 = r107;
|
|
if (c27970_3 === 0) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
throw r7;
|
|
}
|
|
return void 0;
|
|
}
|
|
}, [guild.id, stateFromStores2, state, gameId, variant]);
|
|
const callback = useCallback(() => {
|
|
transitionToGuild(guild.id);
|
|
}, [guild.id]);
|
|
const memo3 = useMemo(() => onDismiss == null ? [] : [{
|
|
label: intl.string(t.XW1okC),
|
|
variant: "destructive",
|
|
action: () => onDismiss(guild.id, gameId)
|
|
}], [guild.id, gameId, onDismiss]);
|
|
let presenceCount = guild.presenceCount;
|
|
if (presenceCount == null) {
|
|
presenceCount = 0;
|
|
}
|
|
let memberCount = guild.memberCount;
|
|
if (memberCount == null) {
|
|
memberCount = 0;
|
|
}
|
|
const { name, description } = guild;
|
|
if (r26) {
|
|
r0 = 56;
|
|
}
|
|
const r4 = r0 / 2;
|
|
const width = r2 + 8;
|
|
const r122 = [<View style={styles.bannerContainer}>
|
|
<ClipView style={styles.banner} cutouts={[{
|
|
shape: CutoutShape.RoundedRect,
|
|
x: 12,
|
|
y: (r26 ? 88 - r4 - 2 : 80 - r4 - 2) - 4,
|
|
width,
|
|
height: width,
|
|
cornerRadius: Module712.radii.lg + 4
|
|
}]}>
|
|
{memo2 != null ? <Image2 style={styles.banner} source={memo2} resizeMode="cover" /> : <View style={styles.banner} />}
|
|
</ClipView>
|
|
</View>, <View style={styles.guildIconContainer}>
|
|
<Image2 style={styles.guildIcon} source={memo} />
|
|
</View>, , ,];
|
|
const Sizes = Icon.Sizes;
|
|
const r165 = [<View>
|
|
<View style={styles.guildNameRow}>
|
|
<GuildBadgeV2 guild={guild} size={r26 ? Sizes.REFRESH_SMALL_16 : Sizes.EXTRA_SMALL} style={styles.guildBadge} />
|
|
<Text variant={r26 ? "heading-md/bold" : "heading-sm/bold"} color="mobile-text-heading-primary" accessibilityRole="header" style={styles.guildName} lineClamp={1}>{name}</Text>
|
|
</View>
|
|
{description != null && description.length > 0 && <Text variant={r26 ? "text-sm/medium" : "text-xs/medium"} style={styles.description} lineClamp={3}>{description}</Text>}
|
|
</View>, ,];
|
|
const r191 = [presenceCount > 0 && <View style={styles.memberCount}>
|
|
<View style={styles.dotOnline} />
|
|
<Text variant="text-xs/medium" color="text-subtle">
|
|
{intl.format(t["LC+S+m"], {
|
|
membersOnline: presenceCount
|
|
})}
|
|
</Text>
|
|
</View>, ,];
|
|
if (r26) {
|
|
r26 = memberCount > 0;
|
|
}
|
|
if (r26) {
|
|
r26 = <View style={styles.memberCount}>
|
|
<View style={styles.dot} />
|
|
<Text variant="text-xs/medium" color="text-subtle">
|
|
{intl.format(t.zRl6XR, {
|
|
count: memberCount
|
|
})}
|
|
</Text>
|
|
</View>;
|
|
}
|
|
r191[1] = r26;
|
|
r165[1] = <View>
|
|
<View style={styles.memberCounts}>{r191}</View>
|
|
<Button {...stateFromStores2 ? {
|
|
variant: "active",
|
|
size: "sm",
|
|
text: intl.string(t.KLOhbO),
|
|
onPress: callback,
|
|
grow: true
|
|
} : {
|
|
variant: "primary",
|
|
size: "sm",
|
|
loading: state,
|
|
text: intl.string(t.VJlc0S),
|
|
onPress: callback2,
|
|
grow: true
|
|
}} />
|
|
</View>;
|
|
r122[2] = <View style={styles.content}>{r165}</View>;
|
|
r122[3] = memo3.length > 0 && <View style={styles.dismissButton}>
|
|
<ContextMenu items={memo3}>
|
|
{(a0) => {
|
|
const { ref, ...rest } = a0;
|
|
return <IconButton ref={a0.ref} {...rest} icon={<MoreHorizontalIcon size="sm" />} size="sm" variant="secondary-overlay" accessibilityLabel={intl.string(t.ogxXGq)} />;
|
|
}}
|
|
</ContextMenu>
|
|
</View>;
|
|
return <View style={styles.card}>{r122}</View>;
|
|
};
|