103 lines
4.2 KiB
TypeScript
103 lines
4.2 KiB
TypeScript
// Metro module 14368 (f14369).
|
|
import { useMemo } from "react";
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useGuildMemberAndUserPendingNameplate } from "../../profile_customization/ProfileCustomizationUtils";
|
|
import { getNameplateData } from "../../collectibles/nameplates/utils";
|
|
import UserProfilePreview from "../../user_profile/native/UserProfilePreview";
|
|
import { intl } from "../../../intl/index.native";
|
|
import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
|
|
import { NameplatePreview } from "../../collectibles/nameplates/native/NameplatePreview";
|
|
import { calendarFormat } from "../../../utils/DateUtils";
|
|
import { Avatar, AvatarSizes } from "../../../design/void/native";
|
|
import UsernameWithEffects from "./UsernameWithEffects";
|
|
import { EffectDisplayType } from "../types";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
let useStyles;
|
|
const ChatPreview = function ChatPreview(props) {
|
|
const { user, displayName, displayNameStyles, guildId } = props;
|
|
const styles = useStyles();
|
|
return <View style={styles.chatContainer} pointerEvents="none">
|
|
<Avatar user={user} size={AvatarSizes.NORMAL} guildId={guildId} />
|
|
<View style={styles.chatContent}>
|
|
<View style={styles.chatHeader}>
|
|
<UsernameWithEffects userId={user.id} guildId={guildId} userName={displayName} variant="text-md/semibold" effectDisplayType={EffectDisplayType.PLAIN} lineClamp={1} pendingDisplayNameStyles={displayNameStyles} />
|
|
<Text variant="text-xs/medium" color="text-muted" style={styles.chatTimestamp}>
|
|
{useMemo(() => calendarFormat(new Date(), true), [])}
|
|
</Text>
|
|
</View>
|
|
<Text variant="text-md/normal" color="text-default" style={styles.chatMessageText}>
|
|
{intl.string(DisplayNameStyles_messages.h5Cuej)}
|
|
</Text>
|
|
</View>
|
|
</View>;
|
|
};
|
|
useStyles = createStyles({
|
|
previewSection: {
|
|
marginBottom: Module712.space.PX_24,
|
|
alignItems: "center",
|
|
alignSelf: "center",
|
|
width: "100%",
|
|
maxWidth: 360
|
|
},
|
|
chatPreviewWrapper: {
|
|
marginTop: -18,
|
|
alignSelf: "flex-end",
|
|
width: 260,
|
|
borderRadius: Module712.radii.sm,
|
|
borderWidth: 1,
|
|
borderColor: Module712.colors.BACKGROUND_MOD_SUBTLE
|
|
},
|
|
nameplatePreviewWrapper: {
|
|
marginTop: -6,
|
|
width: 260
|
|
},
|
|
chatContainer: {
|
|
flexDirection: "row",
|
|
borderRadius: Module712.radii.sm,
|
|
padding: Module712.space.PX_16,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
gap: Module712.space.PX_12
|
|
},
|
|
chatContent: {
|
|
flex: 1
|
|
},
|
|
chatHeader: {
|
|
flexDirection: "row",
|
|
alignItems: "baseline",
|
|
gap: 6
|
|
},
|
|
chatTimestamp: {
|
|
marginTop: -8
|
|
},
|
|
chatMessageText: {}
|
|
});
|
|
export default function DisplayNameStylesEditPreview(props) {
|
|
const { user, displayName, guildId, selectedFontId, selectedEffectId, selectedColors } = props;
|
|
const styles = useStyles();
|
|
const guildMemberAndUserPendingNameplate = useGuildMemberAndUserPendingNameplate(user, guildId);
|
|
const { userNameplate, guildNameplate, pendingNameplate } = guildMemberAndUserPendingNameplate;
|
|
let r15 = getNameplateData(guildNameplate);
|
|
const memo = useMemo(() => ({
|
|
fontId: selectedFontId,
|
|
effectId: selectedEffectId,
|
|
colors: selectedColors
|
|
}), [selectedFontId, selectedEffectId, selectedColors]);
|
|
const r50 = [<UserProfilePreview user={user} displayName={displayName} guildId={guildId} displayNameStylesOverride={memo} compact hideFrame maxWidth={320} accessibilityLabel={intl.string(DisplayNameStyles_messages.zoh6MT)} />, <View style={styles.chatPreviewWrapper}>
|
|
<ChatPreview user={user} displayName={displayName} displayNameStyles={memo} guildId={guildId} />
|
|
</View>, ,];
|
|
const r2 = pendingNameplate == null;
|
|
let nameplateData = void 0;
|
|
if (r2) {
|
|
if (r15 == null) {
|
|
r15 = userNameplate;
|
|
}
|
|
nameplateData = r15;
|
|
}
|
|
r50[2] = <View style={styles.nameplatePreviewWrapper}>
|
|
<NameplatePreview user={user} nameplate={pendingNameplate} nameplateData={nameplateData} guildId={guildId} pendingDisplayNameStyles={memo} pendingGlobalName={displayName} />
|
|
</View>;
|
|
return <View style={styles.previewSection}>{r50}</View>;
|
|
};
|