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

Fix auto-scroll helper chat (Issue #208)

Browse Source
This commit is contained in:
object 2022-08-05 23:01:59 +00:00
parent 2fa3662860
commit c0d57e8166
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
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());
@ -38,7 +46,7 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
useMessageEvent<GuideSessionRequesterRoomMessageEvent>(GuideSessionRequesterRoomMessageEvent, event => useMessageEvent<GuideSessionRequesterRoomMessageEvent>(GuideSessionRequesterRoomMessageEvent, event =>
{ {
const parser = event.getParser(); const parser = event.getParser();
TryVisitRoom(parser.requesterRoomId); TryVisitRoom(parser.requesterRoomId);
}); });
@ -100,7 +108,8 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
</Base> } </Base> }
</Flex> </Flex>
); );
}) } }) }
<div ref={ scrollDiv } />
</Column> </Column>
</Column> </Column>
<Column gap={ 1 }> <Column gap={ 1 }>