nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-30 00:50:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'auto-scroll-guidetool' into '@fix/zalgo-text'

Browse Source 
Fix auto-scroll helper chat (Issue #208)

See merge request nitro/nitro-react!66
This commit is contained in:
Bill 2022-08-08 03:19:56 +00:00
commit 33fb28ad5a
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/guide-tool/views/GuideToolOngoingView.tsx
View File

@ -1,5 +1,5 @@
import { GuideSessionGetRequesterRoomMessageComposer, GuideSessionInviteRequesterMessageComposer, GuideSessionMessageMessageComposer, GuideSessionRequesterRoomMessageEvent, GuideSessionResolvedMessageComposer } from '@nitrots/nitro-renderer'; import { GuideSessionGetRequesterRoomMessageComposer, GuideSessionInviteRequesterMessageComposer, GuideSessionMessageMessageComposer, GuideSessionRequesterRoomMessageEvent, GuideSessionResolvedMessageComposer } from '@nitrots/nitro-renderer';
import { FC, KeyboardEvent, useCallback, useState } from 'react'; import { FC, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
import { GetSessionDataManager, GuideToolMessageGroup, LocalizeText, SendMessageComposer, TryVisitRoom } from '../../../api'; import { GetSessionDataManager, GuideToolMessageGroup, LocalizeText, SendMessageComposer, TryVisitRoom } from '../../../api';
import { Base, Button, ButtonGroup, Column, Flex, LayoutAvatarImageView, Text } from '../../../common'; import { Base, Button, ButtonGroup, Column, Flex, LayoutAvatarImageView, Text } from '../../../common';
import { useMessageEvent } from '../../../hooks'; import { useMessageEvent } from '../../../hooks';
@ -16,10 +16,18 @@ interface GuideToolOngoingViewProps
export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props => export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
{ {
const scrollDiv = useRef<HTMLDivElement>(null);
const { isGuide = false, userId = 0, userName = null, userFigure = null, isTyping = false, messageGroups = [] } = props; const { isGuide = false, userId = 0, userName = null, userFigure = null, isTyping = false, messageGroups = [] } = props;
const [ messageText, setMessageText ] = useState<string>(''); const [ messageText, setMessageText ] = useState<string>('');
useEffect(() =>
{
scrollDiv.current?.scrollIntoView({ block: 'end', behavior: 'smooth' });
}, [ messageGroups ]);
const visit = useCallback(() => const visit = useCallback(() =>
{ {
SendMessageComposer(new GuideSessionGetRequesterRoomMessageComposer()); SendMessageComposer(new GuideSessionGetRequesterRoomMessageComposer());
@ -101,6 +109,7 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
</Flex> </Flex>
); );
}) } }) }
<div ref={ scrollDiv } />
</Column> </Column>
</Column> </Column>
<Column gap={ 1 }> <Column gap={ 1 }>