79 lines
3.9 KiB
TypeScript
79 lines
3.9 KiB
TypeScript
// Metro module 9823 (f9824).
|
|
import { useMemo } from "react";
|
|
import { View } from "react-native";
|
|
import AccessibilityStore from "../../../a11y/AccessibilityStore";
|
|
import GuildMemberStore from "../../../../stores/GuildMemberStore";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { getNameplateData } from "../utils";
|
|
import { useAvatarDecoration } from "../../avatar_decorations/useAvatarDecoration";
|
|
import usePendingAvatarSettings from "../../../user_profile/hooks/usePendingAvatarSettings";
|
|
import { useStateFromStores } from "../../../../_bundle/Module589";
|
|
import UserUtils from "../../../../utils/UserUtils";
|
|
import useDisplayNameStyles from "../../../display_name_styles/hooks/useDisplayNameStyles";
|
|
import { Avatar, AvatarSizes } from "../../../../design/void/native";
|
|
import Nameplate from "./Nameplate";
|
|
import UsernameWithEffects from "../../../display_name_styles/native/UsernameWithEffects";
|
|
import { EffectDisplayType } from "../../../display_name_styles/types";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
const useStyles = createStyles((a0) => ({
|
|
container: {
|
|
borderRadius: a0 ? Module712.radii.sm : 0,
|
|
padding: Module712.space.PX_8,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
|
|
},
|
|
nameplate: {
|
|
borderRadius: a0 ? Module712.radii.sm : 0
|
|
},
|
|
avatar: {
|
|
borderRadius: Module712.radii.round,
|
|
marginRight: Module712.space.PX_8
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
paddingRight: Module712.space.PX_40
|
|
}
|
|
}));
|
|
export function NameplatePreview(props) {
|
|
let pendingAvatarDecoration;
|
|
const nameplate = props.nameplate;
|
|
let nameplateData = props.nameplateData;
|
|
const { user, hasRoundedCorners = true, animate = false, guildId, pendingDisplayNameStyles } = props;
|
|
let pendingGlobalName = props.pendingGlobalName;
|
|
const r7 = props["aria-hidden"];
|
|
pendingAvatarDecoration = void 0;
|
|
const styles = useStyles(hasRoundedCorners);
|
|
if (nameplate != null) {
|
|
nameplateData = getNameplateData(nameplate);
|
|
}
|
|
const avatarDecoration = useAvatarDecoration(user, guildId);
|
|
const pendingAvatarDecoration2 = usePendingAvatarSettings({
|
|
guildId
|
|
}).pendingAvatarDecoration;
|
|
const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
|
|
const stateFromStores2 = useStateFromStores([GuildMemberStore], () => guildId != null ? user != null ? GuildMemberStore.getMember(guildId, user.id) : null : null);
|
|
const name = UserUtils.useName(user);
|
|
if (pendingGlobalName == null) {
|
|
pendingGlobalName = guildId != null ? stateFromStores2?.nick != null ? stateFromStores2?.nick : name : name;
|
|
}
|
|
pendingAvatarDecoration = pendingAvatarDecoration2 !== void 0 ? pendingAvatarDecoration2 : avatarDecoration;
|
|
const styles2 = useDisplayNameStyles({
|
|
userId: user.id,
|
|
guildId,
|
|
pendingDisplayNameStyles
|
|
});
|
|
return <View style={styles.container} aria-hidden={r7}>
|
|
<Nameplate nameplate={nameplateData} style={styles.nameplate} fullOpacity animate={animate} />
|
|
<View style={styles.avatar}>
|
|
{useMemo(() => <Avatar style={styles.avatar} user={user} guildId={guildId} size={AvatarSizes.NORMAL} avatarDecoration={pendingAvatarDecoration} animate={!stateFromStores} autoStatusCutout aria-hidden />, [styles.avatar, user, guildId, pendingAvatarDecoration, stateFromStores])}
|
|
</View>
|
|
<View style={styles.content}>
|
|
{styles2 != null && <UsernameWithEffects userId={user.id} guildId={guildId} userName={pendingGlobalName} variant="text-md/semibold" effectDisplayType={EffectDisplayType.STATIC} lineClamp={1} pendingDisplayNameStyles={pendingDisplayNameStyles} />}
|
|
{styles2 == null && <Text lineClamp={1} variant="text-md/semibold" color="mobile-text-heading-primary">{pendingGlobalName}</Text>}
|
|
</View>
|
|
</View>;
|
|
}
|