102 lines
4.1 KiB
TypeScript
102 lines
4.1 KiB
TypeScript
// Metro module 13927 (f13928).
|
|
import { useCallback } from "react";
|
|
import { View } from "react-native";
|
|
import UserStore from "../../../stores/UserStore";
|
|
import FamilyCenterStore from "../FamilyCenterStore";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
|
|
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
|
|
import TouchableHitBox from "../../../design/void/TouchableHitBox/native/TouchableHitBox";
|
|
import { intl } from "../../../intl/index.native";
|
|
import FamilyCenter_messages from "../FamilyCenter.messages";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { Avatar, AvatarSizes } from "../../../design/void/native";
|
|
import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
flexWrap: "wrap",
|
|
gap: Module712.space.PX_8
|
|
},
|
|
section: {
|
|
flex: 1
|
|
},
|
|
avatarList: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
gap: Module712.space.PX_4,
|
|
flexWrap: "wrap",
|
|
paddingTop: Module712.space.PX_12,
|
|
paddingBottom: Module712.space.PX_12
|
|
},
|
|
touchableHitBox: {
|
|
width: "100%",
|
|
alignItems: "flex-start"
|
|
},
|
|
guildAvatar: {
|
|
borderRadius: Module712.radii.md,
|
|
borderColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGHEST
|
|
},
|
|
guildAvatarText: {
|
|
fontSize: 12
|
|
}
|
|
});
|
|
export default function FamilyCenterTopActivity() {
|
|
let r41;
|
|
let styles, stateFromStores, stateFromStores2;
|
|
L7: {
|
|
styles = useStyles();
|
|
stateFromStores = useStateFromStores([FamilyCenterStore], () => FamilyCenterStore.getTopUserActivities());
|
|
stateFromStores2 = useStateFromStores([FamilyCenterStore], () => FamilyCenterStore.getTopGuildActivities());
|
|
const callback2 = useCallback(() => {
|
|
ActionSheetActionCreators.openLazy(import("./FamilyCenterTopUsersBottomSheet"), "FamilyCenterTopUsers", {
|
|
topUserActivities: stateFromStores
|
|
});
|
|
}, [stateFromStores]);
|
|
const callback = useCallback(() => {
|
|
ActionSheetActionCreators.openLazy(import("./FamilyCenterTopServersBottomSheet"), "FamilyCenterTopServers", {
|
|
topGuildActivities: stateFromStores2
|
|
});
|
|
}, [stateFromStores2]);
|
|
if (stateFromStores.length === 0) {
|
|
const length = stateFromStores2.length;
|
|
r41 = null;
|
|
if (length === 0) {
|
|
break L7;
|
|
}
|
|
}
|
|
r41 = <View style={styles.container}>
|
|
{stateFromStores.length > 0 && <View style={styles.section}>
|
|
<TouchableHitBox style={styles.touchableHitBox} onPress={callback2} accessibilityRole="button" accessibilityLabel={intl.string(FamilyCenter_messages.BxbvS7)}>
|
|
<Text variant="text-sm/semibold">
|
|
{intl.string(FamilyCenter_messages.BxbvS7)}
|
|
</Text>
|
|
<View style={styles.avatarList}>
|
|
{stateFromStores.map((stateFromStore) => {
|
|
const user = UserStore.getUser(stateFromStore.user_id);
|
|
return user != null ? <Avatar key={user.id} user={user} size={AvatarSizes.SMALL} guildId={void 0} /> : null;
|
|
})}
|
|
</View>
|
|
</TouchableHitBox>
|
|
</View>}
|
|
{stateFromStores2.length > 0 && <View style={styles.section}>
|
|
<TouchableHitBox style={styles.touchableHitBox} onPress={callback} accessibilityRole="button" accessibilityLabel={intl.string(FamilyCenter_messages.Lq9Set)}>
|
|
<Text variant="text-sm/semibold">
|
|
{intl.string(FamilyCenter_messages.Lq9Set)}
|
|
</Text>
|
|
<View style={styles.avatarList}>
|
|
{stateFromStores2.map((item) => {
|
|
const guild = FamilyCenterStore.getGuild(item.guild_id);
|
|
return guild != null ? <GuildIcon key={guild.id} style={styles.guildAvatar} textStyle={styles.guildAvatarText} guild={guild} size={GuildIconSizes.SMALL} /> : null;
|
|
})}
|
|
</View>
|
|
</TouchableHitBox>
|
|
</View>}
|
|
</View>;
|
|
}
|
|
return r41;
|
|
};
|