105 lines
3.9 KiB
TypeScript
105 lines
3.9 KiB
TypeScript
// Metro module 9425 (f9426).
|
|
import { View } from "react-native";
|
|
import { ExpressionSourceGuildRecord } from "../../../emojis/records/ExpressionSourceRecord";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import GuildIcon, { GuildIconSizes } from "../../../guild/native/GuildIcon";
|
|
import AvatarUtils from "../../../../utils/AvatarUtils";
|
|
import FastImage from "../../../../components_native/common/FastImage";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
|
|
import { handleJoinGuild } from "../../../guild/GuildUtils";
|
|
import GuildBadge from "../../../guild/native/GuildBadge";
|
|
import { Icon } from "../../../../design/void/native";
|
|
const useStyles = createStyles({
|
|
guildDetailsContainer: {
|
|
flexDirection: "column"
|
|
},
|
|
guildDetailsContent: {
|
|
flexDirection: "row",
|
|
marginTop: 8,
|
|
alignItems: "center"
|
|
},
|
|
guildIcon: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: Module712.radii.sm,
|
|
marginRight: 12
|
|
},
|
|
guildNameAndOnlineMembers: {
|
|
flexDirection: "column"
|
|
},
|
|
guildNameWrapper: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginRight: 32
|
|
},
|
|
guildPartnerIcon: {
|
|
marginRight: 8
|
|
},
|
|
guildDescriptionSection: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginTop: 4
|
|
},
|
|
dotSeparator: {
|
|
width: 4,
|
|
height: 4,
|
|
borderRadius: Module712.radii.xs,
|
|
marginRight: 8,
|
|
marginLeft: 8,
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED
|
|
},
|
|
joinGuildButton: {
|
|
borderRadius: Module712.radii.sm,
|
|
borderColor: Module712.colors.BORDER_STRONG,
|
|
borderWidth: 1,
|
|
paddingHorizontal: 4,
|
|
paddingBottom: 2
|
|
}
|
|
});
|
|
export const ExpressionGuildDetails = (props) => {
|
|
const { guild, title, hasJoinedGuild, showingJoinGuildCta } = props;
|
|
const styles = useStyles();
|
|
const fromGuildType = ExpressionSourceGuildRecord.createFromGuildType(guild);
|
|
const isDiscoverable = fromGuildType.isDiscoverable();
|
|
const r39 = !isDiscoverable && !hasJoinedGuild ? <FastImage style={styles.guildIcon} source={AvatarUtils.getGuildIconSource({
|
|
id: guild.id,
|
|
icon: guild.icon,
|
|
canAnimate: true,
|
|
size: 32
|
|
})} /> : <GuildIcon style={styles.guildIcon} guild={fromGuildType} size={GuildIconSizes.XLARGE} animate />;
|
|
const r62 = [<Text variant="eyebrow" color="text-default">{title}</Text>, ,];
|
|
r62[1] = <View style={styles.guildDetailsContent}>
|
|
{r39}
|
|
<View style={styles.guildNameAndOnlineMembers}>
|
|
<View style={styles.guildNameWrapper}>
|
|
<GuildBadge guild={guild} style={styles.guildPartnerIcon} size={Icon.Sizes.REFRESH_SMALL_16} disableColor />
|
|
<Text variant="text-md/bold" color="mobile-text-heading-primary">{guild.name}</Text>
|
|
</View>
|
|
<View style={styles.guildDescriptionSection}>
|
|
{isDiscoverable && fromGuildType.presenceCount != null ? <>
|
|
<Text variant="text-xs/medium" color="text-default">
|
|
{intl.format(t["LC+S+m"], {
|
|
membersOnline: fromGuildType.presenceCount
|
|
})}
|
|
</Text>
|
|
<View style={styles.dotSeparator} />
|
|
{!hasJoinedGuild && !showingJoinGuildCta ? <PressableOpacity style={styles.joinGuildButton} onPress={() => handleJoinGuild(guild.id)}>
|
|
<Text variant="text-xs/medium" color="text-default">
|
|
{intl.string(t.riu2R5)}
|
|
</Text>
|
|
</PressableOpacity> : <Text variant="text-xs/medium" color="text-default">
|
|
{intl.string(t.inyJqO)}
|
|
</Text>}
|
|
</> : <Text variant="text-xs/medium" color="text-default">
|
|
{intl.string(t.H29mx4)}
|
|
</Text>}
|
|
</View>
|
|
</View>
|
|
</View>;
|
|
return <View style={styles.guildDetailsContainer}>{r62}</View>;
|
|
};
|
|
export default ExpressionGuildDetails;
|