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

fix scrolling

Browse Source
This commit is contained in:
dank074 2021-10-22 19:56:51 -05:00
parent 91e59fce04
commit feac3cc959
1 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/chat-history/ChatHistoryView.tsx
View File

@ -1,5 +1,6 @@
import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer, Size } from 'react-virtualized'; import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer, Size } from 'react-virtualized';
import { RenderedRows } from 'react-virtualized/dist/es/List';
import { ChatHistoryEvent } from '../../events/chat-history/ChatHistoryEvent'; import { ChatHistoryEvent } from '../../events/chat-history/ChatHistoryEvent';
import { useUiEvent } from '../../hooks'; import { useUiEvent } from '../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
@ -12,6 +13,7 @@ import { RoomHistoryState } from './utils/RoomHistoryState';
export const ChatHistoryView: FC<{}> = props => export const ChatHistoryView: FC<{}> = props =>
{ {
const [ isVisible, setIsVisible ] = useState(false); const [ isVisible, setIsVisible ] = useState(false);
const [ needsScroll, setNeedsScroll ] = useState(false);
const [ chatHistoryUpdateId, setChatHistoryUpdateId ] = useState(-1); const [ chatHistoryUpdateId, setChatHistoryUpdateId ] = useState(-1);
const [ roomHistoryUpdateId, setRoomHistoryUpdateId ] = useState(-1); const [ roomHistoryUpdateId, setRoomHistoryUpdateId ] = useState(-1);
const [ chatHistoryState, setChatHistoryState ] = useState(new ChatHistoryState()); const [ chatHistoryState, setChatHistoryState ] = useState(new ChatHistoryState());
@ -67,7 +69,7 @@ export const ChatHistoryView: FC<{}> = props =>
const RowRenderer: ListRowRenderer = (props: ListRowProps) => const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
{ {
const item = chatHistoryState.chats[props.index]; const item = chatHistoryState.chats[props.index];
console.log(props.index);
return ( return (
<CellMeasurer <CellMeasurer
cache={cache} cache={cache}
@ -110,15 +112,30 @@ export const ChatHistoryView: FC<{}> = props =>
cache.clearAll(); cache.clearAll();
}, [cache]); }, [cache]);
const onRowsRendered = useCallback((info: RenderedRows) =>
{
if(elementRef && elementRef.current && isVisible && needsScroll)
{
console.log('stop ' + info.stopIndex);
//if(chatHistoryState.chats.length > 0) elementRef.current.measureAllRows();
elementRef.current.scrollToRow(chatHistoryState.chats.length);
console.log('scroll')
setNeedsScroll(false);
}
}, [chatHistoryState.chats.length, isVisible, needsScroll]);
useEffect(() => useEffect(() =>
{ {
if(elementRef && elementRef.current && isVisible) if(elementRef && elementRef.current && isVisible)
{ {
//elementRef.current.measureAllRows(); //if(chatHistoryState.chats.length > 0) elementRef.current.measureAllRows();
elementRef.current.scrollToRow(chatHistoryState.chats.length - 1); elementRef.current.scrollToRow(chatHistoryState.chats.length);
} }
//console.log(chatHistoryState.chats.length); //console.log(chatHistoryState.chats.length);
}, [chatHistoryState.chats, isVisible, chatHistoryUpdateId])
setNeedsScroll(true);
}, [chatHistoryState.chats, isVisible, chatHistoryUpdateId]);
return ( return (
<ChatHistoryContextProvider value={ { chatHistoryState, roomHistoryState } }> <ChatHistoryContextProvider value={ { chatHistoryState, roomHistoryState } }>
@ -140,6 +157,7 @@ export const ChatHistoryView: FC<{}> = props =>
rowHeight={cache.rowHeight} rowHeight={cache.rowHeight}
className={'chat-history-list'} className={'chat-history-list'}
rowRenderer={RowRenderer} rowRenderer={RowRenderer}
onRowsRendered={onRowsRendered}
deferredMeasurementCache={cache} deferredMeasurementCache={cache}
/> />
) )