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