117 lines
4.8 KiB
TypeScript
117 lines
4.8 KiB
TypeScript
// Metro module 15315 (f15316).
|
|
import { useCallback, useMemo } from "react";
|
|
import { View } from "react-native";
|
|
import { AnalyticEvents } from "../../../Constants";
|
|
import { Sections } from "../../main_tabs_v2/native/friends/screens/FriendsScreenConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import { useMessagesTabLayout, getLayoutStyles, isLayoutCompact, makeSizeStyle } from "../../main_tabs_v2/native/shared_components/guild_channels/layouts/ChannelListLayout";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { isAndroid } from "../../../utils/PlatformUtils";
|
|
import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
|
|
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
|
|
import { AvatarSizes, Icon, IconSizes, Avatar } from "../../../design/void/native";
|
|
import { useFontScale } from "../../screen/native/useFontScale";
|
|
import { renderChannelPressableWrapper } from "../../main_tabs_v2/native/shared_components/guild_channels/ChannelPressableWrapper";
|
|
import { PressableHighlight } from "../../../design/void/Pressables/native/Pressables";
|
|
import { renderChannelWrapper } from "../../main_tabs_v2/native/shared_components/guild_channels/ChannelWrapper";
|
|
import { AvatarDuoPile } from "../../../design/components/Pile/native/AvatarDuoPile.native";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import Module5229 from "../../../_bundle/Module5229";
|
|
let useStyles;
|
|
const ForYouShowAllRow = function ForYouShowAllRow(props) {
|
|
const { children, count, onPress, panelVariant = false } = props;
|
|
const messagesTabLayout2 = useMessagesTabLayout(panelVariant);
|
|
const styles = useStyles(messagesTabLayout2);
|
|
const styles2 = getLayoutStyles(messagesTabLayout2);
|
|
const fontScale = useFontScale();
|
|
return renderChannelPressableWrapper(<PressableHighlight accessibilityRole="button" underlayColor={styles.rowActive.backgroundColor} onPress={onPress} style={[styles.pressable, {
|
|
borderRadius: styles2.container.borderRadius
|
|
}]}>
|
|
{renderChannelWrapper(<>
|
|
<View style={styles.avatar}>
|
|
<AvatarDuoPile size={isLayoutCompact(messagesTabLayout2) ? AvatarSizes.XSMALL_20 : AvatarSizes.SMALL} aria-label="">{children}</AvatarDuoPile>
|
|
</View>
|
|
<View style={styles.textContainer}>
|
|
<Text lineClamp={1} variant={styles2.channelName.text.variant} color="text-brand" style={styles.nameText}>
|
|
{intl.format(t.NrzztX, {
|
|
count
|
|
})}
|
|
</Text>
|
|
</View>
|
|
<Icon style={styles.icon} color={styles.iconColor.color} source={Module5229} size={IconSizes.CUSTOM} />
|
|
</>, {
|
|
layout: messagesTabLayout2,
|
|
fontScale,
|
|
panelVariant
|
|
})}
|
|
</PressableHighlight>, {
|
|
layout: messagesTabLayout2,
|
|
panelVariant
|
|
});
|
|
};
|
|
useStyles = createStyles((a0) => {
|
|
const styles = getLayoutStyles(a0);
|
|
const r20 = makeSizeStyle(styles.icon.wrapper.size);
|
|
return {
|
|
rowActive: {
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED
|
|
},
|
|
pressable: {
|
|
flex: 1
|
|
},
|
|
textContainer: {
|
|
flexDirection: "column",
|
|
flexGrow: 2,
|
|
flexShrink: 2,
|
|
alignSelf: "center",
|
|
overflow: "hidden",
|
|
marginTop: -2,
|
|
marginRight: Module712.space.PX_8
|
|
},
|
|
nameText: {
|
|
flexShrink: 1,
|
|
marginBottom: isAndroid() ? 2 : 0
|
|
},
|
|
avatar: {
|
|
position: "relative",
|
|
borderRadius: Module712.radii.round,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
flexShrink: 0,
|
|
flexGrow: 0,
|
|
...r20,
|
|
marginRight: styles.icon.margin.marginRight + 4
|
|
},
|
|
icon: {
|
|
width: 8,
|
|
height: 32,
|
|
paddingRight: Module712.space.PX_24
|
|
},
|
|
iconColor: {
|
|
color: Module712.colors.INTERACTIVE_TEXT_DEFAULT
|
|
}
|
|
};
|
|
});
|
|
export function ForYouSuggestedFriendShowAllRow(props) {
|
|
const { suggestedFriends, panelVariant = false } = props;
|
|
const navigation = useNavigation();
|
|
const messagesTabLayout = useMessagesTabLayout(panelVariant);
|
|
return <ForYouShowAllRow count={suggestedFriends.length} onPress={useCallback(() => {
|
|
AnalyticsUtils.track(AnalyticEvents.FRIEND_FINDER_SECTION_EXPANDED, {
|
|
section_id: Sections.FRIEND_SUGGESTIONS,
|
|
truncated_count: 2,
|
|
expanded_count: suggestedFriends.length,
|
|
location: "NotificationsTab"
|
|
});
|
|
navigation.navigate("friends", {
|
|
screen: "suggested-friends",
|
|
params: {
|
|
presentation: "card"
|
|
}
|
|
});
|
|
}, [navigation, suggestedFriends])} panelVariant={panelVariant}>
|
|
{useMemo(() => suggestedFriends.slice(2, 4).map((item) => <Avatar key={item.user.id} user={item.user} guildId={void 0} size={isLayoutCompact(messagesTabLayout) ? AvatarSizes.XSMALL_20 : AvatarSizes.SMALL} />), [messagesTabLayout, suggestedFriends])}
|
|
</ForYouShowAllRow>;
|
|
}
|