mirror of https://github.com/msgbyte/tailchat
67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { useCachedUserInfo, useFriendNickname } from 'tailchat-shared';
|
|
|
|
interface UserNameProps {
|
|
userId: string;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
showDiscriminator?: boolean;
|
|
}
|
|
|
|
/**
|
|
* 纯净版的 UserName, 无需redux上下文
|
|
*/
|
|
export const UserNamePure: React.FC<UserNameProps> = React.memo((props) => {
|
|
const { userId, showDiscriminator, className, style } = props;
|
|
const cachedUserInfo = useCachedUserInfo(userId);
|
|
|
|
return (
|
|
<span className={className} style={style}>
|
|
{cachedUserInfo.nickname ?? <span> </span>}
|
|
|
|
{showDiscriminator && (
|
|
<UserNameDiscriminator discriminator={cachedUserInfo.discriminator} />
|
|
)}
|
|
</span>
|
|
);
|
|
});
|
|
UserNamePure.displayName = 'UserNamePure';
|
|
|
|
/**
|
|
* 增加好友名称patch的 UserName
|
|
*/
|
|
export const UserName: React.FC<UserNameProps> = React.memo((props) => {
|
|
const { userId, showDiscriminator, className, style } = props;
|
|
const cachedUserInfo = useCachedUserInfo(userId);
|
|
const friendNickname = useFriendNickname(userId);
|
|
|
|
return (
|
|
<span className={className} style={style}>
|
|
{friendNickname ? (
|
|
<>
|
|
{friendNickname}
|
|
<span className="opacity-60">({cachedUserInfo.nickname})</span>
|
|
</>
|
|
) : (
|
|
cachedUserInfo.nickname ?? <span> </span>
|
|
)}
|
|
|
|
{showDiscriminator && (
|
|
<UserNameDiscriminator discriminator={cachedUserInfo.discriminator} />
|
|
)}
|
|
</span>
|
|
);
|
|
});
|
|
UserName.displayName = 'UserName';
|
|
|
|
const UserNameDiscriminator: React.FC<{ discriminator: string }> = React.memo(
|
|
({ discriminator }) => {
|
|
return (
|
|
<span className="text-gray-500 dark:text-gray-300 opacity-0 group-hover:opacity-100">
|
|
#{discriminator}
|
|
</span>
|
|
);
|
|
}
|
|
);
|
|
UserNameDiscriminator.displayName = 'UserNameDiscriminator';
|