duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-20 07:26:19 +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
+49 -73
View File
@@ -1,85 +1,61 @@
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';
interface ChatInputStyleSelectorViewProps interface ChatInputStyleSelectorViewProps
{ {
chatStyleId: number; chatStyleId: number;
chatStyleIds: number[]; chatStyleIds: number[];
selectChatStyleId: (styleId: number) => void; selectChatStyleId: (styleId: number) => void;
} }
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) =>
{ {
selectChatStyleId(styleId); selectChatStyleId(styleId);
setSelectorVisible(false); setSelectorVisible(false);
}; };
const toggleSelector = (event: MouseEvent<HTMLElement>) => return (
{ <Popover
let visible = false; padding={12}
isOpen={selectorVisible}
setSelectorVisible(prevValue => positions={['top']}
{ reposition={false}
visible = !prevValue; 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 }) => (
return visible; <ArrowContainer
}); arrowColor={'black'}
arrowSize={7}
if(visible) setTarget((event.target as (EventTarget & HTMLElement))); arrowStyle={{ bottom: 'calc(-.5rem - 1px)' }}
}; childRect={childRect}
popoverRect={popoverRect}
useEffect(() => position={position}
{ >
if(selectorVisible) return; <NitroCardContentView className="bg-transparent max-h-[200px]!" overflow="hidden">
<Grid columnCount={3} overflow="auto">
setTarget(null); {chatStyleIds && chatStyleIds.length > 0 && chatStyleIds.map(styleId => (
}, [ selectorVisible ]); <Flex key={styleId} center pointer className="h-[30px]" onClick={() => selectStyle(styleId)}>
<div className="bubble-container relative w-[50px]">
return ( <div className={`relative max-w-[350px] min-h-[26px] text-[14px] chat-bubble bubble-${styleId}`}>&nbsp;</div>
<> </div>
</Flex>
<Popover ))}
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" </Grid>
content={ ({ position, childRect, popoverRect }) => ( </NitroCardContentView>
<ArrowContainer // if you'd like an arrow, you can import the ArrowContainer! </ArrowContainer>
arrowColor={ 'black' } )}
arrowSize={ 7 } >
arrowStyle={ { bottom: 'calc(-.5rem - 1px)' } } <div
childRect={ childRect } className="chatstyles-anchor"
popoverRect={ popoverRect } onClick={() => setSelectorVisible(v => !v)}
position={ position } >
> <div className="nitro-icon chatstyles-icon" />
<NitroCardContentView className="bg-transparent max-h-[200px]!" overflow="hidden"> </div>
<Grid columnCount={ 3 } overflow="auto"> </Popover>
{ chatStyleIds && (chatStyleIds.length > 0) && chatStyleIds.map((styleId) => );
{
return (
<Flex key={ styleId } center pointer className="h-[30px]" onClick={ event => selectStyle(styleId) }>
<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>
</Flex>
);
}) }
</Grid>
</NitroCardContentView>
</ArrowContainer>
) }
isOpen={ selectorVisible }
positions={ [ 'top' ] }
>
<div className="cursor-pointer nitro-icon chatstyles-icon" onClick={ toggleSelector } />
</Popover>
</>
);
}; };