nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-18 13:26:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix the busted room info popover in navi

Browse Source
This commit is contained in:
Bill 2022-04-17 21:22:02 -04:00
parent f787d8f436
commit dc89f4117a
1 changed files with 9 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
View File

@ -1,6 +1,6 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { RoomDataParser } from '@nitrots/nitro-renderer';
import { FC, MouseEvent, useEffect, useState } from 'react';
import { FC, useRef, useState } from 'react';
import { Overlay, Popover } from 'react-bootstrap';
import { LocalizeText } from '../../../../api';
import { Base, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, Text, UserProfileIconView } from '../../../../common';
@ -13,8 +13,8 @@ interface NavigatorSearchResultItemInfoViewProps
export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfoViewProps> = props =>
{
const { roomData = null } = props;
const [ target, setTarget ] = useState<(EventTarget & HTMLElement)>(null);
const [ isVisible, setIsVisible ] = useState(false);
const elementRef = useRef<HTMLDivElement>();
const getUserCounterColor = () =>
{
@ -38,33 +38,10 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
return bg;
}
const toggle = (event: MouseEvent<HTMLElement>) =>
{
event.stopPropagation();
let visible = false;
setIsVisible(prevValue =>
{
visible = !prevValue;
return visible;
});
if(visible) setTarget((event.target as (EventTarget & HTMLElement)));
}
useEffect(() =>
{
if(isVisible) return;
setTarget(null);
}, [ isVisible ]);
return (
<>
<Base pointer className="icon icon-navigator-info" onMouseOver={ toggle } onMouseLeave={ toggle }>
<Overlay show={ isVisible } target={ target } placement="right">
<Base pointer innerRef={ elementRef } className="icon icon-navigator-info" onMouseOver={ event => setIsVisible(true) } onMouseLeave={ event => setIsVisible(false) } />
<Overlay show={ isVisible } target={ elementRef.current } placement="right">
<Popover>
<NitroCardContentView overflow="hidden" className="room-info bg-transparent">
<Flex gap={ 2 } overflow="hidden">
@ -78,14 +55,14 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
<Text bold truncate className="flex-grow-1" style={ { maxHeight: 13 } }>
{ roomData.roomName }
</Text>
<Flex gap={ 1 }>
<Flex gap={ 2 }>
<Text italics variant="muted">
{ LocalizeText('navigator.roomownercaption') }
</Text>
<UserProfileIconView
userId={ roomData.ownerId }
/>
<Text italics>{ roomData.ownerName }</Text>
<Flex alignItems="center" gap={ 1 }>
<UserProfileIconView userId={ roomData.ownerId } />
<Text italics>{ roomData.ownerName }</Text>
</Flex>
</Flex>
<Text className="flex-grow-1">
{ roomData.description }
@ -99,7 +76,6 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
</NitroCardContentView>
</Popover>
</Overlay>
</Base>
</>
);
}