239 lines
9.6 KiB
TypeScript
239 lines
9.6 KiB
TypeScript
// Metro module 15363 (f15364).
|
|
import { useMemo, useCallback } from "react";
|
|
import { View } from "react-native";
|
|
import ChannelStore from "../../../stores/ChannelStore";
|
|
import GuildMemberStore from "../../../stores/GuildMemberStore";
|
|
import GuildStore from "../../../stores/GuildStore";
|
|
import { DEFAULT_ROLE_COLOR_HEX } from "../../../Constants";
|
|
import { createICYMIStyles } from "./createICYMIStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import ClipView, { CutoutShape } from "../../../design/components/Icon/native/ClipView";
|
|
import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
|
|
import { Avatar, AvatarSizes } from "../../../design/void/native";
|
|
import { useFontScale } from "../../screen/native/useFontScale";
|
|
import { useStateFromStores } from "../../../_bundle/Module589";
|
|
import useDisplayNameStyles from "../../display_name_styles/hooks/useDisplayNameStyles";
|
|
import { useDisplayNameStylesFont } from "../../display_name_styles/native/useDisplayNameStylesFont";
|
|
import { useName } from "../../../utils/NicknameUtils";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import useChannelName from "../../channel/useChannelName";
|
|
import { getIconForChannel } from "./util/getIconForChannel";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { TextIcon } from "../../../design/components/Icon/native/redesign/generated/TextIcon";
|
|
import { openDetailsActionSheet } from "./util/openDetailsActionSheet";
|
|
import { PressableHighlight, PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
|
|
import { getRelativeTimestamp } from "../../notification_center/NotificationCenterUtils";
|
|
import { MoreHorizontalIcon } from "../../../design/components/Icon/native/redesign/generated/MoreHorizontalIcon";
|
|
let styles;
|
|
const CutoutGuildIconWithUserCustom = function CutoutGuildIconWithUserCustom(props) {
|
|
const { guild, author } = props;
|
|
return <View style={{
|
|
width: 40,
|
|
height: 40
|
|
}}>
|
|
<ClipView cutouts={[{
|
|
shape: CutoutShape.Circle,
|
|
x: 18,
|
|
y: 18,
|
|
size: 24
|
|
}]}>
|
|
<GuildIcon guild={guild} size={GuildIconSizes.SMALL_32} />
|
|
</ClipView>
|
|
<Avatar animate style={styles().authorAvatar} guildId={guild.id} user={author} size={AvatarSizes.XSMALL_20} />
|
|
</View>;
|
|
};
|
|
styles = createICYMIStyles((a0) => ({
|
|
container: {
|
|
marginTop: a0.margin
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
overflow: "hidden"
|
|
},
|
|
channelNameAndAccessory: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
paddingBottom: Module712.space.PX_4,
|
|
marginHorizontal: a0.margin
|
|
},
|
|
channelNameAndAccessoryLarge: {
|
|
flexDirection: "column",
|
|
paddingBottom: Module712.space.PX_4,
|
|
marginHorizontal: a0.margin
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
flexGrow: 1
|
|
},
|
|
headerInfo: {
|
|
flexGrow: 1,
|
|
flexShrink: 1,
|
|
marginLeft: Module712.space.PX_12
|
|
},
|
|
title: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
marginBottom: 2
|
|
},
|
|
titleLeft: {
|
|
flexShrink: 1,
|
|
flexGrow: 0,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 6
|
|
},
|
|
subTitleContainer: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
borderRadius: Module712.radii.sm
|
|
},
|
|
subtitle: {
|
|
flexShrink: 1,
|
|
flexGrow: 0,
|
|
width: "100%"
|
|
},
|
|
genContentSubtitle: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 2
|
|
},
|
|
genContentSubtitleChannel: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 2,
|
|
flex: 1
|
|
},
|
|
subtitleTrailing: {
|
|
paddingVertical: 1
|
|
},
|
|
separator: {
|
|
height: 1,
|
|
width: "100%",
|
|
backgroundColor: Module712.colors.BORDER_SUBTLE
|
|
},
|
|
normalContent: {
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: Module712.colors.BORDER_STRONG,
|
|
flexShrink: 0
|
|
},
|
|
authorAvatar: {
|
|
position: "absolute",
|
|
right: 0,
|
|
bottom: 0
|
|
}
|
|
}));
|
|
export default function ICYMICardInCard(props) {
|
|
let guildId, stateFromStores2, stateFromStores3, displayNameStylesFont, name, children;
|
|
const { children: children2, message, actionLabel, timestamp, id, interactionType, onHeaderPress, onHeaderLongPress, channelId, guildId: guildId2, hideTimestamp = false, shouldFeatureUser = false } = props;
|
|
let c21906_6 = shouldFeatureUser;
|
|
guildId = void 0;
|
|
stateFromStores2 = void 0;
|
|
stateFromStores3 = void 0;
|
|
displayNameStylesFont = void 0;
|
|
name = void 0;
|
|
children = void 0;
|
|
const r10 = styles();
|
|
let c21906_7 = r10;
|
|
const fontScale = useFontScale();
|
|
const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId), [channelId]);
|
|
let r30 = stateFromStores?.guild_id;
|
|
if (r30 == null) {
|
|
r30 = guildId2;
|
|
}
|
|
guildId = r30;
|
|
stateFromStores2 = useStateFromStores([GuildStore], () => guildId != null ? GuildStore.getGuild(guildId) : null, [guildId]);
|
|
stateFromStores3 = useStateFromStores([GuildMemberStore], () => c21906_6 ? guildId != null ? (message == null ? void 0 : message.author.id) != null ? GuildMemberStore.getMember(guildId, message.author.id) : null : null : null, [shouldFeatureUser, guildId, message]);
|
|
displayNameStylesFont = useDisplayNameStylesFont({
|
|
displayNameStyles: useDisplayNameStyles({
|
|
userId: message == null ? void 0 : message.author?.id
|
|
})
|
|
});
|
|
const name2 = useName(guildId, stateFromStores?.id, message?.author);
|
|
name = shouldFeatureUser ? message?.author != null ? guildId != null ? stateFromStores != null ? name2 : null : null : null : null;
|
|
const memo = useMemo(() => stateFromStores2 == null ? null : c21906_6 ? message?.author != null ? <CutoutGuildIconWithUserCustom guild={stateFromStores2} author={message.author} /> : <GuildIcon guild={stateFromStores2} size={GuildIconSizes.NORMAL} /> : <GuildIcon guild={stateFromStores2} size={GuildIconSizes.NORMAL} />, [stateFromStores2, shouldFeatureUser, message?.author]);
|
|
const memo2 = useMemo(() => stateFromStores2 != null ? <Text key={stateFromStores2.id} style={{
|
|
maxWidth: 225
|
|
}} lineClamp={1} variant="text-md/semibold" color="mobile-text-heading-primary">{stateFromStores2.name}</Text> : null, [stateFromStores2]);
|
|
children = useChannelName(stateFromStores);
|
|
const memo3 = useMemo(() => {
|
|
if (c21906_6 && message?.author != null && guildId != null && stateFromStores != null && name != null) {
|
|
let color = stateFromStores3?.colorString;
|
|
if (color == null) {
|
|
color = DEFAULT_ROLE_COLOR_HEX;
|
|
}
|
|
const IconForChannel = getIconForChannel(stateFromStores);
|
|
return <View style={c21906_7.genContentSubtitle}>
|
|
<Text variant="text-sm/semibold" style={[{
|
|
color
|
|
}, displayNameStylesFont != null ? {
|
|
fontFamily: displayNameStylesFont
|
|
} : void 0]}>
|
|
{name.length > 20 ? `${name.slice(0, 17)}...` : name}
|
|
</Text>
|
|
<Text variant="text-sm/medium" color="text-default">
|
|
{intl.string(t.CHUAYk)}
|
|
</Text>
|
|
<View style={c21906_7.genContentSubtitleChannel}>
|
|
<IconForChannel size="xs" color="text-default" />
|
|
<Text variant="text-sm/medium" color="text-default" onPress={onHeaderPress} style={{
|
|
flex: 1
|
|
}} lineClamp={1} ellipsizeMode="tail">{children}</Text>
|
|
</View>
|
|
</View>;
|
|
}
|
|
const Component = stateFromStores != null ? getIconForChannel(stateFromStores) : TextIcon;
|
|
return <View style={c21906_7.genContentSubtitle}>
|
|
<Text variant="text-sm/medium" color="text-default">{actionLabel}</Text>
|
|
{stateFromStores != null ? <>
|
|
<Text variant="text-sm/medium" color="text-default">
|
|
{intl.string(t.CHUAYk)}
|
|
</Text>
|
|
<View style={c21906_7.genContentSubtitleChannel}>
|
|
<Component size="xs" color="text-default" />
|
|
<Text variant="text-sm/medium" color="text-default" onPress={onHeaderPress} style={{
|
|
flex: 1
|
|
}} lineClamp={1} ellipsizeMode="tail">{children}</Text>
|
|
</View>
|
|
</> : null}
|
|
</View>;
|
|
}, [shouldFeatureUser, message?.author, guildId, stateFromStores, children, name, stateFromStores3, displayNameStylesFont, r10.genContentSubtitle, r10.genContentSubtitleChannel, onHeaderPress, actionLabel]);
|
|
const callback = useCallback(() => {
|
|
if (stateFromStores2 != null && stateFromStores != null) {
|
|
openDetailsActionSheet({
|
|
guildId: stateFromStores2.id,
|
|
channelId: stateFromStores.id,
|
|
id,
|
|
type: interactionType
|
|
});
|
|
}
|
|
}, [stateFromStores2, stateFromStores, id, interactionType]);
|
|
return <View style={r10.container}>
|
|
<PressableHighlight onPress={onHeaderPress} onLongPress={onHeaderLongPress} style={r10.content}>
|
|
<View style={useMemo(() => fontScale > 1.8 ? c21906_7.channelNameAndAccessoryLarge : c21906_7.channelNameAndAccessory, [fontScale, r10.channelNameAndAccessoryLarge, r10.channelNameAndAccessory])}>
|
|
<View style={r10.header}>
|
|
{memo}
|
|
<View style={r10.headerInfo}>
|
|
<View style={r10.title}>
|
|
<View style={r10.titleLeft}>
|
|
{memo2}
|
|
{hideTimestamp ? !hideTimestamp : <Text lineClamp={1} variant="text-xs/normal" color="text-muted">
|
|
{getRelativeTimestamp(timestamp)}
|
|
</Text>}
|
|
</View>
|
|
<PressableOpacity onPress={callback} style={r10.subtitleTrailing} hitSlop={8}>
|
|
<MoreHorizontalIcon color={Module712.colors.ICON_MUTED} size="sm" />
|
|
</PressableOpacity>
|
|
</View>
|
|
<View style={r10.subTitleContainer}>
|
|
<View style={r10.subtitle}>{memo3}</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</PressableHighlight>
|
|
<View style={r10.normalContent}>{children2}</View>
|
|
</View>;
|
|
};
|