72 lines
3.0 KiB
TypeScript
72 lines
3.0 KiB
TypeScript
import {FindNewFriendsMessageComposer, MouseEventType} from "@nitro/renderer";
|
|
import {FC, useEffect, useRef, useState} from "react";
|
|
|
|
import {GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat, SendMessageComposer} from "../../../../api";
|
|
import {Base, Button, LayoutAvatarImageView, LayoutBadgeImageView} from "../../../../common";
|
|
import {useFriends} from "../../../../hooks";
|
|
|
|
export const FriendBarItemView: FC<{friend: MessengerFriend}> = props => {
|
|
const {friend = null} = props;
|
|
const [isVisible, setVisible] = useState(false);
|
|
const {followFriend = null} = useFriends();
|
|
const elementRef = useRef<HTMLDivElement>();
|
|
|
|
useEffect(() => {
|
|
const onClick = (event: MouseEvent) => {
|
|
const element = elementRef.current;
|
|
|
|
if (!element) return;
|
|
|
|
if (event.target !== element && !element.contains(event.target as Node)) {
|
|
setVisible(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener(MouseEventType.MOUSE_CLICK, onClick);
|
|
|
|
return () => document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
|
|
}, []);
|
|
|
|
if (!friend) {
|
|
return (
|
|
<div ref={elementRef} className="btn btn-primary friend-bar-item-search friend-bar-search" onClick={event => setVisible(prevValue => !prevValue)}>
|
|
<div className="friend-bar-item-head position-absolute" />
|
|
<div className="text-truncate left-text">{LocalizeText("friend.bar.find.title")}</div>
|
|
{isVisible && (
|
|
<>
|
|
<div className="search-content">
|
|
<div className="bg-white text-black mt-2 mb-2 px-1 py-1">{LocalizeText("friend.bar.find.text")}</div>
|
|
<Button variant="white" onClick={() => SendMessageComposer(new FindNewFriendsMessageComposer())}>
|
|
{LocalizeText("friend.bar.find.button")}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={elementRef}
|
|
className={"btn btn-success friend-bar-item " + (isVisible ? "friend-bar-item-active" : "")}
|
|
onClick={event => setVisible(prevValue => !prevValue)}
|
|
>
|
|
<div className={`friend-bar-item-head position-absolute ${friend.id > 0 ? "avatar" : "group"}`}>
|
|
{friend.id > 0 && <LayoutAvatarImageView headOnly={true} figure={friend.figure} direction={2} />}
|
|
{friend.id <= 0 && <LayoutBadgeImageView isGroup={true} badgeCode={friend.figure} />}
|
|
</div>
|
|
<div className="text-truncate">{friend.name}</div>
|
|
{isVisible && (
|
|
<div className="d-flex justify-content-between">
|
|
<Base className="nitro-friends-spritesheet icon-friendbar-chat cursor-pointer" onClick={event => OpenMessengerChat(friend.id)} />
|
|
{friend.followingAllowed && (
|
|
<Base className="nitro-friends-spritesheet icon-friendbar-visit cursor-pointer" onClick={event => followFriend(friend)} />
|
|
)}
|
|
<Base className="nitro-friends-spritesheet icon-profile cursor-pointer" onClick={event => GetUserProfile(friend.id)} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|