duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-20 15:36:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Fix hover over ChatInputStyleSelectorView

Browse Source
This commit is contained in:
duckietm
2026-03-02 08:37:36 +01:00
parent 1629f63f9b
commit f8c306982c
1 changed files with 50 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
+27 -51
View File
@@ -1,4 +1,4 @@
import { FC, MouseEvent, useEffect, useState } from 'react'; import { FC, useState } from 'react';
import { ArrowContainer, Popover } from 'react-tiny-popover'; import { ArrowContainer, Popover } from 'react-tiny-popover';
import { Flex, Grid, NitroCardContentView } from '../../../../common'; import { Flex, Grid, NitroCardContentView } from '../../../../common';
@@ -11,8 +11,7 @@ interface ChatInputStyleSelectorViewProps
export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = props => export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = props =>
{ {
const { chatStyleId = 0, chatStyleIds = null, selectChatStyleId = null } = props; const { chatStyleIds = null, selectChatStyleId = null } = props;
const [ target, setTarget ] = useState<(EventTarget & HTMLElement)>(null);
const [ selectorVisible, setSelectorVisible ] = useState(false); const [ selectorVisible, setSelectorVisible ] = useState(false);
const selectStyle = (styleId: number) => const selectStyle = (styleId: number) =>
@@ -21,65 +20,42 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
setSelectorVisible(false); setSelectorVisible(false);
}; };
const toggleSelector = (event: MouseEvent<HTMLElement>) =>
{
let visible = false;
setSelectorVisible(prevValue =>
{
visible = !prevValue;
return visible;
});
if(visible) setTarget((event.target as (EventTarget & HTMLElement)));
};
useEffect(() =>
{
if(selectorVisible) return;
setTarget(null);
}, [ selectorVisible ]);
return ( return (
<>
<Popover <Popover
padding={12}
isOpen={selectorVisible}
positions={['top']}
reposition={false}
containerClassName="max-w-[276px] not-italic font-normal leading-normal text-left no-underline text-shadow-none normal-case tracking-[normal] [word-break:normal] [word-spacing:normal] whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#dfdfdf] bg-clip-padding border border-[solid] border-[#283F5D] rounded-[.25rem] [box-shadow:0_2px_#00000073] z-1070" containerClassName="max-w-[276px] not-italic font-normal leading-normal text-left no-underline text-shadow-none normal-case tracking-[normal] [word-break:normal] [word-spacing:normal] whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#dfdfdf] bg-clip-padding border border-[solid] border-[#283F5D] rounded-[.25rem] [box-shadow:0_2px_#00000073] z-1070"
content={ ({ position, childRect, popoverRect }) => ( content={({ position, childRect, popoverRect }) => (
<ArrowContainer // if you'd like an arrow, you can import the ArrowContainer! <ArrowContainer
arrowColor={ 'black' } arrowColor={'black'}
arrowSize={ 7 } arrowSize={7}
arrowStyle={ { bottom: 'calc(-.5rem - 1px)' } } arrowStyle={{ bottom: 'calc(-.5rem - 1px)' }}
childRect={ childRect } childRect={childRect}
popoverRect={ popoverRect } popoverRect={popoverRect}
position={ position } position={position}
> >
<NitroCardContentView className="bg-transparent max-h-[200px]!" overflow="hidden"> <NitroCardContentView className="bg-transparent max-h-[200px]!" overflow="hidden">
<Grid columnCount={ 3 } overflow="auto"> <Grid columnCount={3} overflow="auto">
{ chatStyleIds && (chatStyleIds.length > 0) && chatStyleIds.map((styleId) => {chatStyleIds && chatStyleIds.length > 0 && chatStyleIds.map(styleId => (
{ <Flex key={styleId} center pointer className="h-[30px]" onClick={() => selectStyle(styleId)}>
return ( <div className="bubble-container relative w-[50px]">
<Flex key={ styleId } center pointer className="h-[30px]" onClick={ event => selectStyle(styleId) }> <div className={`relative max-w-[350px] min-h-[26px] text-[14px] chat-bubble bubble-${styleId}`}>&nbsp;</div>
<div key={ styleId } className="bubble-container relative w-[50px]">
<div className={ `relative max-w-[350px] min-h-[26px] text-[14px] chat-bubble bubble-${ styleId }` }>&nbsp;</div>
</div> </div>
</Flex> </Flex>
); ))}
}) }
</Grid> </Grid>
</NitroCardContentView> </NitroCardContentView>
</ArrowContainer> </ArrowContainer>
) } )}
isOpen={ selectorVisible }
positions={ [ 'top' ] }
> >
<div className="cursor-pointer nitro-icon chatstyles-icon" onClick={ toggleSelector } /> <div
className="chatstyles-anchor"
onClick={() => setSelectorVisible(v => !v)}
>
<div className="nitro-icon chatstyles-icon" />
</div>
</Popover> </Popover>
</>
); );
}; };